Schema.org is a system developed by Google, Microsoft, Yahoo, and Yandex to give search engines the ability to easily understand our sites.
We provide information about our sites in the form of standardized schemas.
Because the schemas are standard, search engines are able to easily parse the schemas in order to learn about our site.
What's more, these schemas are how search engines are able to provide rich snippets in search engine result pages.
I do not guarantee that your content will show up in Google as rich snippets
if you follow these steps. I'm not in control of Google's search engine algorithms. 🙃
But adding schema markup will surely get you closer by providing Google and
other search engines with the information they need to create those rich snippets.
Schema.org offers several formats to write our schemas including
Google recommends JSON-LD so that is what we are going to focus on here.
Let's learn how to apply schema markup to our site with an example—we will add schema markup for blog posts. Our examples will be in React, but you should be able to follow along with whatever technology you're using to develop your site.
Let's get started.
First thing, let's head over to the Schema Markup Generator.
I want to create the markup for a blog post so I will select Article.
At this point, we see the boilerplate markup generated.
I recommend going through and filling out this form especially for all the fields with dropdown menus since those are standardized values that search engines expect.
Some of the other fields, like Headline, we will probably set in code with a variable so I will just enter a placeholder value for now.
I'll try not to make too many assumptions about how you're sourcing data in your application, but you might want to set most of these fields dynamically with variables.
I'll leave it up to you and your application's needs to determine which fields should be set dynamically and which should be static.
Now that we have our schema ready, we can inject it into the
<head> of our
The way I like to do this is with an
SEO component. The
SEO component is
where I put everything that goes in the
<head> including things like
<meta> tags, and now—our schema markup.
Check out Gatsby's docs to see an example of an
SEOcomponent if you've never written one before.
We pass our schema object into the
SEO component as follows.
Then, inside of our
This is the format search engine crawlers expect.
Also note, since we are coding this up in React, we are using the
react-helmet library to handle injecting
elements into the
<head> of our application.
And that's pretty much all there is to it to get you started using schema markup in your web apps!
Now we can head over to Google's Structured Data Testing Tool to make sure everything is working.
As we can see, there are 0 errors and 0 warnings so everything looks good to go. 👍