How to Enable Rich Link Previews for Blog Posts

Learn how to mark-up articles that enable rich previews for search, social networks, and messaging applications.

People write online content for all kinds of reasons: self-expression, building personal/brand equity, sharing knowledge (like this one), and the list goes on... Publishing content has many different measurable outcomes depending on the person or business. One common goal is engagment. While the quality and relevance of content itself is much of the battle, another important aspect is discoverability.

Think about the places you might typically discover articles: search, social networks, a friend or colleague sends something. How much more likely are you to click the link if you have a preview of what that content contains? Some websites have reported a 100% increase in traffic after implementing rich snippets.

In the month following implementation of the new search experience, we saw roughly a 100-percent increase in the typical year-over-year growth of traffic from Google Search to our event listing pages, according to Google Analytics.

Quote

In this article, we will learn how to mark-up your content to generate rich previews for search and some popular social networks.

Overview of Rich Previews

Rich Previews enhanced your appearance in search results (Google, Bing, etc.), social networks (Facebook, Twitter, Linkedin, etc.) and communcations apps (Slack, iMessage, etc.). When you publish your article links on these platforms, they will be augmented with additional information to help readers understand what content lives at that link. Here are a few examples of Rich Previews on various platforms:

Why Rich Previews are Important

Rich Previews have many benefits:

  • Increase the click-through rates for your links.
  • Help users understand what information they should expect when they click your links.
  • Improve search rankings, especially by being listed in carousels and other ehanced SERPs.
  • Control content displayed on other platforms when links are posted.

Getting Started

There are a couple ways to approach this task, for me it makes sense to being with the target platforms and understand what they require and recommend for

You've seen them before, here are rich previews on some popular sites.

In order to get your articles to display rich previews, you need to add some addiitonal data to your web pages. We're going to start with the content properties that are common across many platforms, then discuss where to put that content in your HTML, and finally how to test that everything is working as expected.

Content Properties

Most of the platforms we are targeting expect the same type of data. We're going to list that content out here first, before describing how to structure it.

Required Content

  • Organization/Publisher Name: The name of your site, could be described as "My Website" or "mywebsite.com"
  • Image Logo (optional): A logo of your organization.
  • URL: The url where this article is published. This will be the link between your pasted URL and the rich content.
  • Title, Headline: The title of the article
  • Alternative Headline (optional): If your article has a sub-headline, you can include this here. This is different than a description.
  • Description: A description of the article, this is often the exceprt or opening paragraph, used to describe the content of the article.

Required Content Next

  • Date Published: The date, and optionally, the time the article was published. This needs to be set in ISO 8601 format: 2019-03-07 or 2019-03-07T13:39:43+00:00.
  • Date Modified: The date when your article was modified. Useful if updating content or publishing follow-ups.
  • Author: The name of the person who wrote the article. This is just their name, we will look into other author properties in the implementation.
  • Media: Video or Image content, usually the cover or thumbnail for the article.

    • Images: Different targets require different image sizes, but for each we will need the following.
    • URL: The url where the asset lives.
    • Type: The MIME type for the image asset, image/jpeg, image/gif or image/png.
    • Width: The width of the image.
    • Height: The height of the image.
    • Videos: Same requirements as Images, but expects different types.
    • Type: The MIME type for the asset, application/x-shockwave-flash or video/mp4.
    • Image: A url for the video thumbnail
    • Note: It's important to note that there are limits to the assets being served. If the referenced assets are too big, they won't be displayed.
    • Max file size: 5 MB
    • Recommended Ratios and Sizes
Aspect Ratio Width (px) Height (px)
1.91:1 1300 630
1:1 1300 975
16:9 1300 731

Implementation

<script>
  function() {
    console.log('hello, world);
  }
</script>

How to validate

Conclusions

hello from footer