This post is part of a series of articles on how to setup a Jekyll blog :
- Part 1: Setup up a jekyll blog using github pages and disqus comments
- Part 2: Add social sharing buttons to your Jekyll blog
- Part 3: SEO for your Jekyll blog
Part 2: Add links to share on twitter, facebook and google +
Adding sharing buttons to your posts is extremely simple for twitter and google+, just paste the provided code on your page :
Contrary to Twitter and and Google+, the injected code doesn’t auto-discover your current page url. It’s a static link, and the sample code include a link to the developper page itself
You need to use a Jekyll variable to get the URL of the current page:
If it does happen, just fix it with some CSS.
Add meta for google, facebook and twitter :
Search engines and social networks crawl your page and index its metadatas. Google uses it to calculate your pagerank, Facebook and Twitter use them to enrich the way your page is displayed in shares and tweets.
Web page metadatas is a vast subject, I recommend you to read this excellent article on the state of the art of meta in 2013: 18 Meta Tags Every Webpage Should Have in 2013
Metadatas for Facebook OpenGraph :
Shares on Facebook are objects of the open graph. By default, the Facebook crawler will gather informations about your page such as the title, a preview of your page, etc.
You can improve the way your page is displayed by providing metadatas about your page :
- Your website name
- Post title
- Clean url (used as a unique identifier for your object)
- Image (preview for the page)
- Facebook app id
You must add these tags in the
<head> of each page.
On a Jekyll blog there will be 2 kind of pages :
- Posts with metadatas about the article
- Other pages with metadatas about the blog itself (homepage, about, etc)
Here is a sample code :
You can check the result using the open graph facebook debugger
The open graph attributes are described in this doc
Metadatas for Twitter cards :
Twitter cards are similar to Facebook meta-og. When a tweet contains a link to your page, the Twitter crawler will gather informations about your page to enrich the tweet (display a preview, etc) Here are some informations you can provide :
- Card : Texte, image, ou player (ex: video)
Here is a sample code to generate Twitter cards metadatas :
Twitter also provides a tool to validate your metadatas : Card validator
Twitter will only display images from your domain if it has been previously validated. To get your blog validated, go on the Card validator tool and click on “request approval”.
Validation for this blog took only a few minutes.
Thats it ! People can now share a link to your post on social networks.
Do you see room for improvement, have you done something differently? if so leave a comment.
Code for this blog can be found here : vdaubry.github.io