Check your Open Graph tags

Published — 2 minute read

I had a strange issue with this site and any site based off the template I use. When crawling the sites in Ahrefs, I got errors mentioning “Open Graph tags missing”.

My Open Graph tags and other social tags are set in a component, social-meta.njk, for easy updating of just the tags across the site. Turns out the code in that component was using the incorrect syntax for Open Graph tags.

Here’s the code:

<meta name="og:title" content="{% if meta_title %}{{ meta_title }}{% else %}{{ title }}{% endif %} | {{ site.name }}">
<meta name="og:description" content="{% if meta_description %}{{ meta_description }}{% else %}{{ excerpt }}{% endif %}">
<meta name="og:image" content="{% if cover %}{{ site.url }}{{ page.url }}images/{{ cover }}{% else %}{{ site.url }}{{ site.images.og }}{% endif %}">
<meta name="og:url" content="{{ site.url }}{{ page.url }}">
<meta name="og:site_name" content="{{ site.name }}">
<meta name="og:locale" content="en_US">
<meta name="og:type" content="website">

What’s the issue?

Open Graph uses the property syntax instead of the name syntax of other meta tags, like description or title, according to Facebook’s Open Graph docs.

My tags were using the name syntax instead.

The fix: update name to property:

<meta property="og:title" content="{% if meta_title %}{{ meta_title }}{% else %}{{ title }}{% endif %} | {{ site.name }}">
<meta property="og:description" content="{% if meta_description %}{{ meta_description }}{% else %}{{ excerpt }}{% endif %}">
<meta property="og:image" content="{% if cover %}{{ site.url }}{{ page.url }}images/{{ cover }}{% else %}{{ site.url }}{{ site.images.og }}{% endif %}">
<meta property="og:url" content="{{ site.url }}{{ page.url }}">
<meta property="og:site_name" content="{{ site.name }}">
<meta property="og:locale" content="en_US">
<meta property="og:type" content="website">

Conclusion and resources

I deleted my Facebook account last year. However, updating my Open Graph tags means sharing my posts on LinkedIn works now 😅

LinkedIn has a great Open Graph tags checker. I also use Hey Meta.