react-static: [Bug] Meta tags are inspectable but not in server side html (View Page Source) therefore not picked up by FB, iOS, Twitter, etc
Issue Overview
When putting OG or twitter content in the <Head></Head> tag FB, twitter and iOS messaging don’t pick up the open graph data. Also, if you “View Page Source” in Chrome the meta data tags are not there in the HTML. If you “Inspect” the page in Chrome the meta data tags are in the head of the page as expected. You can also look at the HTML that is actually being scraped in FB’s sharing debugger and see that the meta data is excluded:
As a test I manually added the tags to the /dist/index.html file and the scrapper found the data as expected.
Currently I’ve tried adding the <Head></Head> meta content to index.js and my App.js file here:
import React, { Component } from 'react'
import { Root, Routes, Head } from 'react-static'
import styles from './app.css'
class App extends Component {
render() {
const emailjs = "(function(){ emailjs.init('user_PR5FTqjzwzbQ55mb8JAL4'); })();"
return (
<div>
<Head>
<meta property="og:title" content="Site Title" />
<meta property="og:url" content="http://some-react-static-website.com" />
<meta property="og:type" content="website" />
<meta property="og:description" content="React Static Website" />
<meta property="og:image" content="http://some-react-static-website/img/OG_thumb.jpg" />
</Head>
<div className={styles.content}>
<Root scrollToTopDuration="350">
<Routes />
</Root>
</div>
</div>
)
}
}
export default App
Here is the output from Chrome dev tools:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/vendors~src-pages-404~src-pages-capacity~src-pages-team~src-pages-index~src-pages-legal~src-~79a23bb9.f27753e7.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/src-pages-404~src-pages-capacity~src-pages-team~src-pages-index~src-pages-legal~src-pages-pr~931e212f.6c34f7b4.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/src-pages-capacity~src-pages-team~src-pages-index~src-pages-problem~src-pages-solution.e6ac0e5a.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/src-pages-index.d760df4b.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/styles.d68e6299.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/vendors~main.80d1d0e7.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/main.77ec8b13.js">
<link rel="preload" as="style" href="http://some-react-static-website.com/styles.d68e6299.css">
<link rel="stylesheet" href="http://some-react-static-website.com/styles.d68e6299.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no">
<meta property="og:title" content="React Static">
<meta property="og:url" content="http://some-react-static-website.com">
<meta property="og:type" content="website">
<meta property="og:description" content="React Static Website">
<meta property="og:image" content="http://some-react-static-website.com/img/OG_thumb.jpg">
</head>
<body>
Here is the output from the FB Share Debugger OR if I just “View Page Source” of the page in Chrome:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/vendors~src-pages-404~src-pages-capacity~src-pages-team~src-pages-index~src-pages-legal~src-~79a23bb9.f27753e7.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/src-pages-404~src-pages-capacity~src-pages-team~src-pages-index~src-pages-legal~src-pages-pr~931e212f.6c34f7b4.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/src-pages-capacity~src-pages-team~src-pages-index~src-pages-problem~src-pages-solution.e6ac0e5a.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/src-pages-index.d760df4b.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/styles.d68e6299.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/templates/vendors~main.80d1d0e7.js">
<link rel="preload" as="script" href="http://some-react-static-website.com/main.77ec8b13.js">
<link rel="preload" as="style" href="http://some-react-static-website.com/styles.d68e6299.css">
<link rel="stylesheet" href="http://some-react-static-website.com/styles.d68e6299.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=5, shrink-to-fit=no">
</head>
<body>
Environment
System:
OS: macOS Sierra 10.12.6
CPU: (8) x64 Intel(R) Core(TM) i7-7920HQ CPU @ 3.10GHz
Memory: 298.44 MB / 16.00 GB
Shell: 3.2.57 - /bin/bash
Binaries:
Node: 9.10.1 - /usr/local/bin/node
Yarn: 1.9.4 - /usr/local/bin/yarn
npm: 5.6.0 - /usr/local/bin/npm
Watchman: 4.7.0 - /usr/local/bin/watchman
Browsers:
Chrome: 72.0.3626.121
Firefox: 65.0.1
Safari: 12.0.3
npmPackages:
react: ^16.6.3 => 16.7.0
react-dom: ^16.6.3 => 16.7.0
react-hot-loader: ^4.3.12 => 4.6.3
react-onclickoutside: ^6.8.0 => 6.8.0
react-recaptcha: ^2.3.10 => 2.3.10
react-static: ^6.3.6 => 6.3.6
styled-components: ^4.1.3
npmGlobalPackages:
react-devtools: 2.5.0
react-native-cli: 2.0.1
Steps to Reproduce the problem
- Add <Head><meta property="og:title" content="React Static Website" /></Head> to App.js file.
- Run yarn build
- Open Google Chrome and browse to the website localhost/~someuser/some-react-static-website/index.html
- Right click on page and select “Inspect”
- Select “Elements” tab.
- Observe: <head> contains og:title provided in step #1
- Right click on page and select “View Page Source”
- Observe: <head> does NOT contain og:title provided in step #1
Expected Behavior
I would expect these two scenarios would both contain the meta tag data.
Reproducible Demo
Sorry I cannot provide the URL but this can be easily tested by adding just one meta property. Let me know if there is more information I can provide.
About this issue
- Original URL
- State: closed
- Created 5 years ago
- Reactions: 4
- Comments: 15 (9 by maintainers)
Commits related to this issue
- let's test meta tags https://github.com/react-static/react-static/issues/1057 — committed to JLarky/webull by JLarky 4 years ago
This is clearly a bug, probably related to Helmet and the extraction of the data from it at build time. The Document component is not the recommended place for dynamic head data regardless, since it is the base template for every page of your site. We’ll need to dig in to find out why <Head> is not working properly.
Oh the woes of static site generation 😉
@VaidotasSm did you ever fnd a solution for this ?
I ended up fixing this twice:
My original Problem was having installed react-helmet 6 beta as there was an issue reported with the latest versions of React: https://github.com/nfl/react-helmet/issues/441
In the hopes of finding the original issue, I used a cut down test project that was working and I upgraded that to 6.3.6, which then broke meta tags without changing any code. Setting it back to every prior react-static version failed to make it work again. Then I tried different versions of node and yarn which did nothing. Updating the React version to ^16.8.1 fixed the test project.
So interestingly enough, our sites are getting exported head data just fine using the <Head> component. It’s going to take a bit more work to figure out the differences of this reproduction case vs our existing sites that are functioning as expected.