javascript - React helmet not showing meta tags in view page source but shows in element on inspect - Stack Overflow

admin管理员组

文章数量:1289352

We have this web and we added meta tags in different pages using this way.

<Helmet>
 <title>THIS IS TITLE</title>
 <meta
  name="description" 
  content="THIS IS CONTENT" />
</Helmet>

I see the change in title when I hit the route for this page. I see meta tags in elements but I don't see meta tags of that page in view page source. What's wrong and how can we solve this. As per our seo expert, it should e in view page source.

Note: It is a client side rendered app.

We have this web and we added meta tags in different pages using this way.

<Helmet>
 <title>THIS IS TITLE</title>
 <meta
  name="description" 
  content="THIS IS CONTENT" />
</Helmet>

I see the change in title when I hit the route for this page. I see meta tags in elements but I don't see meta tags of that page in view page source. What's wrong and how can we solve this. As per our seo expert, it should e in view page source.

Note: It is a client side rendered app.

• javascript
• reactjs

Share Improve this question Follow edited Jun 19, 2023 at 16:49 fatihyildizhan 8,83277 gold badges6767 silver badges9191 bronze badges asked Feb 29, 2020 at 16:57 horrible_nerdhorrible_nerd 12511 gold badge44 silver badges1010 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 9

This is because react (and react-helmet) are front-end tools (unless you are doing server side rendering) and the view source browser's feature is showing you the original source downloaded from the server, while the "inspect" action is displaying the actual DOM.

What this means?

Your users will see new meta tags normally, and so Google Bot (as recently started to execute JavaScript) but not other crawling service or search engines.

If you want to target other search engines: do SSR.

you can change meta data in viewsource code also all you need to do is that after the build is pleted change index.html to index.php and add another file called metas.php

in metas.php you can simple write php code like this

<?php
$url =  "https://{$_SERVER['HTTP_HOST']}{$_SERVER['REQUEST_URI']}";
$escaped_url = htmlspecialchars( $url, ENT_QUOTES, 'UTF-8' );


if ($escaped_url === 'https://example.') {
    $pageTitle = 'title';
    $metaDescription = 'some text';
    $canonical ='https://example.';
} 


else if ($escaped_url === 'https://example.') {
    $pageTitle = 'title';
    $metaDescription = 'some text';
    $canonical ='https://example.';
} 
else{
    $pageTitle = '404';
    $metaDescription = 'some text';
    $canonical ='https://example.';

}
?>

and in you index.php include the metas.php file on top and call these variables which is in the metas.php file like this:-

<title><?php echo $pageTitle; ?></title>
<meta name="description" content="<?php echo $metaDescription; ?>" />
<link rel="canonical" href="<?php echo $canonical; ?>">

本文标签：