iFinity Blogs 

Changing a Page Title with Javascript to update a Google SERP Entry

by Bruce Chapman on Thursday, October 4, 2012 12:58 PM

When it comes to SEO knowledge about what can and can not be done with Google, a basic rule of thumb is : beware of what you read and how old it is.  Once upon a time, it was regarded as common knowledge that Google can’t read querystrings on Urls – OK, I’m going back a way with that – but of course we all know that isn’t true nowadays.

Another common rule of thumb is that Google can’t read or execute javascript in a page.  Well, I’m here to tell you that Google can – and does – read and execute Javascript on a page.

The Problem

I’ve done a few posts on setting up your DotNetNuke site with the new DotNetNuke social features, which includes configuring your DotNetNuke site to be a social network, and how to set up Vanity Urls for your DotNetNuke site using Url Master.

That’s all good, but there is a shortcoming in the DotNetNuke user profile design in that it doesn’t change the page title to reflect the current user that is being displayed.  The page title stays at ‘User Profile for ifinity.com.au’, no matter which user is currently displayed. 

image

Above : SERP Title is derived from the DNN Page Title, which is not user-specific for profile pages.  This is taken from about a month ago.

(Do you want your Author profile to show up for your pages like in the screenshot?  See my post on getting your Author Profile to show in Google Search Engine results)

What we really want is for the Page Title to show something specific to the content on the page.   Assuming we want good SERP results for specific User pages, which is definitely the case if you have a Linked-In style directory.   Or even to avoid having Google Webmaster Tools not complain that we have x,0000 duplicate Page Titles for our pages.

The Solution

Initially, I thought the solution was going to have to be writing some little module that I dropped on the profile page(s) and which set the page title directly.   (Short of getting the Core team to change the User Profile page code).   But then I came across this little blog post : Use Javascript to generate SEO Friendly Title Tags – so I thought I’d give that a go.

The key, as outlined in the post, is to not get too fancy with the javascript.  I don’t know exactly how much javascript Google reads and interprets, but I’m guessing relying on the jQuery framework mightn’t be a good idea.

So, with that in mind, I wrote out a basic piece of javascript and put it in a text/html module at the top of my page, to get it executed as early as possible.

The code is this:

<script type="text/javascript">document.title = "iFinity User Profile - " + document.getElementById("dnn_dnnUSER_registerLink").outerText; </script>

This would then set the page title to the person of which you’re currently viewing, by simply pulling the text for the ‘Register’ link.

This worked great as far as viewing the pages went :

image

Above : The Page Title changed by Javascript

I left that go for a while, to see what happened in Google.

And look!

image

Above : New Google SERP For the same link, taken at time of this blog post.

Success?! 

Wait, no so fast…

The Title is wrong.  It should be ‘iFinity User Profile – Bruce Chapman’

(NOTE: You can see here my new search engine sitemaps have outranked my old search engine sitemaps – interesting..)

This is just the Google Author changes making their way across the web.  In fact Google seems to have gone mad and Author-tagged any page it finds ‘Bruce Chapman’ on.   And to think I felt it was an achievement to get just one Author tagged-SERP!

Those awake in the back row would have put their hand up and pointed out the obvious problem – the ‘dnn_dnnUser_RegisterLink’ only shows the logged-in user, not the user in the profile page.  Google always crawls the web as an anonymous user, so won’t see the Display Name of the user when visiting the user profile.

A quick google of some other User profiles shows that this is true:

image

Apologies to Chris Hammond for using him as a guinea pig.

While this still brings up the Bruce_Chapman Url, what we can see is that the Page Title for this user profile has changed (ignore the fact it’s showing my Author profile again) – it says ‘iFinity User Profile – undefined’

That means that Google has read the javascript and changed the page title – even though my javascript was wrong (the anonymous view page doesn’t find the element, so returns ‘undefined’)

With that result, I’ve been spurred on to test this out further. 

The problem is finding the current User Profile name on the page.  Because the User Profile name on the page is updated by Knockout.js doing a web services callback to the server to load the user profile information.   So you can’t just stick some javascript in the header to find and load the Display Name from somewhere else in the page, because that in itself is being loaded by javascript.

But inspecting the SERP here, I can see that it has matched ‘Chris Hammond’ from the Journal feed on the user profile page.  Which means that Google must be executing the Knockout code to load the dynamic content for the profile page.

The New Experiment

So now I’ve updated the code on the page to this:

<script type="text/javascript">setTimeout(function() { document.title = "iFinity User Profile - " + document.getElementById("UserDisplayNameHeader").outerText;}, 1000); </script>

(Hint : if you’re adding some script like this using a plain Text/Html module, then I suggest switching out of ‘rich text editor’ view and into ‘basic text box’ with ‘text’ view – otherwise your script will be stripped out when you update)

You’ll note that the script is much the same, except now it’s surrounded by a ‘setTimeout’ call, which waits for 1 second, then updates the page title.  This should give enough time for the knockout to update the page title, but will it be enough for Google to read the new title and index it?

You can see the new Page TItle just by going to http://www.ifinity.com.au/Bruce_Chapman (or click on your own profile, if you have an account on this site)

Time will tell.   You can google it yourself now to find out if it has been updated.

Looking forwards

This technique is not limited to user profiles.  If you have any type of 3rd party content that doesn’t update the page title to the way you like it, you should be able to experiment with changing the page title.   This technique could be tried with blogs, e-comerce modules, forum posts – anything that isn’t updating the page title to your liking.  It should be possible to also apply this technique to updating the page description as well, something else I will try as time goes by.

The reason I have posted this before the experiment is complete is to hopefully encourage others to try similar experiments with their own sites to see if this works OK, and can be used to expand the ability of DNN sites to be SEO optimised even when you’re up against a code-wall, where the underlying code doesn’t do exactly what you want.  There’s always a way, after all.

Blogs Parent Separator Crafty Code
Author
Bruce Chapman

The craft of writing code. The outcomes from being crafty with code. Crafty Code is tales from the coding bench.

3 comment(s) so far...

Will Strohl 10/4/2012

Excellent blog post as usual, Bruce. Love this kind of stuff! :)

 
Anonymous 10/24/2012

Perhaps I'm using an old version but I found using the View Profile Module worked.<br /><br />I set the template to include ( replaced with [] ): <br />[h2 id="UserDisplayNameHeader" class="Headline"][USER:DISPLAYNAME][/h2]<br /><br />[script type="text/javascript"]document.title = document.getElementById("UserDisplayNameHeader").outerText + " Profile"; [/script]<br /><br />(Sorry about the triplicate)

 
Bruce Chapman 10/24/2012

@lance if it's pre 6.2 it will be different. Let me know if it makes a difference with search results.

Bruce Chapman
Hi, I'm Bruce Chapman, and this is my blog. You'll find lots of information here - my thoughts about business and the internet, technical information, things I'm working on and the odd strange post or two.
Connect with Bruce Chapman on Google+

Share this page
Get more!
Subscribe to the Mailing List
Email Address:
First Name:
Last Name:
You will be sent a confirmation upon subscription

Follow me on Twitter
Stack Exchange
profile for Bruce Chapman at Stack Overflow, Q&A for professional and enthusiast programmers
Klout Profile

Page Tags