Titles and Meta Tags in Expression Engine

With the growth of most web browsers now using address bars as search bars combined, the number of people actually ending up on your website as a direct result of typing in your web address is typically falling. Many people, myself included, have become lazy with our typing and simply type a company name directly into our address bar and hoping the result we know we're looking for will come up top. This habit has no doubt been fuelled by the growth of mobile searches where typing is arguably less easy, so its a behaviour I imagine will continue to grow.

This is just one reason why your placement in the search engine results pages is becoming more and more important, so having control over the title tag, and to a certain degree the keywords and description meta tags, is more vital than ever.

There are a couple of well known add-ons for helping with SEO in Expression Engine; namely SEO Lite and NSM Beta Meta. Personally I've not used Beta Meta, but out of the 2, it clearly has a much more comprehensive feature set, but also a price tag of AUD $49.95. I've always found SEO Lite easy to work with and meets the needs of our sites, but there are cases when it needs a little help. With the availability of Template Layouts in Expression Engine, I thought I'd write up how we set up our title and meta tags on a recent EE project.

The recently completed Choose South Cumbria site has several top level pages that have no corresponding entry in the CMS. These pages are typically made of entries from other channels, such as news, events or other types of featured content. With no channel entry in the site, there's nowhere to set values for your important title tag, so we took the following approach that combines Low Variables with SEO Lite.

Low Variables is one of those add-ons we install on most of our sites. It really is like a Swiss Army Knife, capable of helping out in lots of different instances and if you haven't used it yet, I'd highly recommend trying it on your next project.

Setting up your Title and Meta Fields in Low Variables

In Low Variables, we created a new variable group called simply, SEO. We then created a new variable for each top level page on the site that was without an entry in the CMS, using the native EE grid fieldtype with a minimum and maximum of 1 row. Our grid would include a text field for our Title (set to a maximum of 80 characters), a text input for our keywords and finally a textarea for our description. Descriptions generally want to be kept to around 160 characters, so because we can't limit the character input on a textarea, we reduced this to just 2 lines to try and discourage excessive keyword stuffing.

The naming of our variables here is important, as we need them to work dynamically with EE's layout tags. We always prefix any low variable with lv_, and this is no exception. So for our home page, our variable was called lv_home_seo, our news page was lv_news_seo and so on; all following the same pattern.

This obviously gives us a nice way to create easily editable fields for title, keywords and description tags.

Passing variables in EE's Template Layouts

Template layouts are a great feature that were introduced in EE 2.8. I'll not go into the detail of how they work here, but in each of our layout content files (ie. channel.group/template.html) we start with the tag:

{layout="_layout/index"}

Expression Engine allows us to pass variables using this tag, so we added a custom parameter (as you can with embeds) to get:

{layout="_layout/index" seo_title="home"}

Think back to our naming of our Low Variable at this point which was lv_home_seo. We need to set our seo_title parameter to be identical to the middle part of our low variable. All will become clear in the next step.

Linking the Layout Variables with our Low Variables

Given that we knew only our top level pages were without an entry in the CMS, we could be confident that any URL with a value for {segment_2}, was not a top level page, and therefore needed to use the Low variables we've created. So in our _layout/index file, we added the following condition.

{if segment_2==''}
<title>{exp:low_variables:pair var="lv_{layout:seo_title}_seo"}{lv_{layout:seo_title}_seo:title}{/exp:low_variables:pair}</title>
<meta name="keywords" content="{exp:low_variables:pair var="lv_{layout:seo_title}_seo"}{lv_{layout:seo_title}_seo:keywords}{/exp:low_variables:pair}">
<meta name="description" content="{exp:low_variables:pair var="lv_{layout:seo_title}_seo"}{lv_{layout:seo_title}_seo:description}{/exp:low_variables:pair}">

In our search engine tags, we've then called the Low variable pair, but by adding the variable value passed through from our content template. For our home page, lv_{layout:seo_title}_seo will be rendered as lv_home_seo (the name of our Low variable) giving us completely dynamic title and meta tags for as long as we're on a top level page of the site.

What about the 2nd level pages?

All of our 2nd level pages are entries in the CMS, so for these, we can use the built in functionality of SEO Lite, adding in an alternative to our original condition.

{if:else}
{exp:seo_lite use_last_segment='yes' {if '{segment_2}' == 'category'}category_url_title="{segment_3}" {/if}}
{/if}

Here we're telling SEO Lite to look up the entry based on the last segment in the URL (the url_title), unless our 2nd segment is 'category'. In this case, we're passing the category name in {segment_3} to SEO Lite which will be rendered in the title tag, while the category description (if it exists) will display in the description tag.

This was a really quick and easy way to give us accurate and editable page meta data which will be vital to support the site's search engine placement. There are no doubt other ways this could have been achived, but this approach is completely dynamic (you just need to create the respective entries in Low Variables and name them correctly) and all the tags are easily accessible for ongoing editing.