Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

[Bug] Meta tags are inspectable but not in server side html (View Page Source) therefore not picked up by FB, iOS, Twitter, etc

See original GitHub issue

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:

https://developers.facebook.com/tools/debug/echo/?q=http%3A%2F%2Fwww.some-react-static-website.com%2F

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.

Issue Analytics

State:
Created 5 years ago
Reactions:4
Comments:15 (9 by maintainers)

Top GitHub Comments

3reactions

tannerlinsleycommented, Mar 7, 2019

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 😉

1reaction

theosenoussaouicommented, Sep 28, 2022

@VaidotasSm did you ever fnd a solution for this ?