Improving Page Titles and Headlines

Linda recently posted about how meaningful titles and descriptions engage site visitors. Her post covered the importance of micro content in enticing people to read your content – particularly since content is displayed differently depending on the device used.

In this post I’m going to focus on how you can improve page titles and headlines to help people find your page and encourage them to read it.

Page titles should be clear and descriptive

Page titles help convey your primary message; its important they are clear and descriptive. This is so that your reader can quickly see what your page is about.

As argued by Jakob Nielsen, online headlines are different to printed headlines because they are used in different ways.

In print a headline is tightly associated with photos, decks, subheads, and the full body of the article, all of which can be interpreted in a single glance.

Jakob Nielsen, NNg

The contextual information that accompanies a printed headline means that it can afford to be cleverer and less descriptive. However, as pointed out by Nielsen, online headlines can appear out of context. For example they could appear in search results, news feeds, social media or navigation.

Headline text has to stand on its own and make sense when the rest of the content is not available

Jakob Nielsen, NNg

Since your page title could be displayed in a number of different places, and on a number of different screen sizes which may reduce the amount of information displayed, it’s essential they make sense out of context.

It’s also best if headlines don’t contain jargon or wordplay. For example, take a look at this example headline:

‘Cutting-edge Research’

This is vague and could be about any topic and relate to any organisation. It’s meaningless on its own as it provides no indication of what the content will be about.

Now take a look at this title:

‘Newcastle Student Unearths Rare Roman Jewellery’

This title is much more descriptive and gives a clear idea of what the article will be about. The reader can then quickly decide whether the content will be useful or of interest to them.

You only have precious seconds to grab your reader’s attention and if you waste those seconds forcing them to fathom out what your title means, they’ll lose patience and leave without reading your content.

Begin with key words

To help with search engine optimisation (SEO) your page titles should contain keywords.

For example, it’s unlikely that a vague title like ‘Students’ Union’ will appear high in search results. It will be competing with other universities who will be using the same general phrase. If we tweak the title to ‘Newcastle University Students’ Union’ this will help with SEO because the title is more specific. People will be more likely to find your page if your title contains words used by your readers.

It’s better if keywords appear at the beginning of your titles if possible, as this will help with scan reading.

Moving keywords to the front of titles increases the likelihood that they get noticed

Hoa Loranger, NNg

Eye tracking research conducted by the Nielsen Norman group shows that people read differently online in an F shaped pattern, and tend to see the first two words in a sentence.

Keep page titles short

Keeping page titles concise will also help with scan reading. Our recommendation for page titles is 50 characters (including spaces). This might not sound like many words to play with, but remember that your page title could be viewed on a small screen. If it’s too long it will run over several lines; making it much harder to read and understand.

Headline Analyzer tool

In Corporate Web Development we use a free online tool called Headline Analyzer to help write headlines for blog posts.

As shown from the screenshot below you simply type your headline into the headline field and click the ‘Analyse Now’ button. You’ll then be given a score for your headline and tips on how to improve it.

Screenshot of Headline Analyzer tool

Admittedly this tool is more useful for writing headlines for blogs than webpages. However, what I find helpful is the chance to see how my page title will look in search results. This helps me decide whether it will make sense out of context:

Screenshot of a headline displayed in search results using the Headline Analyzer tool

Have a go and see what you think!

Summary

What you call your page is crucial in helping people find it. If you use keywords that your readers will be using and if a title is descriptive of your content this will help with SEO. Furthermore, the more descriptive a page title is, the more likely people will select and read your content. This is because they will be able to quickly see whether the content is relevant to them and will help answer their questions.

References

Jakob Nielsen, Microcontent: How to Write Headlines, Page Titles, and Subject Lines, Nielsen Norman Group (NNg), 6 September 1998

Hoa Loranger, Headings Are Pick-Up Lines: 5 Tips for Writing Headlines That Convert, Nielsen Norman Group (NNg), 9 August 2015

Related posts

Share this post:
Share

How Meaningful Titles and Descriptions Engage Site Visitors

As we move into our responsive design (and T4), we’re introducing ways to make our content work better for mobile and tablet users.

This means that our editors are changing the way they write web ‘pages’.  In fact, let’s scrub that. The web page doesn’t exist anymore.

You are not writing for desktop.

The way the content looks on your computer, in your browser, is not the only way that it will look.

Writing for our new responsive design

Some of our new content types have different behaviour depending on where they are used.

You should always check your content on other devices (or use this handy responsive design emulator).

Titles and navigation

Titles as a style aren’t new, but are important when writing content for smaller screens. They might be the only thing your reader sees. They can also appear as navigation and part of search results.

It’s important that what you write makes sense out of context.

News items called ‘Congratulations’ and sections called ‘Additional Information’ aren’t going to encourage people to read more.

Teaser content

We’ve introduced teaser content into some of our new content types. It’s used here as the text overlay on the Masthead.

An example masthead style of content. Full width image with text overlay.

It’s important that it’s meaningful. It should summarise the page content as it displays in this order on mobile:

Masthead shown on mobile. Overlay text shows first on the page. the image flows second.

This content could be the difference between someone reading the page or going somewhere else.

Descriptions

We’ve used descriptions in news and events for years:

description-news-list

Adding a short description to the news content types doesn’t appear on the news article page. It does appear in all sorts of other places where news is syndicated:

  • News grids
  • News lists

This micro content acts to entice your site visitor to read more – it needs to work for you.

This example is vague:

  • Title: Call for Papers
  • Description: Submit now

This example gives some context, you know if it’s for you and if it is, you want to read more:

  • Title: Call for Papers: Environmental Planning
  • Description: Submissions close on 31 October. The School encourages researchers to read the submission requirements.

Introductions

We’re aiming to make sure all core pages to have an introduction. The intro style works well on mobile. It pulls out (and styles differently) the first piece of content.

We recommend a focused 50-word statement about what the page covers. It helps users decide whether to read more. (50 words sit well as a chunk of content viewed on most mobile screens.)

Expandable/mobile collapse

We’ve a new expandable content style that allows us to hide content. Users have to choose to select to read the content – they can’t see it at a glance.

This means that the heading you choose for the content is important:

Example expandable content - users have to click to see more.

We don’t want to see vague terms like ‘More information’, ‘Additional details’, ‘Other’.  If the content contains details about your facilities call it ‘Facilities’ or even better ‘Libraries and laboratories’.

Using terms that are more specific, help your readers find what they need.

Write chunks of content

We’ve had some comments about how it feels more complicated and takes longer to build up web content.

Writing for mobile forces you to think about the order of your message.

We could have slapped a responsive template on your desktop-focused content. If content was too long we could have hidden it in expandable boxes (or truncated lengthy titles).

The page would still look okay on desktop (it wouldn’t work very well on mobile).

Rewriting your content and thinking about how people read on mobile, makes sure your users don’t get a sub-standard experience.

Everyone who wants to read your message, can.

Get in touch

Let us know if you need help in reworking your content (University Login required) or post questions in the comments.

Share this post:
Share

How Micro Content Can Immediately Improve Your Website

Micro content isn’t teeny tiny type on a page – it’s actually the words we put on websites for things like buttons, tabs, menus, even page titles.

Recently we looked at the micro content we used on the 404 error page for the Postgraduate (PG) website.

Our analytics showed some people who followed a broken link (a deleted page) arrived at this error page and then immediately left the website.

Okay, so those people didn’t find the page they were looking for, but we follow best practice on our error page. We very politely give helpful links to the search, homepage and sitemap so people can still try to find what they are looking for.

So why did they leave immediately?

Review micro content

A quick review of the error page micro content revealed it was perhaps a bit negative:

Our old, negative, 404 error pageOur loud and proud micro content at the beginning of the page, didn’t encourage people to read further and use the links we had so helpfully provided.

The page was also a tad long to scan read so we changed it to:

Our new, confident and friendly, 404 error pageBy changing the micro content, we also made the error page follow the confident but friendly PG tone of voice the rest of the website uses.

Testing 1 2 3

We had several versions of the new error page, and ran these past a few people. The feedback resulted in a mashup of the different versions. Overall it’s a page that everyone felt works better.

Outstanding results

We added Google Analytics to the error page so we could tell if/when people started using the links instead and staying on the website… we had a brilliant results.

People stayed on the PG website – and six actually went on to start the application process!

So potentially, six new postgraduate students gained by changing micro content – that’s powerful stuff.

Take a look at the micro content on your website – is it saying what it needs to in the most effective way?

Have a go! What improvements can you make to your micro content?

Read more

This short but effective article, The first rule of web design by Seth Godin is worth a look. Its about making sure you use the right micro content for actions on your webpages – it certainly makes you think.

Share this post:
Share