SEO Friendly ExpressionEngine Templates Part 1

It is a great feeling when you finally get that ExpressionEngine site live. You set up Google Analytics and Google Webmaster Tools, and submit your Sitemap. And when the site gets crawled and you see the results and are confronted with a slew of HTML Suggestions that need to be fixed. I will go over how to set up your templates so your HTML Suggestions start and stay empty, as in unique Meta Descriptions and Title tags for every single pages on your site.

If you don’t use Google Webmaster Tools (shame on you!) and have no idea what I’m talking about see below:

Among other things Google Webmaster Tools gives HTML Suggestions for “fixes” to make to your pages. These primarily relate to Meta Descriptions and Title tags. In static sites these are easy to create but in ExpressionEngine, even if you are mindful of it, you can easily come up with duplicate tags. Not because ExpressionEngine cannot handle the task but because you forget to set them up correctly, or don’t know how. In which case, continue reading. It isn’t the end of the world if you check your Webmaster Tools and see all kinds of problems but it is one of those things you should fix, and Google will probably reward you with better results because of it.

Meta Description & Title Tags

These are the two biggies that the bulk of this post will focus on. So lets get started. The easiest ones to deal with are single use templates. These might be search result or contact templates on your website. For single use templates you can write a static Title and Meta Description right in the template. For the remainder of this tutorial I’ll use the markup from this site for examples. Here is my template code from my static contact page.

<title>Contact | Couchable</title>
  <meta name="description" content="If you want to make a suggestion, ask a question, make a guest post, or just say hello, fill out the form below. "> 

Multi-use, Single Entry Templates

Next up on the list is multi-use templates, or those that are used to create many different pages. There are a couple methods here so I’ll go over them. All of which involve creating at least one new Channel Field and being wrapped in a Channel Entry tag pair.

{exp:channel:entries limit="1" channel="pages" url_title="{segment_1}" disable="categories|category_fields|pagination|member_data"}
{if no_results OR segment_2 != ""}{redirect="404"}{/if}
  <title>{title} | Couchable.co</title>
  <meta name="description" content="{exp:char_limit total="150"}{intro}{/exp:char_limit}">
{/exp:channel:entries} 

This is the markup I use for my page template, that is used for static pages like the About and Advertise pages.

So lets go over this. First we have to use a Channel Entry to pull each entry from the Page channel.

Next we have our 404 redirect. So if there is no entry or there is an additional segment (which there shouldn’t be) - example: your_site.com/contact/monkeybuttz. There is a great article about 404s from Ryan Battles on Jovia Web Studios blog in case you missed it. I don’t know why but Google loves to treat single entry pages like pagination pages sometimes and throw a /P8 or /C16 segment where it doesn’t belong. That and a user may add some additional characters and without this 404 some content will still be displayed, just maybe not the right content. So there are a couple reasons why a conditional to make sure the next segment is blank on single entry pages is important.

The Title tag is simply filled with the entry Title then ” | Couchable.co”.

The Meta Description is coming from a Channel Field I created, that in the case of this site, is used for the Meta Description and the Excerpt for all pages and posts. If you look inside the Meta Description you will also see a new tag pair you might not be familiar with. It is the Character Limiter Plugin which does what it’s name says, limit the number of characters of whatever falls between the tags. It is a free plugin available from Ellis Labs. For Titles I recommend no more than 64 characters and for Meta Descriptions I recommend 150 characters. Google will truncate these automatically but I’d rather take that one extra step and do it myself.

Fine Tune Control

But if you need more control over your Title and Meta Description tags you will need to create a Channel Field for both like so.

{exp:channel:entries limit="1" channel="pages" url_title="{segment_1}" disable="categories|category_fields|pagination|member_data"}
  <title>{exp:char_limit total="64"}{if custom_title != ""}{custom_title}{if:else}{title} | Couchable.co{/if}{/exp:char_limit}</title>
  <meta name="description" content="{exp:char_limit total="150"}{if meta-description != ""}{meta-description}{if:else}{intro}{/if}{/exp:char_limit}">
{/exp:channel:entries} 

Essentially this is the same as the Meta Description from the previous example except I threw in a new wrinkle. Instead of making the Meta Description and Custom Title Channel Fields mandatory I created a fallback. So if those fields are blank the Title will be populated by the Entry Title and the Meta Description will be populated by the Intro. This is done with an advanced conditional.

{if}something happens{if:else}something different happens{/if} 

If you are familar with PHP this is a simple If Else statement. What the Title conditional is saying is: “If the Custom Title Channel Field is empty then display the Entry Title”

Pagination Pages

Pagination pages throw in another little twist. There really isn’t going to be a unique Title or Meta Description for these pages because the information is largely the same, just different entries are being displayed. Here is the example from this site’s homepage, my Index template.

<title>{if segment_1 == ""}Couchable - Web Business, Web Design &amp; Development Articles, Guides, and RoundUps{if:else}Even more posts at Couchable: {segment_1}{/if}</title>
  <meta name="description" content="{if segment_1 == ""}Articles, how-to's, guides, and roundsups for web business, web design and web development.{if:else}Even more great articles, how-tos, screencasts and more from Couchable.co - {segment_1}{/if}"> 

Again we use an advanced conditional to display different content based on the url segments being used. If segment_1 is blank (the homepage) a displays a static Title and Meta Description is displayed. If the user scrolls to the bottom of the page and clicks one of the pagination buttons to view more entries, segment_1 will now have an /P8. These pagination pages contain a different static Meta Description and Title but the segment is added at the end of each, just to make every pagination page unique.

Category Pages

{exp:channel:category_heading channel="posts"}
  <title>Category: {category_name} {segment_5} - Couchable</title>
  <meta name="description" content="{exp:char_limit total="150"}{if category_description}{category_description}{if:else}Couchable Category: {category_name} {segment_5}{/if}{/exp:char_limit}">
{/exp:channel:category_heading} 

For category pages I used the Category Heading tag pair. Which is used to display the Category Name and Category Description if there happens to be one.

Well I think I covered the majority of the different templates types and the Title and Meta Descriptions for each. In Part 2 I will go over the proper use of H tags, 301 redirects, formatting entries and some other useful tricks, so stay tuned.