Linux Tutorial Blog

Although not really Linux-related, this tutorial should be a useful addition to this website. It describes in detail how to make the Lifetype blog system more Search Engine Friendly (SEF).

Difficulty: Medium 

What we're going to do

We're going to edit a Lifetype template and add two Custom Fields in order to make our blog more Search Engine Friendly (SEF). This tutorial assumes you know where to find your Lifetype template files and how to edit them. This tutorial also assumes you're willing to add proper descriptions and keywords to your posts, categories and website in general.

Adding better page titles

Note: If you're using Lifetype 1.2 (which is under development at the time of writing) or higher, this part of the tutorial should be pretty useless, and you should skip to "Adding proper meta descriptions and keywords". This is because Lifetype, starting from version 1.2, features a built-in page title generation system.

Lifetype's standard template has a title scheme like this:

<Blog Title> | <Post Title>

The post title is only displayed if the visitor is actually viewing a post. In all other situations, the title consist of just the Blog Title and nothing else. Search engines consider the page title very important. They won't like it if the page titles are generally the same. Therefore, we'll use the template to alter the page titles so they fit the content of the page more. Assuming that your template includes the same header for every page (this is what most templates do) we can put all title generation together in one file. However, this file will need to know what page it's included from. Therefore, we'll set variables in every important file before we include the header. Have a look at, for example, my archives.template:

                {assign var="ViewingArchives" value=1}
                {include file="$blogtemplate/header.template"}
<div id="Archives">

        <h2>{$locale->tr("archives")}</h2>

        <ul>
                {foreach from=$archives item=month}
        <li><a href="{$month->getUrl()}">{$month->getName()}</a> [{$month->getNumArticles()}]</li>
                {/foreach}


        </ul>
</div>

                {include file="$blogtemplate/footer.template"}

As you see, I am setting the variable $ViewingArchives to 1 before including the header. This will help us generating a proper title later on. First, we'll have to add variables like this to all important template files. In my case, these were:

• archives.template => {assign var="ViewingArchives" value=1}
  
• commentarticle.template => {assign var="ViewingCommentArticle" value=1}
  
• error.template => {assign var="ViewingError" value=1}
  
• links.template => {assign var="ViewingLinks" value=1}
• searchresult.template => {assign var="ViewingSearchResults" value=1}

Of course, your template might be different from mine, so you might have to improvise a bit and use other variable names.

Now, we will alter the file header.template (if this file does not exist in your template folder, make sure the beginning of each page is rendered by the same, included, file, and use that file instead). Look for something like this:

<title>{$blog->getBlog()}{$postPageTitle}</title>

Start adding your variables to the title using if statements:

<title>{$blog->getBlog()}{if $ViewingArchives} | Archives{/if}{$postPageTitle}</title>

<title>{$blog->getBlog()}{if $ViewingArchives} | Archives{/if}{if $ViewingLinks} | Links{/if}{$postPageTitle}</title>

Note: I'm using the | character to separate parts of the page title. If you want, you can replace them with, for example, :: . 

In my case, the $postPageTitle variable contains nothing unless a post is shown to the visitor. This may be different in your case. Try using {if} statements (like the ones used for Archives and Links) to stop Smarty from adding strings unless their content should be in the title.

By now, we should have done a great deal already. However, there are some things left. For example: categories. Their are displayed using main.template, so we can't just use a variable we set there to recognize whether a category title should be shown or not. Fortunately, the Lifetype code provides us with the $category variable. You can show category titles in your page title by adding this code between those <title></title> tags:

{if $category} | {$category->getName()}{/if} 

This will display the category title in your page title only if the visitor is browsing a category. We can use a similar trick to show, for example, album names, as they are also provided by a variable coming from the code:

{if $album} | {$album->getName()}{/if}

And it also works for resources:

{if $resource} | {$resource->getFileName()}{/if}

We can also use code-provided variables to make certain other page titles more specific:

{if $ViewingError} | Error | {$locale->tr($message)}{/if} 

This will show the error message in the page title. We can also show the blog description if we're on the main page and not browsing a category:

{if $OnMainPage && $category == ""} | {$blog->getAbout()}{/if} 

Altogether, my <title> area look like this:

<title>{$blog->getBlog()}{if $category} | {$category->getName()}{/if}{if $ViewingArchives} | Archives{/if}{if $ViewingLinks} | Links{/if}{if $ViewingSearchResults} | Search Results{/if}{if $album} | {$album->getName()}{/if}{if $ViewingCommentArticle} | Add Comment{/if}{if $ViewingError} | Error | {$locale->tr($message)}{/if}{if $resource} | {$resource->getFileName()}{/if}{if $OnMainPage && $category == ""} | {$blog->getAbout()}{/if}{$postPageTitle}</title> 

Depending on your template, you might have to change things in it. Your mileage may vary. I recommend testing this in a development area first before putting it on a live site. You might get stuck, bringing your blog down until you manage to fix it.

Adding proper meta descriptions and keywords 

We will now create two Custom Fields and use them to provide meta information about our posts to search engines. This will allow them to index your posts more accurately, as it provides them with summarizing information, so they won't have to create some kind of summary themselves. It will also tell them the important keywords of the page, saving them some trouble detecting those themselves.

Note: in order to work effectively, this will require you to update ALL existing posts, adding a description and some keywords. If you have a lot of posts and not much spare time, you can also just enter keywords and descriptions for new posts. This will work, but search engines might start confusing old posts that have meta tags just like all other pages with new posts that have specific meta tags. I don't know the source code of the search engine's spiders, so I don't know if it'll do any harm, but I can't guarantee anything =).

First, let's add the Custom Fields. Go to your administration panel, click Manage in the upper menu, and select New Custom Field. Call it MetaDescription. The description of the Custom Field won't matter the search engines, but it might help you (or any other users writing for your blog) to remember what the field is for. A possible description is: "This field should contain a short description (up to 255 characters) of the post content, preferably without any strange characters (like <, >, ", ', %, & and so on)." The type should be "Text Field". Do not hide the field.

Now, add another Custom Field, called MetaKeywords. A possible description: "This field should contain comma seperated keywords about the post, starting with the most important keyword and ending with the least important one. Example: keyword1,keyword2,keyword3". Again, the field type should be "Text Field" and the field should not be hidden.

Now, let's add Smarty code to the template that will insert the meta information from the Custom Fields in the html of the pages. Open header.template (or your template's equivalent) again and start looking between the <head> and the </head> tags. If they aren't there yet, add these meta tags:

<meta name="description" content="{if $postPageTitle != ""}{if $post->hasField("MetaDescription")}{$post->getField("MetaDescription")}{else}{$blog->getAbout()}{/if}{else}{if $category}{$category->getDescription()}{else}{$blog->getAbout()}{/if}{/if}" />

<meta name="keywords" content="{if $postPageTitle != ""}{if $post->hasField("MetaKeywords")}{$post->getField("MetaKeywords")}{else}linux,tutorial,blog{/if}{else}linux,tutorial,blog{/if}" />

Note: the /> at the end is to make the tags XHTML compliant. If you're trying to be HTML compliant, replace the /> with just a >. 

You probably noticed that the default keywords in the second meta tag are of this Linux blog. You should replace them with keywords that fit with your blog. You probably also noticed that the description meta tag also contains the category description if the visitor is browsing a category. If you don't want this, remove this part:

{else}{if $category}{$category->getDescription()}{else}{$blog->getAbout()}{/if}

I recommend testing these changes in a development environment, too. Smarty is quite picky at errors (as it should, this forces us to code properly), so one little error can take down your whole blog.

Final words

Well, I hope I helped you with this tutorial. Although I checked it for errors thoroughly, it might still contain mistakes. Please leave a comment if you find one, I will correct it as soon as possible. Thank you for reading and enjoy your Search Engine Optimized blog!

Related Articles:

• Troubleshooting ./configure, make and make install Tutorial
• Success! Upgrade to Lifetype 1.2 finished
• SSH and SCP: Howto, tips & tricks

Add comment