What is Schema Markup
In short, schema markup is a code in the form of structured data that communicates what your website pages are about, to the search engines in a language, they can understand.
There are three languages of code that you can add to your HTML to tell search engines what exactly is on your webpage JSON-LD, microdata, and RDFa.
For example, recipe schema markup, tells Google that a piece of content on a webpage is a step-by-step guide to making a recipe. Google can then give searchers a preview of each step within the search results page from reading the code in the example below.
JSON-LD (JavaScript Object Notation for Linked Data)
<script type="application/ld+json">
{
"@context": "https://schema.org",
"@type": "Recipe",
"author": "Jayne Smyth",
"cookTime": "PT1H",
"datePublished": "2023-05-08",
"description": "This classic banana bread recipe comes from my grandmother. The walnuts add a nice texture and flavour to the banana bread, but can be left out or replaced if you are allergic",
"image": "bananabread.jpg",
"recipeIngredient": [
"3 or 4 ripe bananas, smashed",
"1 egg",
"3/4 cup of sugar"
],
"interactionStatistic": {
"@type": "InteractionCounter",
"interactionType": "https://schema.org/Comment",
"userInteractionCount": "140"
},
"name": "Very SpecialBanana Bread",
"nutrition": {
"@type": "NutritionInformation",
"calories": "1004 kilojoules",
"fatContent": "9 grams fat"
},
"prepTime": "PT15M",
"recipeInstructions": "Preheat the oven to 200 degrees celcius. Mix in the ingredients in a bowl. Add the flour last. Pour the mixture into a loaf pan and bake for one hour.",
"recipeYield": "1 loaf",
"suitableForDiet": "https://schema.org/LowFatDiet"
}
</script>JSON-LD is perhaps the structured encoding system that’s most used by site developers. It’s a little bit easier to use since all the schema vocabulary used for JSON-LD can be placed within your HTML code’s <script> tags rather than scattered throughout your website code (HTML). This helps with organisation and accuracy of your website’s information and is a big reason why both Schema.org and Google are endorsing it as the structured data of choice.
Another benefit is that Google can read any JSON-LD you happen to have embedded within any of your page’s JavaScript or widgets. It is recommended to be place in the head of your code. See our Free Local Business Schema Generator and the Free Article or Post Schema Generator
Microdata
The outcome of Microdata is pretty much the same as JSON-LD but is formatted differently.
The following example is telling search engines about a free restaurant.
<div itemscope itemtype="https://schema.org/Restaurant">
<span itemprop="name">FreeFood</span>
<div itemprop="aggregateRating" itemscope itemtype="https://schema.org/AggregateRating">
<span itemprop="ratingValue">5</span> stars -
based on <span itemprop="reviewCount">20</span> reviews
</div>
<div itemprop="address" itemscope itemtype="https://schema.org/PostalAddress">
<span itemprop="streetAddress">21 Pretty Road</span>
<span itemprop="addressLocality">Sunnyville</span>,
<span itemprop="addressRegion"></span>AU<span itemprop="postalCode">1000</span>
</div>
<span itemprop="telephone">(61) 000-000-000</span>
<a itemprop="url" href="http://www.freefood.com">www.freefood.com</a>
Hours:
<meta itemprop="openingHours" content="Mo-Sa 11:00-14:30">Mon-Sat 11am - 2:30pm
<meta itemprop="openingHours" content="Mo-Th 17:00-21:30">Mon-Thu 5pm - 9:30pm
<meta itemprop="openingHours" content="Fr-Sa 17:00-22:00">Fri-Sat 5pm - 10:00pm
Categories:
<span itemprop="servesCuisine">
Pub Food
</span>,
<span itemprop="servesCuisine">
Snacks
</span>
Price Range: <span itemprop="priceRange">$$</span>
Takes Reservations: Yes
</div>The code needs to be embedded into a webpage’s body HTML, which means it’s less beginner friendly to add, especially with WordPress. It’s also difficult to use at scale for larger websites.
RDFa (Resource Descriptive Framework in Attributes)
RDFa is similar to microdata in that you add it to your page’s code through HTML tags + attributes.
However, it’s a bit older and more complex. The benefit is that it can be easier to integrate it with other apps or platforms that also use it.
<div vocab="https://schema.org/" typeof="Movie">
<h1 property="name">Pirates of the Carribean: On Stranger Tides (2011)</h1>
<span property="description">Jack Sparrow and Barbossa embark on a quest to
find the elusive fountain of youth, only to discover that Blackbeard and
his daughter are after it too.</span>
Director:
<div property="director" typeof="Person">
<span property="name">Rob Marshall</span>
</div>
Writers:
<div property="author" typeof="Person">
<span property="name">Ted Elliott</span>
</div>
<div property="author" typeof="Person">
<span property="name">Terry Rossio</span>
</div>
, and 7 more credits
Stars:
<div property="actor" typeof="Person">
<span property="name">Johnny Depp</span>,
</div>
<div property="actor" typeof="Person">
<span property="name">Penelope Cruz</span>,
</div>
<div property="actor" typeof="Person">
<span property="name">Ian McShane</span>
</div>
<div property="aggregateRating" typeof="AggregateRating">
<span property="ratingValue">8</span>/<span property="bestRating">10</span> stars from
<span property="ratingCount">200</span> users.
Reviews: <span property="reviewCount">50</span>.
</div>
</div>OK. This has been a brief introduction into Schema, what sort of Schema exists and what it does. If you are confused, it’s like anything in life. It just takes practice.
If you realise it’s not for you but you recognise it is important for your website, contact Web Honey Digital, we’ll look after you.