Dynamic meta tags #1409

vferdiansyah · 2020-09-22T00:09:30Z

vferdiansyah
Sep 22, 2020

❓Question

I've tried implementing dynamic meta tags by using react-helmet and react-helmet-async but both are still broken. I still don't see my dynamic meta tags in SEO tools even though if I inspect the page, the meta tags are already there. Somehow it falls back to the default value.

Do you have any suggestions for this?

Answered by fivethreeo

Jan 25, 2021

The component with helmet probably does some data fecthing to decide props, this does not work server-side.

View full answer

fivethreeo · 2020-09-22T00:13:28Z

fivethreeo
Sep 22, 2020
Collaborator

Without seeing the actual code it is hard to say what the issue is.

0 replies

vferdiansyah · 2020-09-22T00:28:28Z

vferdiansyah
Sep 22, 2020
Author

@fivethreeo I'm using react-helmet-async.

This is the Helmet on 1 of my component.

<Helmet>
    <title>{props.title ? props.title : 'Default title'}</title>
    <meta property="og:title" content={props.title ? props.title : 'Default title'} />
    <meta
          property="og:description"
          content={props.description ? props.description : 'Default description.'}
        />
</Helmet>

This is on client.tsx

hydrate(
  <Provider store={store}>
    <HelmetProvider>
      <ConnectedRouter history={history}>
        <App />
      </ConnectedRouter>
    </HelmetProvider>
  </Provider>,
  document.getElementById('root')
);

This is on server.tsx

const context: any = {};
const helmetContext: any = {};
const store = configureStore(initState);
const markup = renderToString(
      <Provider store={store}>
        <HelmetProvider context={helmetContext}>
          <StaticRouter context={context} location={req.url}>
            <App />
          </StaticRouter>
        </HelmetProvider>
      </Provider>
);
const { helmet } = helmetContext;

if (context.url) {
      res.redirect(context.url);
    } else {
      res.status(200).send(
        `<!doctype html>
        <html lang="">
          <head>
            <meta http-equiv="X-UA-Compatible" content="IE=edge" />
            <meta charset="utf-8" />
            ${helmet.title.toString()}
            <meta name="viewport" content="width=device-width, initial-scale=1">
            <link rel="icon" href="/favicon.ico" />
            <link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png" />
            <link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png" />
            <link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png" />
            <link rel="mask-icon" href="/safari-pinned-tab.svg" color="#ff1170" />
            <link
              rel="stylesheet"
              href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css"
            />
            ${
              assets.client.css
                ? `<link rel="stylesheet" href="${assets.client.css}">`
                : ''
            }
            ${
              process.env.NODE_ENV === 'production'
                ? `<script src="${assets.client.js}" defer></script>`
                : `<script src="${assets.client.js}" defer crossorigin></script>`
            }
            <!-- React Helmet -->
            ${helmet.meta.toString()}
          </head>
          <body>
            <div id="root">${markup}</div>
          </body>
        </html>`
      );
    }

Pretty basic stuff and nothing complicated. It still returns Default title and Default description.

0 replies

fivethreeo · 2020-09-22T01:14:40Z

fivethreeo
Sep 22, 2020
Collaborator

It might be you have to render the app twice. Once to update helmet context and once to render the new meta. Server side that is.

0 replies

fivethreeo · 2020-09-22T01:44:42Z

fivethreeo
Sep 22, 2020
Collaborator

Are you sure the server side routes correctly?

0 replies

vferdiansyah · 2020-09-22T02:57:37Z

vferdiansyah
Sep 22, 2020
Author

@fivethreeo the meta tags are already there so it's not a problem of rendering. My question is more on why crawler picked up the default meta tags even though when rendered in the browser it already shown the dynamic meta tags?

0 replies

fivethreeo · 2020-09-22T23:25:22Z

fivethreeo
Sep 22, 2020
Collaborator

If the issue is crawling reading your site wrong this is not a razzle issue. But if you turn off JavaScript an check the source, if that gives the right result the issue is on the other end. If not your setup is wrong. If you made a repo with your code I can spin it up and fix any issues.

0 replies

fivethreeo · 2021-01-25T23:07:43Z

fivethreeo
Jan 25, 2021
Collaborator

The component with helmet probably does some data fecthing to decide props, this does not work server-side.

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Dynamic meta tags #1409

{{title}}

Replies: 7 comments

{{title}}

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

{{title}}

Select a reply

Dynamic meta tags #1409

vferdiansyah Sep 22, 2020

❓Question

Replies: 7 comments

fivethreeo Sep 22, 2020 Collaborator

vferdiansyah Sep 22, 2020 Author

fivethreeo Sep 22, 2020 Collaborator

fivethreeo Sep 22, 2020 Collaborator

vferdiansyah Sep 22, 2020 Author

fivethreeo Sep 22, 2020 Collaborator

fivethreeo Jan 25, 2021 Collaborator

vferdiansyah
Sep 22, 2020

fivethreeo
Sep 22, 2020
Collaborator

vferdiansyah
Sep 22, 2020
Author

fivethreeo
Sep 22, 2020
Collaborator

fivethreeo
Sep 22, 2020
Collaborator

vferdiansyah
Sep 22, 2020
Author

fivethreeo
Sep 22, 2020
Collaborator

fivethreeo
Jan 25, 2021
Collaborator