Open Graph Protocol and Twitter Cards

The Open Graph protocol and Twitter cards allow developer users to control (or explicitly name) the information that is associated with their content. Developer users may outline or describe content from their site with things like canonical URLs, images, descriptions, and much more.

Here is a little more about “unfurling” from the folks at Slack. But a very practical TL;DR version follows, showing how to implement something very simple in short order. It is also worth noting that I failed to consider oEmbed here. I don’t plan to deal with that here or in the near future, but Slack gives a bit more coverage of that particular technology.

Open Graph Protocol

In the following example of an “article”, only the description is not required.

<meta property="og:title" content="fun.wd2.us · David Eldridge · Projects">
<meta property="og:type" content="article">
<meta property="og:image" content="https://fun.wd2.us/aaa/image/david-small.jpg">
<meta property="og:url" content="https://fun.wd2.us/index.html">
<meta property="og:description" content="Thanks for visiting fun.wd2.us. This is David Eldridge’s site with samples, sites, a sandbox, and some stuff.">

Additionally, the other items work thus:

• og:title - this should give a brief description, probably identical to the page’s <title> attribute.
• og:type - this should describe the category of content (e.g. image, video, etc.).
• og:image - this will provide the link to an image that you would like associate with the page or its content.
• og:url - this is the canonical URL (chiefly used for SEO).

You can learn more on the OGP site. Particularly, here is some information about the meta tags for an article.

Twitter Cards

Twitter cards will help you to describe data in a way that will be more readily usable by Twitter and other systems that have implemented this protocol. Since Twitter also supports OGP, you can implement OGP and add only the additional tags (e.g. summary) that Twitter requires rather than having to implement both of these systems or protocols fully and simultaneously.

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

h/t Peter — Thanks for encouraging me to implement this technology.