Adding Schema Markup To Our App

One simple step to help boost your application is to add schema markup. This is one form of microdata that helps search engines understand and categorize your pages. While they may not boost your SEO, they do make your pages appear more prominently in SERPs (search engine results pages). Fortunately for us, it is very easy to add this data using Rails.

Side note: There are many different types of items you can post schema markup for, including breadcrumbs, events, recipes, and so forth. Here, we will be focusing on markup specifically for articles.

Here's how!

This page actually gives us the basic format:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "",
    "description": "",
    "datePublished": "",
    "dateModified": "",
    "image": [],
    "author": []
  }
</script>

Some of these fields are exactly what they look like: you just insert a string and you're good. But, look closely. Those empty arrays for image and author can be a little misleading. The image array accepts a string with the URL directly to an image. This can be the header image you are using for your article, or you might have a variant specifically optimized for search engine results pages. The author array, however, actually wants a hash of related data, as you will see below.

You can also provide the page's URL, which will be used when displaying your data in search results.

We can provide all of this content by placing a script tag in either the <HEAD> or <BODY> tags of our HTML. The easiest way is to simply place a script block on the show page and dynamically insert your data via embedded Ruby, like this:

<script type="application/ld+json">
  {
    "@context": "https://schema.org",
    "@type": "Article",
    "headline": "<%= @article.title %>",
    "description": "<%= @article.description %>",
    "datePublished": "<%= @article.published_at %>",
    "dateModified": "<%= @article.updated_at %>",
    "image": [
      "<%= url_for(@article.header_image) %>"
    ],
    "author": [
      {
        "@type": "Person",
        "name": "Your Name",
        "url": "https://your-url.com"
      }
    ],
    "mainEntityOfPage": {
      "@type": "webPage",
     "id": "<%= article_url(@article) %>"
    }
  }
</script>

Now, the proper markup will be loaded for each article when the page loads!

If you want to learn more about schema markup, we recommend this article from SEO Powersuite, entitled "Schema Markup: An A-to-Z Guide to Structured Data for SEO".

Update:
A close look at the SEO Powersuite article shows that they recommend a different syntax for images. This one uses a hash instead of an array:

"image": {
  "@type": "ImageObject",
  "url": "https://cdn1.link-assistant.com/thumb/upload/news/post/427/1637067065-500x.png",
  "width": 500,
  "height": 500
 }

As you can see, they also add type, width, and height, as well as specifying the url as a URL.