Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Script not showing up in page source #28

Open
aLx450 opened this issue Oct 7, 2020 · 3 comments
Open

Script not showing up in page source #28

aLx450 opened this issue Oct 7, 2020 · 3 comments

Comments

@aLx450
Copy link

aLx450 commented Oct 7, 2020

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!

@Eyas
Copy link
Collaborator

Eyas commented Oct 7, 2020

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.

@aLx450
Copy link
Author

aLx450 commented Oct 8, 2020

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...?

@Eyas
Copy link
Collaborator

Eyas commented Oct 8, 2020

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants