Script not showing up in page source

Hi,

I'm new to this, so maybe I'm missing something... I'm under the impression that the point of this library is to be able to insert JSON-LD in any functional component, and also be readable by Google Rich Results (that apparently will replace GDT).

I have inserted this sample in my functional component, displayed when I'm at localhost:3000/integrations (redirection handled via React Router. This is a single JSON-LD object, but eventually there will be a loop to create multiple ones with variables. The "name" property already has a variable as it's value, as you can see below.

return (
        <div>
            <JsonLd<Person>
                item={{
                    "@context": "https://schema.org",
                    "@type": "Person",
                    "address": {
                        "@type": "PostalAddress",
                        "addressLocality": "Colorado Springs",
                        "addressRegion": "CO",
                        "postalCode": "80840",
                        "streetAddress": "100 Main Street"
                    },
                    "colleague": [
                        "http://www.example.com/JohnColleague.html",
                        "http://www.example.com/JameColleague.html"
                    ],
                    "email": "info@example.com",
                    "image": "janedoe.jpg",
                    "jobTitle": "Research Assistant",
                    "name": name,
                    "alumniOf": "Dartmouth",
                    "birthPlace": "Philadelphia, PA",
                    "birthDate": "1979-10-12",
                    "height": "72 inches",
                    "gender": "female",
                    "memberOf": "Republican Party",
                    "nationality": "Albanian",
                    "telephone": "(123) 456-6789",
                    "url": "http://www.example.com",
                        "sameAs" : [ "https://www.facebook.com/",
                                    "https://www.linkedin.com/",
                                    "http://twitter.com/",
                                    "http://instagram.com/",
                                    "https://plus.google.com/"]
                }}
            />
        </div>
)

However, when I check the page source, I only get the contents of my index.tsx which is the standard React prebuilt code with the root div where the App component goes. My question is this: Where do the inserted scripts go when I use the JSONLd component? Because when I go run them in the validator, they are not found.

Thank you!

Hey! Happy to help. You're right about the purpose of this library, by the way :)

How are you checking your page source? I'm confused that you're seeing the context of your "index.tsx" anywhere, so a few things:

In Chrome, if you right-click your page and click "View Source" , this load whatever your test server returns initially to the server. If you have no server-side rendering, this would probably be an empty body and a reference to you components.
If you open "Sources" in the Dev Tools window that will also show you the input files used (browsers would try to use source maps to show you your .tsx code if it could, but othewise it's whatever compiled .js stuff got loaded)

It sounds to me like you're doing one of the above two steps and hoping to see a <script> tag? If so, that won't work. If you instead try to Inspect the element and navigate to your <div>, you should see a <script> under it. Are you saying that isn't happening?

Google documentation states that client-side rendered JSON-LD will typically be accepted.

Thanks for the quick reply Eyas. When I right click anywhere in my React App and click View Page Source, the source I'm shown is the content of index.tsx because, I assume, of the SPA nature of the framework. There is only one page to display.

What you mention is true, if I'm on the page where I render the JSON-LD, if I open the Dev Tools, select the Elements tab and scroll through the head tag, I see my script.

However, I was under the impression that adding this JSON-LD with the library would send the script tag to the head tag in index.tsx to make sure it was seen first. From what you're telling me, it does not.

But then, the issue comes up when I put the URL (xxx.ngrok.io:3000 redirecting to localhost:3000) in the Google Rich Results. The only page that is crawled in the index.tsx, the only page of the SPA, even if I use React-Router. There's a lot of info here, and I'm trying to narrow it down...

Any ideas...?

Hmm there's a few things going on here:

To have the <script> tag end up in the header, you'll have to actually put it there. One way to do that is to use a library like Helmet. If you're using Next.js they also have a Head component that allows this. Note that react-schemaorg has a specific way to use with these headers.
Yes, it is expected that the static source of the page does not include the result of what your JavaScript React code will render, since this is dynamically rendered on page. This includes react-schemaorg which is just another React library. As discussed, most search engines will actually run JS, so you're fine there. If you want a different behavior here you'll need to look into server-side (or mixed) rendering, but you don't need to for structured data to work.
AFAICT the Google Rich Results only crawls and analyzes the URL you give it. Presumably when nevagiating to localhost:3000/ you only see one page, so that's the page Google Rich Results will analyze. If you need it to analyze another page, make sure to pass it that URL. Remember that React Router only runs dynamically on the client, so you'll need to make sure your server forwards all those requests to your index.tsx
I'd also recommend the Google Structured Data Testing Tool

google / react-schemaorg

Script not showing up in page source #28