Create Post Excerpt Intelligently in Jekyll

meta-descriptions or OpenGraph Descriptions are the short descriptions that Search Engines/Facebook display on result pages. They provide a brief introduction to the content and grab user attention. So when possible, try to use keywords in meta description that describes in short what that page is about. Ensure to limit meta description length to 160 characters which seems to be a norm for SEO now-a-days.

Jekyll by default supports post.excerpt which would automatically take the value of excerpt from Front Matter (if present). Otherwise it will fall-back to post content from beginning till excerpt_separator or end of post. Whatever separator you choose, have it defined as excerpt_separator in _config.yaml. With this done you can use {% raw %}{{ post.excerpt | strip_html }}{% endraw %} wherever you need to show it (e.g. meta-description/og-description). I use strip_html to remove any html which will cause issues with description tags.

I personally like to show a bigger teaser on my main page to entice user attention. And on other pages (like search results, Category/Tag index) show a brief description. Here is how I do it.

  1. Define meta-description tag in Front Matter of the post and describe in few words what the post is about. Then use {% raw %}{{ post.meta-description }}{% endraw %} during publishing HTTP headers for the post and on Category/Tag index pages. And on main page OR index.html use {% raw %}{{ post.excerpt }}{% endraw %} which is auto-generated by Jekyll based on Front Matter or excerpt_separator. I personally stopped defining excerpt in Front Matter to avoid namespace collision with Jekyll.

  2. If you do not want to introduce another tag in Front Matter you can use below code in index.html template. If post content has <!–more–> tag, Jekyll will display the post content up-till the separator tag. Otherwise it will display auto-generated post excerpt. On summary pages (search results, Category/Tag index), use {% raw %}{{ post.excerpt }}{% endraw %}.

{% raw %}
{% if post.content contains '<!--more-->' %}
 {{ post.content | split:'<!--more-->' | first }}
{% else %}
 {{ post.excerpt }}
{% endif %}
{% endraw %}