Before we begin, you will need to set up a Google Console account (previously called Google Webmaster Tools), and verify your website. To do this please follow this link.

You will also need a Gmail address.

To verify your website, you can use many methods, such as your Google Analytics account, your domain provider or meta tag etc. I typically just use my Google Analytics account to verify.

Next, you should add both versions of your website, such as https://mirrorcommunications.com and https://www.mirrorcommunications.com, so you can tell Google which version you prefer. Mine is the www version, as I re-direct https to www.

Google Console Example

So what are the benefits of a Google Console Account?

Having your site verified will allow you to see site metrics, such as visitor usage - similar to Google Analytics or Google Tag Manager. It will also display the health of your website, and let you know what pages have been indexed by Google.

You will also be able to see your HTML errors, broken pages, and backlinks to your website. Most importantly, you will receive messages from Google regarding any issues with your website, such as malware or hacking warnings.

If you are hacked, or your site is de-listed, A Google Console account is the best way to get your site back up and running.

So what is Structured Data?

Structured data is additional markup you can add to your pages to display information, such as your social links, your contact information, your blog posts, or videos in a search result. This is in addition to your regular SEO markup, such as title tags, meta descriptions etc.

Structured data is a great way to get more clicks to your website and improve the look and feel of your brand in search results.

Here’s an example:

Structured Data Example - Breadcrumbs

This example above shows you how to add breadcrumbs to a search result, however, there are many more options which can be found here. (Examples include: a site link search box, corporate contact information, logos, social profiles, carousels, and videos etc.)

To learn more about structured data, please click here.

Alright, let’s add some Structured Data to your website

On our website, we have added our organizational information, logo and social links. We have also added our blog posts, as you can see from the image below.

Structured Data example inside the Google Search Console

To add our organizational information, we simply placed this code inside of our Application file:

Application.html.erb

<head>
<!-- Structured Data -->
 <script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "Organization",
  "url": "https://www.mirrorcommunications.com",
  "logo": "https://s3.amazonaws.com/mirrorco/site/img/logos/logo.png",
  "sameAs": [
    "http://www.facebook.com/mirrorcomm",
    "http://www.youtube.com/channel/UCXribSNT_9txMP3r76_kXxw",
    "https://www.linkedin.com/company/mirror-communications-canada",
    "http://twitter.com/Mirrorcomm"
  ]
}
</script>
<!-- End Structured Data -->
</head>

As far as we know it doesn’t matter if the code is placed inside the head section or not, but since it’s being displayed on every page, we decided to place it inside the head section. To find Google’s example for this, please click here, and click on "read the guide" for each section.

Now let’s add structured data to display our blog posts in search results

To view the Google guide for adding structured data for articles/blog posts, please click here.

Please note that there are slight differences if you are not using AMP (Accelerated Mobile Pages - https://www.ampproject.org). Basically, if you are not using AMP, some of the attributes are ignored.

We are not using AMP on our website, therefore as you will see from the code below, we have left off some of the tags.

Google Articles Example:

<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", # Ignored on non-amp pages
  "dateModified": "2015-02-05T09:20:00+08:00", # Ignored on non-amp pages
  "author": { # Ignored on non-amp pages
    "@type": "Person",
    "name": "John Doe" # Ignored on non-amp pages
  },
   "publisher": {    # Ignored on non-amp pages
    "@type": "Organization",
    "name": "Google",
    "logo": { # Ignored on non-amp pages
      "@type": "ImageObject",
      "url": "https://google.com/logo.jpg", # Ignored on non-amp pages
      "width": 600, # Ignored on non-amp pages
      "height": 60 # Ignored on non-amp pages
    }
  },
  "description": "A most wonderful article" # Ignored on non-amp pages
}
</script>

Our posts/show.html.erb file

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "NewsArticle",
  "mainEntityOfPage": {
    "@type": "WebPage",
    "@id": "https://google.com/article"
  },
  "headline": "<%= @post.title %>",
  "image": {
    "@type": "ImageObject",
    <% if @post.img.present? %>
    "url": "<%= @post.img.url %>",
    <% elsif @post.videothumb.present? %>
    "url": "<%= @post.videothumb %>",
    <% else %>
    <% end %>
    "height": 500,
    "width": 700
  }
}
</script>

And that’s it, please feel free to leave a comment if you have any questions!