Website Tagging with Open Graph

May 18, 2021, Programming

This is how I add Open Graph metadata to my website. If anything, this post is a reminder for me, so I can remember how I set up my website. I’m not an expert on SEO.

Goals

• Pages should show up nicely in search results.
• Links shared on social media should show up nicely.

That’s it. If you look at schema.org’s Getting Started page, it says:

In general, the more content you mark up, the better.

My response to that is, “No.” I was not put on this planet to categorize information for computers, I only want to use computers to share things with people.

Open Graph Basics

The Open Graph protocol, according to the Open Graph protocol webise, adds a small amount of metadata to your web pages to turn them into “graph objects”.

Whatever that means.

I care about being able to share links with people on places like Twitter, Facebook, and Discord. Adding Open Graph metadata means that your links get shared as a “card”, with an image, title, and description. With Open Graph metadata, sharing a link to your website looks like this:

The core properties are simple enough:

<meta property="og:title"
      content="My webpage">
<meta property="og:url"
      content="https://www.example.com/page.html">
<meta property="og:image"
      content="https://www.example.com/image.jpg">

The og:url property is the URL which will be used to identify the page. I think the point of og:url is to associate each page with a single ID, so different URLs with tracking tags like ?utm_source= will all resolve to one object. I’m not sure this is necessary for me, since I already have a canonical URL set:

<link rel="canonical"
      href="https://www.example.com/page.html">

The og:description property is also important. It’s the text snippet that shows up in the card.

<meta property="og:description"
      content="This is the description that
                appears next to the link, when
                I share this page.">

On Twitter (Twitter: Cards markup), the title is limited to 70 characters, and the description is limited to 200 characters. I assume that this limit is measured by counting the Unicode code points, because that’s how Twitter measures the length of tweets.

Images

Take special care with images. Why? Images make the links you share stand out, so people click on them.

There are a couple common formats for cards: cards with square images and cards with wide images. The wide images have a 1.91:1 aspect ratio, or a recommended image size of 1200×630 (depending on who you ask). This doesn’t answer what size I should make these images, though.

1. At 1200×1200, Facebook and some other sites will crop off the top and bottom. This size is recommended by Nick Vogt in H3XED: Ideal Open Graph Image Meta Tag Size.
2. At 1200×630, Twitter summary cards and some other sites will crop off the left and right. This size seems to be the most common on sites surveyed by Matt Turnbull in The Best Open Graph Image Size.

I think I’ll just use 1200×630 everywhere.

Note that you can also add alt text, and some sites recommend adding attributes for the width and height. The size is unnecessary, but apparently, some sites will use this to inform how your page is shared before the associated image is fetched.

<meta property="og:image:alt"
      content="Seven thousand lemons">
<meta property="og:image:width"
      content="1200">
<meta property="og:image:height"
      content="630">

Facebook

See Facebook: Best Practices - Sharing. Facebook uses ordinary Open Graph tags, with several extensions.

To preview how your site looks on Facebook, use the Sharing Debugger. You must be logged in to Facebook to use it. Here’s what it shows me:

Twitter

See Twitter: Getting started with Cards.

Note that Twitter is the only site which has custom tags that people actually use and care about. Twitter’s custom properties let you tie the card to your Twitter account, select the card format, and do a few other things.

<meta name="twitter:card"
      content="summary">
<meta name="twitter:site"
      content="@twitter">
<meta name="twitter:creator"
      content="@jack">

It’s not necessary to use any of these. Some of these tags are only used for Twitter analytics, which I don’t use. As for twitter:card, from Twitter: Cards markup,

If an og:type, og:title and og:description exist in the markup but twitter:card is absent, then a summary card may be rendered.

This means I can leave out the twitter:card property, except when I want to override it.

To preview how your site looks on Twitter, use the Twitter Card Validator. Here’s what it shows me:

Search Engines

There is a completely separate system called Schema.org which search engines like Google use to provide “rich search results”. These schema encode some of the same data as the Open Graph metadata, but have a much larger set of properties.

I’ll think about it later.

Summary

1. Fill out the core metadata: og:title, og:type (which can be website), og:description, and og:image.
2. Make images 1200x630, and make sure they look acceptable if they are cropped narrower.
3. Include image metadata og:image:alt, og:image:width, and og:image:height.
4. Use the Facebook Sharing Debugger and Twitter Card Validator.