The Open Graph and Sharing Tags
Awhile back, I decided I wanted to have those fancy cards show up when I or anyone else posted a link to my blog.
To do this, you need to add a few meta tags to your pages.
<meta property="og:url" content="https://snook.ca/archives/html_and_css/css-concerns">
<meta property="og:title" content="CSS Concerns">
<meta property="og:description" content="These days, ...">
<meta property="og:type" content="article">
<meta property="og:image" content="https://snk.ms/logo.gif">
The og: tags are part of the Open Graph. The Open Graph allows you, the web developer, to specify structured data about the content on the page. Services such as Twitter, Facebook, and Google use these in a number of different places. One such place is the “share cards” that are displayed when you post a link to these services.
The og: tags are specified using property and content attributes.
Twitter allows you to specify the type of card it should use.
<meta name="twitter:card" content="summary">
The summary indicates that this is using Twitter’s smaller card style that has the image off the left side. Facebook appears to choose card layout based on the size of the image attached. For example, since my logo doesn’t meet the minimum 200px width, it won’t be shown in Facebook’s card. (I should probably upload a larger logo!)
When I added photography to my blog, the images were going to be bigger. As a result, I wanted to use the larger card style.
My content management system checks to see if there’s a large image attached to the article. If it is, it specifies the summary_large_image value in the content attribute.
<meta name="twitter:card" content="summary_large_image">
Duplicate Tags
One thing that seemed silly was the duplication of the article description. Since these use different attributes, I decided to try combining them onto a single element. At first, this didn't work. Twitter wouldn't pull in the description.
<meta name="description"
property="og:description"
content="These days, ...">
I thought that I was done for and was about to give up. Then I remembered a bug I ran into a long time ago where attribute order caused a SOAP request to fail. That wouldn’t be the case here, would it? It turns out, it is.
<meta property="og:description"
name="description"
content="These days, ...">
By specifying the property attribute before the name attribute, the Twitter Card validator was pulling in the description. Other Open Graph validators also seem to be okay with this approach.
Final Code
Here’s what I now have on my site:
<meta property="og:url" content="https://snook.ca/archives/html_and_css/css-concerns">
<meta property="og:title" content="CSS Concerns">
<meta property="og:type" content="article">
<meta property="og:description"
name="description" content="These days, ...">
<meta name="twitter:card" content="summary">
You can access the following validators to verify that you've specified everything correctly: