Congratulations, you’ve set up a Jekyll site. You may even be, like me, taking advantage of the free hosting provided by GitHub. You’ve written your first post, you’ve set up all the options. But when you go to share it on Facebook, Tumblr, LinkedIn or Twitter, that share may not look so pretty.
Here’s how to make Jekyll posts easier for others to see and share on social networks.
To fix ugly shares and be the envy of all your GitHub followers you’ll have to add some metadata to the HTML HEAD tag. Following is a walk-through of what tags and Liquid code is needed to generate those tags. Unless otherwise indicated, this markup goes in the head.html file in your _includes folder. If you’re not already familiar with social and open graph tags, this post should be a useful illustration of how they work.
First, there are standard tags that should be applied on every page.
The og:title tag sets the title for sharing. I’ve duplicated the logic of the title tag to show either the site title or the post title based on what location the user has loaded. You could set a post-level variable for custom title as well or change the number of allowed characters.
We’ll do the same with duplicating the logic of the description to og:description and canonical to og:url tags.
I’ve made the below Liquid statements multi-line for easier reading, but I wouldn’t recommend that in production.
Populating the Open Graph site name and locale tags is fairly straightforward.
These are the site-wide Twitter tags. My twitter:site property is set to my personal name, but you might want to set it to your site’s account, if you have one. Description is set to the same data as the other description tags.
To populate all the fields social networks expect, you’ll need some extra properties on your posts. Here’s what the head of this post’s markdown file looks like.
There are a number of meta tags that are either site or article only. In order to figure out if we’re on an article or not Liquid can switch in an if/else statement on the page.title.
Sharing works better with pictures. You can upload them to your repository, or link them from other locations. Not every page may have an image, so I’ve built a check to assure that an image has been supplied. If one hasn’t, it returns to the default image I have for the whole site.
This takes care of both the Open Graph and Twitter Image tags. With more page properties you could have custom images for each if you wanted.
What if you’re not on a post page? There are some default values we can fill in to indicate that we’re on the basic website.
That’s all of them! If you’re interested, you can see the whole set of tags, the Liquid script, and the rest of head.html that I use for this very site by checking the repo.