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.
Incorporating schema markup into HTML code plays a crucial role in enhancing your search engine visibility and them understanding what's on your website.
Three prominent languages of code—JSON-LD, microdata, and RDFa—serve as vehicles for conveying essential information about webpage content to search engines.
JSON-LD, known for its simplicity and flexibility, allows developers to seamlessly embed structured data within HTML documents using a separate script block. Microdata, on the other hand, involves adding specific HTML attributes to mark up content, providing search engines with context about the data presented on the webpage. Lastly, RDFa (Resource Description Framework in Attributes) integrates within HTML elements to annotate webpage content, offering a standardized approach to expressing structured data.
By leveraging these languages of code, web developers can empower search engines to better understand and index webpage content, ultimately improving the visibility and relevance of their websites in search engine results.
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.
You've all seen the recipes on Google and how much space they take up! Well this is why.
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>Rounding up, when it comes to incorporating structured data markup into HTML code for improved search engine visibility, JSON-LD, microdata, and RDFa each offer unique advantages. JSON-LD stands out for its simplicity and flexibility, allowing developers to embed structured data seamlessly using a separate script block.
Microdata offers a straightforward approach by adding specific HTML attributes to mark up content directly within the document. Meanwhile, RDFa integrates within HTML elements to annotate webpage content, providing a standardized method for expressing structured data.
While all three languages serve the same purpose of conveying information to search engines, JSON-LD is often preferred for its ease of implementation and clarity. However, the choice ultimately depends on individual preferences and project requirements.
This has been a brief introduction into Schema, about what sort of Schema exists and what it does. If you are confused, it’s like anything in life, It just takes practice. You can head over to our free schema markup generator and try it for yourself.
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.
