React-helmet: Structured Data is not displaying

[aravind12345]

Hi i have tried the following code.
But its not working

import React, { PropTypes } from 'react'; import Helmet from 'react-helmet'; const StructuredDataComponent = (props) => { console.log(props.type); console.log('StructuredDataComponentLog'); return ( <div> <Helmet script={[{ 'type': 'application/ld+json', 'innerHTML': `{ '@context': 'http://schema.org', '@type': 'NewsArticle' }` }]} /> </div> ); }; StructuredDataComponent.propTypes = { type: PropTypes.string.isRequired, }; export default StructuredDataComponent;

[potench]

Appears that you are missing the url parameter?

innerHTML: `{
        '@context': 'http://schema.org',
        '@type': 'NewsArticle',
        'url': 'http://whereisyourarticle?'
}`

Here's the test-suite for this feature: https://github.com/nfl/react-helmet/blob/master/src/test/HelmetTest.js#L1233-L1253

[doctyper]

Closing for now, @aravind12345 let us know if this is still an issue.

[lolobosse]

Hello there, I'm running in the same issue with server side rendering but the case is slightly more complex for me:

<Helmet
        title={title}
        meta={[
          { name: 'keywords', content: genKeywords(title, description, company) },
          { property: 'og:title', content: title },
          { property: 'og:type', content: 'website' },
          { property: 'og:image', content: picture_url || categoryImage || 'http://jobninja.eu/assets/img/freeze/banner.jpg' },
          { property: 'og:description', content: description },
          { property: 'og:url', content: `${SITE_URL}/jobs/${id}` },
          { name: 'description', content: description },
          { name: 'bullshit', content: JSON.stringify({
            '@context': 'http://schema.org',
            '@type': 'JobPosting',
            datePosted: created_at,
            employmentType: 'Vollzeit',
            jobLocation: {
              '@type': 'Place',
              address: {
                '@type': 'PostalAddress',
                addressLocality: location ? location.city : location,
                addressRegion: 'DE'
              }
            },
            occupationalCategory: category,
            description: description,
            title: title,
            url: `${SITE_URL}/jobs/${id}`
          })}
        ]}
        link={[
          { rel: 'canonical', href: `${SITE_URL}/jobs/${id}` }
        ]}
        script={[{
          type: 'application/ld+json',
          innerHTML: JSON.stringify({
            '@context': 'http://schema.org',
            '@type': 'JobPosting',
            datePosted: created_at,
            employmentType: 'Vollzeit',
            jobLocation: {
              '@type': 'Place',
              address: {
                '@type': 'PostalAddress',
                addressLocality: location ? location.city : location,
                addressRegion: 'DE'
              }
            },
            occupationalCategory: category,
            description: description,
            title: title,
            url: `${SITE_URL}/jobs/${id}`
          })
        }]}
      />

And the issue is the following:

• I see every item when I render this helmet to a browser (meaning that the code works)
• When I call the source page, I get:

<meta data-react-helmet="true" name="keywords" content="My Super keywords"/>
<meta data-react-helmet="true" property="og:title" content="My Super title"/>
<meta data-react-helmet="true" property="og:type" content="website"/>
<meta data-react-helmet="true" property="og:image" content="http://3w6kx9401skz1bup4i1gs9ne.wpengine.netdna-cdn.com/wp-content/uploads/2016/09/telegraph-1.jpg"/>
<meta data-react-helmet="true" property="og:description" content="My super description"/>
<meta data-react-helmet="true" property="og:url" content="https://dev.jobninja.com/jobs/416"/>
<meta data-react-helmet="true" name="description" content="My super description"/>
<meta data-react-helmet="true" name="bullshit" content="The json+ld that expect is ok and rendered but only in meta"/>
<title data-react-helmet="true">My title</title>
<link data-react-helmet="true" rel="canonical" href="https://dev.jobninja.com/jobs/416"/>
<!-- BUT NO SCRIPT!! -->

However, in a normal browser, after I loaded the page I get this script element.

Therefore, I think that I'm missing something but cannot figure out what.

Btw my server side code looks like this:

const renderHTML = (markup, store) => {
  const head = Helmet.rewind();
  const html = ReactDOM.renderToStaticMarkup(
    <Html
      head={head}
      markup={markup}
      store={store}
    />
  );
  return `<!doctype html>\n${html}`;
};

[enapupe]

I'm having the same issue, cannot get the script tag to render via SSR.

[enapupe]

Nevermind, I forgot to call head.script.toString() on my base template.