Feeding Google Search – Structure data

Content is one of the keys to the success on the internet, categorizing your content makes it more visible to the search engines and structure data will be your best friend to do it. This simple action could make you a step forward in the competitive market.  

On 2011, Google, Bing, and Yahoo launched an initiative called Schema.org, this project’s objective is to create and support schemas for structured data. And now this information start to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards. Actually, Google.

Why structure data is important?

Structure data is a powerful tool that allows website developers to classify their content with more meaningful information. With small data placed in a JSON file or across the markup, it is possible to add more technical information about the content displayed.

Now, this information starts to be more relevant to the search engines, Google especially, uses the structure date to shows the content in a special format called Rich cards.

Actually, Google gives to us these options to pages enhancements: 

• Breadcrumbs
• Corporate contact information
• Carousels for sequential results
• Logos
• Sitelinks Search box
• Social profile links

Content types:

• Articles
• Books
• Courses
• Events
• Job postings
• Local businesses
• Music
• Products
• Recipes
• TV and movies
• Videos

Each situation needs some required information, for example, recipes we will need to specify, numbers of calories, ingredients, and time to cook.

Google uses the structure data to display these categories in a different layout in the search result, which helps the users find the right content and increase the click rate for the websites that show the content with more quality.

Ok, what about the code?

There are three different formats, JSON-LD(Recommended by google), Microdata, and RDFa. For a long time, I used Microdata, but now I’m working with other projects again and different markups. The JSON-LD makes the changes simple.

Code examples:

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "Article headline",
  "image": {
    "@type": "ImageObject",
    "url": "https://google.com/thumbnail1.jpg",
    "height": 800,
    "width": 800
  },
  "datePublished": "2015-02-05T08:00:00+08:00",
  "dateModified": "2015-02-05T09:20:00+08:00",
  "author": {
    "@type": "Person",
    "name": "John Doe"
  },
   "publisher": {
    "@type": "Organization",
    "name": "Google",
    "logo": {
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg",
      "width": 600,
      "height": 60
    }
  },
  "description": "A most wonderful article"
}
</script>Code language: HTML, XML (xml)

Microdata

<div itemscope itemtype="http://schema.org/NewsArticle">
  <meta itemscope itemprop="mainEntityOfPage"  itemType="https://schema.org/WebPage" itemid="https://google.com/article"/>
  <h2 itemprop="headline">Article headline</h2>
  <h3 itemprop="author" itemscope itemtype="https://schema.org/Person">
    By <span itemprop="name">John Doe</span>
  </h3>
  <span itemprop="description">A most wonderful article</span>
  <div itemprop="image" itemscope itemtype="https://schema.org/ImageObject">
    <img src="https://google.com/thumbnail1.jpg"/>
    <meta itemprop="url" content="https://google.com/thumbnail1.jpg">
    <meta itemprop="width" content="800">
    <meta itemprop="height" content="800">
  </div>
  <div itemprop="publisher" itemscope itemtype="https://schema.org/Organization">
    <div itemprop="logo" itemscope itemtype="https://schema.org/ImageObject">
      <img src="https://google.com/logo.jpg"/>
      <meta itemprop="url" content="https://google.com/logo.jpg">
      <meta itemprop="width" content="600">
      <meta itemprop="height" content="60">
    </div>
    <meta itemprop="name" content="Google">
  </div>
  <meta itemprop="datePublished" content="2015-02-05T08:00:00+08:00"/>
  <meta itemprop="dateModified" content="2015-02-05T09:20:00+08:00"/>
</div>Code language: HTML, XML (xml)

As we can see above, JSON-LD creates a structure independent of the content. But we need to write the same information twice. Microdata, the advantage is we just need to write the content once, but the information is totally markup-dependent. Especially for articles, we have two different rich cards, one for pages that support AMP and the other for Non-AMP pages.

Search result without AMP

News carousel using structure data

After adding this information to your content, we need to validate it; for that, we use the Structured Data Testing Tool. Recently, the news carousel allowed non-AMP content to be displayed; this was due to technical reasons, with the evolution of web answers.

If you are using WordPress, there are many plugins to use Structure data in your Website: https://wordpress.org/plugins/tags/structured-data/

More posts:

• Wordcamp Dublin 2017
• Back to Dublin