Make the Most of Your Web Page Titles. All Three of Them.

Sometimes, the most difficult and frustrating part of writing for the Web is coming up with just the right title. That perfect title grabs readers’ attention and entices them to read further. It’s clear and descriptive so people know at a glance what it’s all about. And, of course, it uses the right keywords to help Google et al. lead the right readers to it.

And it’s short, or at least short enough.

Sometimes it seems an impossible task for just one title.

Thankfully, you aren’t limited to only one title. Every page you publish online has three titles that you can control. (More depending on how you count them.) They each appear in different places, serve different purposes and — assuming you use them honestly and ethically — can be unique.

Post title

This is what people normally think about when talk turns to titles. This is the title that, in the HTML that lies behind the web page, sits between the and tags. It’s the initial-capped, dark-gray title you see next to my smiling face at the top of this post.

Every page should have exactly one H1 title.

Page title

The page title is what appears in the tab or title bar at the top of your Web browser. It’s also the link text that appears in Google SERPs when your content is returned in a search. In the HTML, this title is buried in the page’s section, between the and tags.

With blog hosting services, the page title is usually automatically generated as either a verbatim duplication of the post title (the H1) or a set string of text — the company name or website, for example — followed by the post title.

Standard practice is that the page title should, for the most part, mimic the post title, but “standard practice” isn’t the same as “immutable law.”

Social media metadata

Lesser known are the meta tags that let you dictate the default title for your post when it is shared on social media. That’s right: When your post gets shared on Facebook, it doesn’t have to have that run-of-the-mill, search-engine-friendly, keyword-laden title that so many posts end up with.

The most common meta tags rely on Facebook’s Open Graph. Like the page title, this code goes into the post’s section.

Twitter has its own meta tags that let you customize the title that appears in a Twitter Card:

If you don’t use the Twitter markup, it should default to using the Open Graph information. Theoretically, in the absence of virtual passive-aggressive slap fights among the major players, all the social media sites use the OpenGraph markup if you have it in there.

There’s more to social media metadata than just titles, too. Cyrus Shepard at Moz does a nice job of explaining what social metadata you can embed in your code, what it does and how and when to use it. He even offers three templates for your cut-and-paste ease!

If you have complete control over every aspect of your website, some Smarticus McHelpful from your IT or online staff can help you figure out the best way to tweak that information for individual posts.

If you rely on a blog service like WordPress or Blogger, though, hacking into an individual post’s is no easy task because all that information lives in the post template. Yoast has a WordPress plug-in for adding social metadata that has been getting mixed (but mostly positive) reviews. If anyone has a found or created a similar tool for other blog services, please share!

The important thing to remember about social media metadata is that it does absolutely zilch for SEO. But an optimized title and image can do wonders for social media optimization. This metadata gives you the opportunity to ignore everything you’ve ever heard about search engine optimization and focus completely on the real people at the other end and what will draw them in.

So if you’ve ever been torn between a headline that meets SEO principles and one that could really draw the interest of a real person, be torn no more — you can use them both.