I use this tool to test my structured data:
https://search.google.com/structured-data/testing-tool
This is my page:
https://www.offersprive.eu/it/prod/Black%20Latte/56
If I try to check it, the response is empty
...But if I copy-and-paste my html content, the tool read it correctly
What can I do to read the link content? Is that a problem with React content loading?
Thanks.
I'm having this same issue.
Basically I have a static website (job board) built with React and want the job to show in the Google Job Network.
To do this the web page needs to contain structured data for Google to crawl.
I've tried some npm packages like react-structured-data which does get the data to appear in the header, but the data gets injected AFTER Google runs the scan, so the data does not yet exist for Google and therefore is returning zero results.
I have the same issue when I try using react-helmet.
I have the same issue when I try to append a script with the data to either the header or body upon ComponentDidMount or ComponentWillMount.
It's weird that it shows in the header when I do inspect elements but doesn't show in the header when I view page source.
Maybe one solution is server-side rendering, but there must be another way.
Possible answer
according to this answer, the Google might actually see the data, its just the testing tool doesn't see the data, which is quite a pain in the butt.
https://webmasters.stackexchange.com/questions/91064/structured-data-tool-doesnt-see-javascript-rendered-content
Also, this page:
https://developers.google.com/search/docs/guides/intro-structured-data#structured-data-format
says: Google can read JSON-LD data when it is dynamically injected into the page's contents, such as by JavaScript code or embedded widgets in your content management system.
Another potential solution, but less plausible because it still loads after the fact
Instead of using JSON-LD, use microdata attached to your elements, like if you go here:
https://schema.org/JobPosting
and click example 4, microdata tab
Then perhaps it will know to wait for your elements to load before scanning.
Testing these solutions now. I will update probably tomorrow as I am logging off soon.
UPDATE: I FOUND THE ANSWER
I have tried the above and it appears that the data is valid and Google does see it, it's just Google's Structured Data tool (and also some structured data chrome extensions) don't not see the data. This is because such tools scan the page before the data is loaded in. Other tools, wait until the data is loaded before scanning, and on those tools, it works.
For example: If you inspect your web page and click on the HTML element, and click "edit as html" and copy the entire html of you page, and paste that HTML as code into Google Structured Data tool, you should see that it now finds your data. Hopefully they fix that in the future but for now, you can at least try that to make sure your data is valid.
Another thing is, if you go to the Google Search Console and request the URL in question to be indexed by Google, then wait a day or so for it to process, then check back in on it. You will see that the Google Search Console DID find your data. So Google IS seeing your data, e.g. search console. It's just the broken Structured Data Tool from Google that is not seeing your data. Hopefully it is fixed soon.
For the record, how I was able to get this to work on my React app is by putting my data inside of Component Did Mount. E.g.
`componentDidMount() {
const googleJobNetworkScript = document.createElement("script");
googleJobNetworkScript.type = "application/ld+json";
googleJobNetworkScript.innerHTML = JSON.stringify({
"#context": "http://schema.org",
"#type": "JobPosting",
"baseSalary": "100000",
"jobBenefits": "Medical, Life, Dental",
"datePosted": "2011-10-31",
"description": "Description: ABC Company Inc. seeks a full-time mid-level software engineer to develop in-house tools.",
"educationRequirements": "Bachelor's Degree in Computer Science, Information Systems or related fields of study.",
"employmentType": "Full-time",
"experienceRequirements": "Minumum 3 years experience as a software engineer",
"incentiveCompensation": "Performance-based annual bonus plan, project-completion bonuses",
"industry": "Computer Software",
"jobLocation": {
"#type": "Place",
"address": {
"#type": "PostalAddress",
"addressLocality": "Kirkland",
"addressRegion": "WA"
}
},
"occupationalCategory": "15-1132.00 Software Developers, Application",
"qualifications": "Ability to work in a team environment with members of varying skill levels. Highly motivated. Learns quickly.",
"responsibilities": "Design and write specifications for tools for in-house customers Build tools according to specifications",
"salaryCurrency": "USD",
"skills": "Web application development using Java/J2EE Web application development using Python or familiarity with dynamic programming languages",
"specialCommitments": "VeteranCommit",
"title": "Software Engineer",
"workHours": "40 hours per week"
});
document.head.appendChild(googleJobNetworkScript);
}`
You can also append the child to document.body instead of document.head. Either should work. Your choice.
You could also use react-helmet, or react-structured-data from NPM, which some other people do, but I didn't see the need, since the above seems to work fine.
You can find the other structured data types at schema.org
Remember to either submit a new site map to Google or submit your site to the Google indexing API each time you have a new webpage or webpage with updated content that you would like Google to scan.
This post is long but I hope it covered all the bases and I hope it helps.
Having had a brief look at how your website loads; I believe you are using React Helmet. The issue is with this tool (and vanilla React in general) is that the page must be loaded and javascript run in order for your headers to be set and your content loaded.
Most tools that crawl webpages don't run javascript, Google now does on its main crawler I believe but they don't seem to have updated all their various tools. Facebook, Twitter, Bing etc, I believe it's patchy at best.
The answer is probably either Gatsby or Next.js; both provide ways of rendering your React code on the server or during the build so that all the headers and content are sent when your page is first called. You can write your own server side rendering methods but these solutions provide all that leg work.
This removes the need for a crawler to be running javascript; so you get index properly! For the sake of interest, when I ran into this issue I went for Gatsby.
A quick work around is do what you have your other links / meta tags; write them into the base index.html file. However, this obviously can't be updated per page etc...
Hope that shines some light on it :)
Google Structured Data Tool don't read my React Site content
i think its reading correctly,but not executing the js,that is google data tool use crawler to fetch the page,which is the source code of your page,to see on what content google tool is working ,just open your page and goto view page source,you can see google tool is working on this source,not on what generated by the react.
Is that a problem with React content loading?
this is because react components are rendered after the page load.and your content is not visible to crawler as webcrawler do not execute javascript.
i hope this will clear your doubt.
I would suggest you to have a look at React Helmet package, which can help you manage your <head> and structured data.
I have a dotnet Selenium web driver app.
When I'm testing the page one of the things I need to confirm is that a flash object on the page has pulled correct content from a content store on my site. (i.e. the flash object should be loading content from /stuff/info.txt and including that content within the animation.)
As a human looking at this I can use the chrome network tab and see that /stuff/info.txt has been accessed.
How can I make Selenium execute a similar watch and see the network requests made by a web browser?
I did not wrote this, neither tested it however someone did it here: http://www.softwareishard.com/blog/firebug/automate-page-load-performance-testing-with-firebug-and-selenium/
Basically all the requests are exported via netexport and firebug plugins inside a HAR (Http ARchive file)
Please give us your feedback if you give it a try!
Cheers !
I assume you want to automate the process which the developer tools of browsers does. Something like firebug but for verification using Code.
I don't believe Selenium has such features. For now, you will not be able to achieve this.
I am developing rich frontend apps which will be used by users running IE 8 and above. I am using angular.js as my frontend framework.
I currently see two choices using es5shim or google chrome frame. What I am not able to discern are the differences between both.
As I understand that es5-shim monkey patches the js engine, and is much more lighter as it doesnt require the user to download and install.
What does chrome frame provide over es5-shim, and which is recommended?
Google Chrome Frame is a application, and need user to install it, es5-shim is JavaScript code, you just need to include it.
If you want to use AngularJS in in IE, you should read this: http://docs.angularjs.org/guide/ie. Long in short, include es5-shim(optional but really useful) and JSON polyfill.
I'm looking to have it so that when a user loads our page it checks to see if they're on a mobile device and then it'll redirect them to a mobile version of our site, but keep the original hash tag from the link they followed. I've tried setting the new location with the hash tag in javascript and it works in Chrome but doesn't work in Safari. I've read that this is just something Safari does. Is there any work around to this?
We actually just got a very similar bug report from our customers.
For us the scenario involved a hashtag in the form of #quicklogin/abc123 and only appeared when viewing the site in Safari. This was part of the initial URL that the client would load and it would present them with an alternate login screen. When going directly to the URL in Safari, the browser removed the entire tag and ignored it.
When we changed this to something like #quicklogin/test (or any other hash containing only alpha characters) it worked fine. It also worked fine when loading the site and then manually applying the hash tag in two separate steps.
So our conclusion is that there may be something wrong with hashtags containing numeric values in Safari.
You have to do this either by redirecting with javascript (because javascript can read the hash value) or by conditionally returning different html based on the user agent.
Browsers are supposed to preserve the hash fragment through a 302, but often don't (see 3 year old webkit bug below) and otherwise hash fragments are not sent to the server so they can't be dealt with manually.
https://bugs.webkit.org/show_bug.cgi?id=24175
You should escape '#' symbol and everything would be OK
Over Christmas I implemented some code to open a channel to my App Engine application using the channel API and it was working fine.
I recently returned to the code and find that it is broken, and the problem seems to lie in talkgadget that the client code is trying to load into a frame.
I took a snapshot of the code returned by /_ah/channel/jsapi on December 21 and I am comparing it to today's code.
When the older version tried to get talkgadget.google.com/talkgadget/d?token=[my-token] it was hardcoded to use http. Sensibly enough, the code was later changed to check the page's protocol in document.location and adapt to cases where https is used. The problem now is that when running in a chrome extension it grabs chrome-extension: as the protocol and naturally the channel fails to open in the extension.
Setting the base of the background page to my appspot URL does not change document.location, although I had some vague notion that it should. (Not sure what the standards say.)
Is there a workaround for this? One thought was to create my own iframe loaded from my site, but then it will nest the actual channel iframe, complicating things.
I wonder if Moishe or someone else on the App Engine team could comment on this. It seems like the this is a bug and the code should take into chrome extensions either by testing for the protocol and searching for a base tag as an alternative, or provide some way to configure this through the javascript object.
Yep, this is a bug. There's a fix submitted, and it's in the process of rolling out to production; it'll probably be out in about a week.
In the meantime, your idea of an iframe embedded in the extension should work.