Perfect meta description in Siteleaf

One of the first issues I had to figure out when we started to work with Siteleaf was how to code the meta name=“description” in our templates.

All the reference themes we found had this or similar in the code.

<meta name="description" content="{{ site.meta.description }}">

This code uses a sitewide meta description, which results in all pages on the site get the same meta description.

Meta description do not help with search rankings, but is very important to get higher click-through rates from search engine result page. A good description is often the reason why people click on your link.

What we found was best to do is to create a meta description field on all pages. Clik on New meta field in the editor, and name the field: description.

Now we can call this field in our templates with: <meta name="description" content="{{ meta.description }}">

Since we have many clients that uses siteleaf we need to make sure that if they insert html or many lines that these are removed from the code. We do this by adding some liquid filters like this:

<meta name="description" content="{{ meta.description | strip_html | strip_newlines | truncate: 160 }}">

We also included the truncate filter. This will remove anything inserted in the field with more than 160 characters. Most search engines display between 150 and 160 charachters so we might even use 150 as the truncate option.

Now all pages have their own seperate meta description in our sites.

One problem we encoutered when clients started to use their new sites is that they tend to forget to write this field. We found a good solution to this. If the client don´t write a description we would like to fallback to use the first 160 characters in the body of the document.

We achive this with adding fallback to our current code like this:

<meta name="description" content="{{ meta.description | fallback: current.body | strip_html | strip_newlines | truncate: 160 }}">

Similar code could also be used in OpenGraph and twitter card description fields.

Any suggestion to how we could do this even better? Please tell us in the comment form below.