Mindless Philosophy






Simple SEO Friendly Umbraco Page Titles

by Darren Street

Created on: Monday October 21, 2013

1 comments

It’s easy to be lazy with Umbraco. " I'll set a page title after Tiffin! ". I totally understand. We have all been there. After all, setting the page title to the page name will do....won't it?

Well, I am afraid that it’s just not good enough for Google. No sir. Not one little bit.

Simple SEO Friendly Umbraco Page Titles

 First off, the title should be no more than 70 characters including spaces, so that blog page called “One Thousand and One methods to Calculate the Total Mass of the Sun in Seven Easy Steps“ won’t do.  You have also got to get keywords in that title too, and as the Page Title appears in the history of your browser, your site Domain Name would be good to get in there as well.

Phew!

So here is my flexible solution which should handle your Page Titling ills and keep you spanking clean with Mssrs Bing & Google.

 

Get in your Domain Name.

First off, you need some Page Properties creating. We will use Umbraco recursion to do all the heavy lifting here.

On the Document Type that holds your topmost root node (mine is called create website) , create a page property called “SiteName”. Set it to Textstring. It needs to be assigned to the node that is the root of your website because all the pages will inherit this value.

Save the property and switch back to the Content taband click the Root node. You should have a shiny new property called Sitename.

In this property insert your site name like this and make sure you note the number of characters. We will need this value later:


 | yourURL

For Example mine looks like this:


 | refreshwebsites.co.uk  (this is 24 characters in length   counts as one character).

Get in your Keywords.

Always a good idea to include some keywords into your title to re-enforce what your site is all about.  I use three in my title “Responsive Design Oxford”.

Within your Document Types, select the root document type (or the one that all the pages inherit from).

This is the opposite of the first step.  In that step we created a property that was set only once. However as this was designated at the root of the website this property is available to all pages by the magic of Umbraco recursion.

In contrast, we want to create a few new properties that will be available on every page of your website. This doesn’t mean we need to set these properties on each page, but it does mean we can do so if we want to.

Create the following new properties and assign as Textstring:


PageKeywords
Page Name
PageNameSeparator

Save the Document Type and switch back to the Content tab.

Populate the content.

The trick here is to setup defaults so that all your web pages will default to a value further up the tree unless one is set at the page you are working on.

Click your root node. You should already have your Site Name configured from step 1.

Populate the following fields with appropriate text (I’ll use mine as an example):


PageKeywords -      “ Responsive Design Oxford”  ( Ignore quotes but add a space before the R.) 
Page Name -          Leave Blank 
PageNameSeparator – “ |” (That’s a space and a pipe sign.)

Save your page. That text will configure all your pages. Next we’ll create a Razor statement to pull the text together.

Sharpening the Razor.

Go to the Developer tab and select Scripting Files.

Create a script. Call it PageTitle, select Empty Template and make sure you select the "Create Macro" switch.

Copy this script into the file, making sure you overwrite any existing content.


@using umbraco.MacroEngines
@inherits umbraco.MacroEngines.DynamicNodeContext

@{DynamicNode pages = @Model;

  var webPageTitle = @pages.Name
      + @pages.GetProperty("_PageNameSeparator ").Value
      + @pages.GetProperty("_PageName").Value
      + @pages.GetProperty("_PageKeywords").Value;

    @Library.Truncate(webPageTitle, 45);

}

Ok so what’s happening here?

First off we are creating a variable called pages to the current page object @Model using DynamicNode. This should work on Umbraco 4.7 and up I think.

Next we are creating a variable called webPageTitle and assigning three values from the current page that we created earlier. The fourth value @page.Name  is a built-in Umbraco property for the current page name.

But wait I hear you say.

Only the root pages have the values in our content tree.

Fear not. Notice the “_” underscore before the property name “ eg: _PageName”. This means, in pure Umbracian, that if a value is not found on the current page, go on up the tree until you find one.

And finally, truncate the whole string to 45 characters.

Why 45 characters?

Well if you remember the SiteName was 24 characters. The wonderful truncate method appends a spiffing ellipsis taking up 1 character so 45 + 1 +24 = 70 wonderful Google loving compliant characters.

Save the razor and switch to the Settings  tab.

Nearly Done.

Select the Templates object and find your masterpage that has your HTML HEAD section within it.

Find the <Title> tags and copy in the following code:


<title>
<umbraco:Macro Alias="PageTitle" runat="server" />
<umbraco:item runat="server" field="SiteName" recursive="true"></umbraco:item>
</title>

This is obvious enough but let’s review what this is.  First is the macro we have just created and the second line is a standard Umbraco property declaration configured to display the SiteName property. The important thing to note here is the attribute, recursive="true". This is very important as it enables a single value to be displayed on each page regardless of whether the property exists within its document type. As this masterpage template is the base HTML for all pages on your site,  all pages will inherit this value.

Save the template and you are done.

Let's test it. As an example, go to my webpage Portfolio and look at the title:

It says:


Portfolio | Responsive Design Oxford | refreshwebsites.co.uk


Portfolio                         Page Name
|                                 PageNameSeparator
<Blank>                           PageName
Responsive Design Oxford          PageKeywords
| refreshwebsites.co.uk           SiteName

…but this is less that 70 characters. What happens when we exceed the 70 character Title limit? Go to a blog page and look at the title:


6 of the best Umbraco Properties for all webs… | refreshwebsites.co.uk

Here we only show the PageName and the SiteName. Note that the SiteName is never truncated as it wouldn’t make a whole lot of sense if it was.

And finally.

As I think a Homepage called Home doesn’t have any SEO impact,  I called my homepage “Responsive”. However this page title isn’t very interesting or informative.


Responsive | Responsive Design Oxford | refreshwebsites.co.uk

Rather bland and bog standard. What can we do to spruce up the old girl? Well as the title properties are available on all pages let's see what we can do.

Remember we have three properties to play with. So I set the following:


PageKeywords - Left Blank
Page Name – “Umbraco Website Design Oxford”
PageNameSeparator –  “&nbsp;”

The result is a page title of:


Responsive Umbraco Website Design Oxford… | refreshwebsites.co.uk

Which although isn’t perfect is better for SEO purposes and after all that’s what this blog is all about.

 

Happy coding.

1 comments




Greoning commented on 22 Oct 2013


Not sure about 70 characters. I read last week that Bing where truncating at 65 characters. They seem to be changing there mind every day.

Why do you think its more important to get in your domain name? Isn't a set of appropriate keywords going to work better for you.

Great tut though.



Have your say


Sorry this post is no longer accepting comments.