Joomla 2.5 Page Title Wrong in Single Article View

We hit an interesting little snag the other week while using Joomla 2.5 - let me say from the off that we've followed Joomla 2.5 development closely and was even involved within the Beta testing. We haven't had many clients come to us who had already made the decision to utilise it and we've only had one client site so far where the decision was made to build on 2.5 from the off.

Let me also add that it doesn't matter how much you toe dip with a CMS, it is only when you are in the nitty gritty of building out a whole site from scratch that you hit the real gotchas.

I also think that browser changes over the last year or so are part of the reason we haven't picked up on this sooner. Firefox, Chrome and IE now routinely hide the 'Title bar' which used to show the title of the currently displayed web page. Now you have to deliberately go looking for the page title and it takes an extra click or three.

Lee, one of the team in the office, spotted that we had the wrong title within a site we are currently building out. Questioning whether we had misconfigured something or whether the template in use on the site had an error within a template override so we quickly checked another recent Joomla 2.5 site - one that is all but finished but not actually launched yet.

We saw the same issue in both sites.

How to reproduce the Wrong Title in Joomla 2.5 issue

Create a new article in Joomla - give it a reasonable length title:
   For example: "Decent Length Title - Search Engine Optimised"

1-add-article

Create a new menu link to that same article
   Menu Manager -> Main Menu -> New -> Article -> Single Article Layout

2-create-menu-item-short-menu-text

  • Enter ONLY the required information.
  • Menu Item Title (The text that will appear in menus for this link - keep it short) 'Short menu text'
  • On the right click the button to select which article to link to: select your new article
  • Specifically - do NOT set the 'Browser Page Title' within 'Page display options'
  • Now save and exit - do no more.
  • Now on your site navigate to the page in question by clicking on the 'Short menu text' link in the menu.

3-menu-item-in-site

As expected the heading within the page shows the full article's title.

4-article-in-front-end

Now view source - and look for the <title> tag. Do you see that?

5-title-tag

Your page that shows your 'Decent Length Title - Search Engine Optimised' article has a title of ''Short menu text'. In terms of Search engine optimisation and just general web user experience that is awful. When someone sees your page listed in search engine results and all they see is 'Short Menu Text' (or in the real world showing 'About us' instead of 'About XYZ corporation supplier of UberWidgets'. This is, to put it politely, massively sub-optimal. As the Search engine results heading and link text it tells them nothing.

This is broken. I tell you - absolutely totally and utterly broken.

This is a major change in behaviour from Joomla 1.5, and as far as I remember from Joomla 1.0 and probably Mambo which I started using sometime aroundor.

Surely we aren't the only users who find this behaviour to be incorrect.

Joomla overrides the correct long form of the title with the short form optimised for menu links with limited space. And no-one else noticed, or no-one else thinks it is an issue. With all due respect - please someone tell me that this isn't the case.

Has anyone looked at the demo content in a standard 'out of the box' Joomla install. I can't find an article with a title longer than 3 words - which are identical to the menu text. Coincidence?

Wondering Why More People Aren't Shouting About This

Many thanks to Seth Warburton - - @nternetinspired and Victor Drover - - @vdrover  for joining in the conversation on twitter and suggesting ways we may have been missing something and for suggesting possible workarounds / fixes.
Later I found a related discussion in the Joomla forums - and one of the participants, Kevin aka @Webdongle, moved the conversation to the Joomla Bug Squad, but again there isn't much interest.

I'm not sure why more people don't seem to be chiming in on this issue.

  • Perhaps there aren't many experienced users who have moved to Joomla! 2.5
  • Perhaps no-one is using com_content any more - preferring one of the various CCKs.
  • Perhaps no-one is adding a single article view to menus
  • Perhaps everyone is happy to override the short menu text and re-insert the original article title
  • Perhaps it is a none issue and we are missing something?

Workarounds for the wrong page title issue

Now there are workarounds - but so far I'm yet to find the perfect solution, but read on for the one I consider the most workable so far.

Manual workaround for wrong page title issue:

Re-enter the article's title within the Menu Advanced Properties over on the right.

It was suggested that one should enter the 'Page Display Options' of the menu item and apply a new title - in other words look up the full title of the article and type it in AGAIN within the menu item. Seriously! In an era when developers are trying to streamline code with the DRY principle (Don't Repeat Yourself) we are expected to build out websites with say 100 or 200 pages and we have to go to the extra steps of looking up the full page title and repeat ourselves by re-entering it.

Automated workaround for wrong page title:

Use a third party SEF add-on such as sh404SEF. I haven't tested this as typically we don't use third party SEF extensions. In our opinion the overhead is too great. Too many extra database calls, too much extra data stored in the database. Most significantly periodically they go 'bad' and throw away all your stored urls and they rebuild them from scratch different to how they were. But if you are using, or thinking about using, a third party SEF extension check to see if it can fix this for you.

Do it ourselves - with a template override:

We felt it must be fairly easy to either re-program Joomla to do it right. Either a plugin or an edit to the code that outputs the HTML for the single article view. We decided to go with the latter - though not editing (hacking) core Joomla code as that is frowned upon - and with good reason.

The approach we decided upon was to create a template override. The Joomla framework utilises the MVC pattern and is programmed in such a way to allow template developers to override the output of components. To do this all that is needed is to copy a file from within Joomla, and place it in the right place within your template's folder structure.

If you are following along and need to implement this fix yourself, please start by checking whether you have a this file in the following location:
/templates/your-template/html/com_content/article/default.php

If you already have such a file, great that's what we are going to edit. If you do not have a file with that name, in that location don't worry - we just need to navigate to
/components/

Copy that file to your local machine, and then upload it to
/templates/your-template/html/com_content/article/default.php

Fortunately the templates we are using for our client sites already have template overrides in place, so things were fairly easy.

Now the Joomla framework allows us to set the title tag at any point with a simple two step procedure:
Step one: grab a reference to the document object.
Step two: instruct the document to set the title to your chosen title.

Don't worry if you aren't a programmer - I'm not a real one either - but I sometimes play one on the internet.
$document=& JFactory::getDocument();
$document->setTitle( /* put title in here */);

All we need to do is inject these two lines into the file in question - once we have found a suitable point to do so. We need the point at which the article title is referenced, because we need to access it, and send that value to the document to become the html document's title.

In our template override we can see the following code:
$this->item->title

See that - that's our hook - that is how the article title is accessed - via that little snippet.
So somewhere within this file we can insert our two lines - using the above snippet to set the document title to be the same as the article title.
$document=& JFactory::getDocument();
$document->setTitle( $this->item->title );

I'll provide instructions on how to do this for those of you who have created your own template override by copying the core Joomla default.php file.

Find this block of code in your file:
// Create shortcuts to some parameters.
$params        = $this->item->params;
$canEdit    = $this->item->params->get('access-edit');
$user        = JFactory::getUser();
?>

and insert the two lines from above before that closing ?>
// Create shortcuts to some parameters.
$params        = $this->item->params;
$canEdit    = $this->item->params->get('access-edit');
$user        = JFactory::getUser();

Below is the final code that should be placed within the template override PHP file.
// Wrong Page Title 'fix' from Web Development Consultancy

$document=& JFactory::getDocument();
$document->setTitle( $this->item->title );
?>

Save the changes and re-upload the file to the server.
Refresh your page and view the source. You should be able to see your title is now used in the <title> tag.

We are still keen to find support from experienced, and influential, Joomla community members who can perhaps help persuade the Bug Squad that this is a change that needs reverting to the old Joomla 1.5 behaviour.