Author’s Note: I’m currently in the process of migrating old blog posts to this new system. That may mean some links, syntax highlighting, and other details are broken or missing temporarily. Sorry for the inconvenience!

Worth making a note here, but the past several posts, I’ve started out by opening a prior post, copying the contents, and then changing things. That’s probably a sign that there’s an awful lot of repetition that we can try to reduce!

We’ve talked a fair bit now about HTML, and how we can use certain tags to annotate our parts of our document. Today, we’re going to add a few more tags — and not ones that really fall out of the HTML spec.

Up until now, we’ve focused on trying to make things look a bit better on-site. But today, we’re going to look at ways to improve how our posts look on social media.

Twitter’s Summary Card

Twitter has a special way of presenting URLs called the Summary Card. Actually, they have a couple of different ways of presenting stuff, but we’re going to focus on the Summary Card, because it’s the most generic. The “Summary Card with Large Image” would probably drive more clicks - because that’s what images tend to do - but we haven’t really added story-specific images here yet.

The convenient thing here is that we simply need to add some meta tags to this page, and Twitter’s crawler will pick it up if anybody shares out this article. So let’s steal their sample code and start populating it with our own content.

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@cheerskevin" />
<meta name="twitter:title" content="Meta Tags" />
<meta name="twitter:description" content="Getting Twitter and Facebook to make us look pretty" />
<meta name="description" content="Getting Twitter and Facebook to make us look pretty" />

Couple of odd things here:

  • twitter:site apparently refers to the Twitter account most closely associated with the page. That’s not what a “site” is, Twitter!
  • twitter:description means we’ve gotta start writing summaries for our articles. As long as we’re doing that, we might as well start adding the <meta name="description" /> tag, since that’s used by some search engines as well.
  • A twitter:image is suggested in their example, but they also say to “not use a generic image such as your website logo, author photo, or other image that spans multiple pages”. It’s an optional tag, and we don’t have an image that’s specific to just this article. So we’ll just skip it here.

Facebook Open Graph Protocol

Facebook is a little more weird. Facebook has this whole crazy thing called “Open Graph” where they like to imagine the internet as this complex chain of interconnected nodes and blah blah blah math theory.

It’s a Friday! No time for math theory! Let’s steal their code snippet and customize the values:

<meta property="og:url" content="https://cheerskevin.com/meta-tags.html" />
<meta property="og:type" content="article" />
<meta property="og:title" content="Meta Tags" />
<meta property="og:description" content="Getting Twitter and Facebook to make us look pretty" />

Pretty similar, eh? The one thing that’s worth noting, because I’m sure it’ll come up at some point in the future, is the og:url property. Sometimes an article might have more than one URL. But sites like Facebook want to track share counts regardless of what the browser URL might be. Providing a “canonical” URL tells Facebook “I don’t care how you got here; treat me as this URL” for the purposes of share counts and such.

Now Facebook and Twitter should start treating our articles a little nicer when we share them out — provided we remember to add these meta tags. You’ll note that, frustratingly, we have three meta tags with the exact same content: og:description, twitter:description, and description all provide the exact same information.

Typing that stuff over and over is a violation of a very important rule in computer science: Don’t Repeat Yourself. Typing that stuff over and over is a violation of a very important rule in computer science: Don’t Repeat Yourself.

But since we set up a build step in our last post, we just might be able to automate that away next time. Cheers!


←Previous Post | Next Post→