I spent a long time trying to get this right. It wasn’t until I started investigating options for constructing images at build time with my jekyll site that I came across one of the most important aspects open graph cards. If nothing else, make sure the images you present in your open graph tags are within the recommended size dimensions. An image that’s 400x400px dimensions works well for all social platforms I’ve tested on, including:
- Microsoft Teams
So what tags exactly do you need, to get your social media cards displaying correctly?
Below is the markup I’ve used in my jekyll theme’s head.html file. The contents of this file is included in the HTML <head> tags of all pages.
Decision logic
Because I’m sometimes lazy, I’ve incuded some logic in the file, so it falls back to a site-wide default set of attributes depending on what’s defined in the current page.
For example, if the current page has a title, the title will be used. However, it will fall back to the site’s title if a title hasn’t been set for the page.
Similar logic has been applied for the following attributes:
- Title
- Excerpt
- Image
Image dimensions
Additionally, following steps of my previous post on using ImageMagick to optimise images during jekyll’s build process, my jekyll build generates images at the desired 400x400px dimensions, ready for social media platform consumption. These generated images maintain the same file name as the original, and are placed in the /assets/img/400x400/ directory.
<!-- Twitter cards -->
<meta name="twitter:site" content="@{{ site.twitter_username }}">
<meta name="twitter:creator" content="@{{ site.twitter_username }}">
{% if page.title %}
<meta name="twitter:title" content="{{ page.title }}">
<meta name="twitter:text:title" content="{{ page.title }}">
<meta property="twitter:text:title" content="{{ page.title }}">
<meta property="og:title" content="{{ page.title }}" />
<title>{{ page.title }}</title>
{% else %}
<meta name="twitter:title" content="{{ site.title }}">
<meta name="twitter:text:title" content="{{ site.title }}">
<meta property="og:title" content="{{ site.title }}" />
<title>{{ site.title }}</title>
{% endif %}
<meta property="og:url" content="{{ page.url | prepend: site.baseurl | prepend: site.url }}" />
{% if page.excerpt %}
<meta name="twitter:description" content="{{ page.excerpt | strip_html }}">
<meta property="og:description" content="{{ page.excerpt | strip_html }}" />
{% else %}
<meta name="twitter:description" content="{{ site.description }}">
<meta property="og:description" content="{{ site.description }}" />
{% endif %}
<!-- end of Twitter cards -->
{% if page.image %}
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:image" content="{{ page.image | prepend: '/assets/img/400x400/' | prepend: site.baseurl | prepend: site.url }}">
<meta property="og:image" content="{{ page.image | prepend: '/assets/img/400x400/' | prepend: site.baseurl | prepend: site.url }}">
{% else %}
<meta name="twitter:card" content="summary">
<meta name="twitter:image" content="{{ site.image | prepend: '/assets/img/400x400/' | prepend: site.baseurl | prepend: site.url }}">
<meta property="og:image" content="{{ site.image | prepend: '/assets/img/400x400/' | prepend: site.baseurl | prepend: site.url }}">
{% endif %}