Schema markup, also known as structured data or schema.org markup, is a code that you can add to your website to provide search engines with more information about the content on your pages that have three main types. It helps search engines understand the context of your content, which can lead to enhanced search results, known as rich snippets.
Schema markup uses a semantic vocabulary of tags (or microdata) that you add to your HTML. These tags define specific types of information, such as events, reviews, products, organizations, and more. These tags provide a structured way for search engines to interpret and display your content more informally.
For instance, in the above image, you can see schema markup for the recipe “Chicken Fajita”, search engines display additional details such as the cooking time, ingredients, and ratings directly in the search results. This can make your result more attractive and informative to users, potentially increasing click-through rates.
The initiative to create a standardized schema began when leading search engines, including Google, Yahoo, Bing, and Yandex, collaborated to form Schema.org in 2011. Recognizing the importance of structured data for enhancing search engine understanding of web content, these key players in the online search industry collectively contributed to the development of a unified schema.
In this article we’re going to cover:
- Why schema markup is important for SEO
- Types of Schema Markup
- Three methods for conveying schema markup information are:
- How to add your own schema markup to your website
Let’s get the ball rolling!
Why Schema Markup is Vital for SEO?
Schema markup is crucial for SEO as it enhances search engine results by providing structured data that improves understanding of webpage content. This leads to creating rich snippets, making listings more visually appealing and informative, ultimately boosting click-through rates.
The structured data not only aids in relevance assessment by search engines but also supports voice search optimization, which is particularly important in the era of voice-enabled devices. For businesses with physical locations, schema markup contributes to local SEO by offering detailed information about the company.
Moreover, by adopting schema markup, websites can future-proof their SEO strategies, aligning with evolving search engine algorithms and ensuring long-term success in search rankings.
Types of Schema Markup
There are many types of schema markup types available, with Google supporting 35. However, it’s optional to incorporate every type on your website.
Instead, focus on selectively implementing the schema markup that aligns with and enhances the relevance of your specific content. By strategically choosing the most pertinent types of schema markup, you can optimize your website for improved search engine visibility without overwhelming it with unnecessary markup.
Some common types of schema markup include:
Schema Person Markup
It allows webmasters to present details about a person in a standardized format that search engines can easily understand. This types of schema markup includes key information such as the person’s name, job title, company affiliation, address, contact details, and social media profiles.
Implementing Schema Person Markup helps search engines better comprehend and index individual profiles and enhances the display of this information in search results.
Organizations
The Organization schema markup is essential for providing structured information about a company or entity. This markup typically includes details such as the organization’s name, logo, contact information, and links to its social media profiles. By implementing this schema, web developers can enhance the visibility of such information, making it more accessible to search engines and ultimately improving the organization’s online presence.
Local Business
Tailored for businesses with physical locations, the Local Business schema markup is crucial for displaying key details like the business address, phone number, operating hours, and accepted payment methods. This structured data not only helps search engines understand and categorize local businesses more effectively but also provides users with quick access to essential information when searching for or interacting with a business in their vicinity.
Article
The Article schema markup is designed to enhance the presentation of news articles, blog posts, and other editorial content on the web. Including information such as the headline, publication date, and author details, this markup helps search engines better comprehend the context and relevance of the content. Implementing the Article types of schema markup contributes to improved search result snippets and a more engaging user experience.
Product
For e-commerce websites, the Product schema markup is invaluable. It allows for the structured presentation of product-related information, such as product name, description, price, and availability. By incorporating this types of schema markup, online retailers can provide search engines with clear and organized data about their products, potentially leading to more accurate and appealing search results for potential customers.
These are just a few examples, and there are many more types of schema markup available to cover a wide range of content types and structures. Webmasters can choose and implement the relevant schema markup based on the nature of their content to enhance search engine visibility and improve the presentation of search results.
Three Methods for Conveying Schema Markup
Three methods for conveying any types of schema markup schema markup information are:
JSON-LD (JavaScript Object Notation for Linked Data):
JSON-LD, as the name expresses, is a popular and recommended format for expressing schema markup in the javascript way. This method involves including a script tag with JSON-LD syntax in the head of a webpage. JSON-LD provides a clear and concise way to represent structured data, making it easier for both humans and machines to comprehend. Nowadays, JSON-LD is the widely adopted choice for schema markup on most websites, given that it is the preferred method recommended by Google.
Here’s a demo example of JSON-LD for a hypothetical Recipe:
| <script type=”application/ld+json”>{ “@context”: “http://schema.org”, “@type”: “Recipe”, “name”: “Spaghetti Bolognese”, “author”: { “@type”: “Person”, “name”: “Alice Chef” }, “datePublished”: “2024-01-15”, “image”: “spaghetti_bolognese.jpg”, “description”: “A classic recipe for delicious spaghetti bolognese.”, “recipeIngredient”: [ “1 pound ground beef”, “1 onion, diced”, “2 cloves garlic, minced”, “1 can (28 ounces) crushed tomatoes”, “1/4 cup tomato paste”, “2 teaspoons dried oregano”, “1 teaspoon dried basil”, “Salt and pepper to taste”, “8 ounces spaghetti” ], “recipeInstructions”: [ “In a large skillet, brown the ground beef over medium heat.”, “Add diced onions and minced garlic; sauté until onions are translucent.”, “Stir in crushed tomatoes, tomato paste, oregano, basil, salt, and pepper.”, “Simmer for 20 minutes, stirring occasionally.”, “Meanwhile, cook the spaghetti according to package instructions.”, “Serve the bolognese sauce over cooked spaghetti. Enjoy!” ]}</script> |
In this example, the JSON-LD markup provides structured data about a recipe for spaghetti bolognese. The @context specifies the schema.org vocabulary, and various properties like name, author, datePublished, image, description, recipeIngredient, and recipeInstructions provide detailed information about the recipe. JSON-LD’s clear and human-readable syntax makes it easy for developers to implement and for search engines to understand.
Microdata Attributes:
Another method for implementing schema markup is by utilizing microdata attributes directly within the HTML tags that encapsulate the relevant content. Microdata involves adding specific attributes, such as itemtype, itemprop, and itemscope, to HTML elements to signify the structured data. This approach allows developers to associate semantic meaning with the content, aiding search engines in understanding the context and relationships within the webpage’s information.
Here’s an example of microdata for a movie:
| <html><head><title>The Adventure Quest</title></head><body><div itemscope itemtype=”http://schema.org/Movie”><h1 itemprop=”name”>The Adventure Quest</h1><img itemprop=”image” src=”adventure_quest_poster.jpg” alt=”movie poster”><p>Directed by: <span itemprop=”director”>Jane Filmmaker</span></p><p>Starring: <span itemprop=”actor”>Alex Star</span>, <span itemprop=”actor”>Emily Explorer</span>, <span itemprop=”actor”>Chris Adventurer</span></p><p>Genre: <span itemprop=”genre”>Adventure</span></p><p>Release Date: <time itemprop=”datePublished” datetime=”2023-07-21″>July 21, 2023</time></p></div></body></html> |
In this example, the microdata is utilized to describe information about a movie titled “The Adventure Quest.” The <div> element marks the scope of the “Movie” schema, and the itemprop attributes label specific details such as the movie’s name, poster image, director, cast, genre, and release date. While microdata is clear and understandable for those familiar with HTML, it’s worth noting that, as mentioned, it can result in longer code compared to alternatives like JSON-LD.
RDFa
RDFa, or Resource Description Framework in Attributes, is a coding method used to embed structured data within HTML documents same like microdata, providing a way to communicate schema markup to Google. RDFa achieves this by adding attributes directly to HTML elements, indicating relationships and properties of the content. While less common than JSON-LD and microdata, RDFa can be a suitable choice for developers who are already familiar with RDF concepts. By employing RDFa, websites can enhance the machine-readable presentation of their content for improved search engine understanding.
Here’s an example of RDFa for an Event:
| <html><head><title>The Grand Gala</title></head><body><div vocab=”http://schema.org/” typeof=”Event”><h1 property=”name”>The Grand Gala</h1><img property=”image” src=”grand_gala_poster.jpg” alt=”event poster”><p>Hosted by: <span property=”organizer” typeof=”Organization”>Spark Events</span></p><p>Date: <time property=”startDate” datetime=”2023-12-15″>December 15, 2023</time></p><p>Location: <span property=”location” typeof=”Place”>Magnificent Hall</span></p><p>Description: <span property=”description”>A spectacular evening of music, dance, and celebration.</span></p></div></body></html> |
In this example, RDFa is used to describe details about an event titled “The Grand Gala.” The <div> element signifies the scope of the “Event” schema, and the property attributes label specific information such as the event’s name, poster image, organizer (linked to the “Organization” schema), start date, location (linked to the “Place” schema), and a brief description.
Implementation of Schema Markup to Your Site
Implementing any types of schema markup on your website is a valuable step to enhance search engine understanding of your content. Here’s a step-by-step guide on how to add schema markup to your site, and the difficulty depends on your familiarity with HTML and the complexity of the schema you want to implement:
Step 1: Access Google’s Structured Data Markup Helper Tool
Visit the Structured Data Markup Helper Tool on the Google Search Console website.
Step 2: Choose a Data Type
Select the type of data you want to mark up, such as Articles, Local Businesses, Events, Products, or any other relevant category.
Step 3: Enter the URL
Enter the URL of the webpage you want to mark up or paste the HTML code directly.
Step 4: Start Tagging Data
Google will load your webpage, and you’ll see two panels. On the left, you’ll see the webpage, and on the right, you’ll see a list of data types.
Highlight and tag the relevant data on your webpage. For example, select the title, date, author, etc., and choose the corresponding data type. I highlighted the page’s title and want to choose the name property. You will again highlight as many properties as you want.
Step 5: Create HTML
Once you’ve tagged the necessary data, click on the “Create HTML” button. Google’s tool will generate the HTML code with the schema markup.
Step 6: Add Markup to Your Website
- Copy the generated HTML code from in the JSON format or microdata in which you want.
- Open your website’s HTML file or content management system (CMS).
- Paste the code in the appropriate section, typically within the <head> or <body> tags.
Step 7: Validate the Markup
After adding the schema markup, it’s essential to validate it. Use Google’s Structured Data Testing Tool to check for any errors or issues.
Step 8: Submit to Google
Once you’ve validated the markup, submit your updated webpage to Google for re-crawling. You can use the Google Search Console for this purpose.
Final Verdict
Incorporating any types of schema markup on your website is a valuable practice that can significantly enhance its performance in search engine results. Google’s Structured Data Markup Helper Tool serves as an accessible and user-friendly resource, allowing even those with limited technical expertise to implement schema markup effectively.
By following the step-by-step guide provided, website owners can enrich their content with structured data, providing search engines with a clearer understanding of the information presented.