What Is a Website Title? Understand and Optimize Title Usage on Your Site

You know you need to use an appropriate title for your site, but you’ve seen and heard conflicting information about website titles. The first thing you’ll notice is that there are several different terms used when discussing titles.

So your first question might be:

What is a website title?

A website title is typically the HTML title tag that appears at the top of a site’s code. This is what Google normally uses as the website’s title in search results, and it’s also what will appear in the browser tab of a user’s browser.

However, when you’re building a WordPress website, you’ll also encounter the “title” terminology in other places on your site, which can make it a bit tricky to understand how everything connects together.

You might see the “WordPress Site Title,” the “title tag” or “SEO title,” the “article title,” the “image title,” and maybe more.

And here’s the thing:

All of these different website titles are important! So, you need to not just understand what the differences are but also the optimal way to use each type of title.

That’s what this post is for. Below, we’ll introduce you to the definitions and optimal usage for four different types of titles:

Site Title – in WordPress, this is a single name for your entire website. Typically, it’s your brand name, but you can tweak it if needed.
Website title/HTML title tag – each individual page on your site will have its own website title tag that’s used for Google search results and browser tabs.
Article title – each blog post or page that you publish on your site will have its own article title. This will often be the same as the HTML title tag, but it appears differently in code, and you also might want to make it unique in some situations.
Image title – you can optionally add a title to each image that you use in your content.

Understanding these terms will help you create a cohesive identity for your website, optimize for search engines, and create a great user experience for your human visitors.

Open a store. Launch a business. You can. You will. We'll help. Invent the world's greatest cat food, save a rainforest, start a needlepoint club. Whatever it is, it's going to need a website - that's where we come in. Start your website.

What Is a Site Title?

In WordPress, the Site Title is a single name for your website. Typically, it’s the same as your brand name/domain name. You can think of it as the textual equivalent of a site’s logo.

For example, the Site Title for the popular food blog Pinch of Yum (pinchofyum.com) would be “Pinch of Yum.”

However, you can also slightly tweak your site title if preferred. For example, the Site Title of the popular travel blog Nomadic Matt (nomadicmatt.com) is actually “Nomadic Matt’s Travel Site.”

Your Site Title plays an important role in establishing a cohesive identity for your site.

Some WordPress themes will even display the Site Title alongside a site’s logo. Whether or not the text from the Site Title is visible to human visitors on your site depends entirely on which WordPress theme you’re using.

Even if your theme doesn’t display the Site Title publicly, the Site Title might still appear in some behind-the-scenes schema markup, such as defining the title of your site for when it’s shared on social media.

However, your Site Title is not as important for search engine optimization (SEO), as the HTML title tag on each page does most of the heavy lifting when it comes to SEO. We’ll cover that next.

How to Set Your Site Title in WordPress

Open your backend dasard.
Go to Settings → General in the sidebar.
Edit the Site title box to adjust your site’s title.
Click the Save settings button to make your changes live.

Here’s an example of what the Site Title might look like on the front end of your site with the Al Dente theme:

Srceenshot of frontend view of WordPress site title

Again, not all WordPress themes will display the Site Title. Some might hide the Site Title completely or replace it with your site’s logo.

What Is an HTML Title Tag?

The HTML title tag is a small bit of code that defines the unique title of each page on your site. It identifies the page and describes what the page is about for both human visitors and search engines like Google.

When most people say “website title,” they’re referring to the HTML title tag.

While the title might not appear on the page itself, the title will appear in various user-facing areas, such as in a web browser’s title bar and tab list.

Google will also typically use the text from your page’s HTML title tag as the title of that page in Google’s search engine results pages.

In some situations, Google will use its own title, though, so there’s no guarantee that Google uses the exact text from your HTML title tag.

In addition to seeing them called HTML title tags, you also might see them called “SEO titles, “”meta titles,” “page titles,” and other similar terms. All of these terms are referring to the same thing.

Let’s dig into HTML title tags in more detail by discussing the following:

What the HTML title tag looks like in code
What the HTML title tag looks like in search engines
What the HTML title tag looks like in web browsers
Best practices for writing an effective title tag
How to set the HTML title tag in WordPress

What the HTML Title Tag Looks Like in Code

While you won’t need to work directly with code if you’re using WordPress, it’s still helpful to understand what’s going on behind the scenes with the HTML title tag.

The HTML title tag appears in your site’s backend code near the top of the page, typically after the opening <head> tag (which defines the page’s header area).

Here’s an example of the HTML title tag for our post on how to create a paid newsletter:

<head>
<title>How to Create a Paid Newsletter: The Complete Guide – Go WordPress</title>
</head>

In code, the ” – ” sign is replaced by ” – “, but human visitors will see the actual ” -. “

What the HTML Title Tag Looks Like in Search Engines

In general, search engines like Google and Bing will use the text from your page’s HTML title tag as the title of the page in the search engine’s results pages.

However, this is not guaranteed. In some situations, search engines will shorten the text or rewrite it completely. Unfortunately, there’s no way to completely avoid this.

Most of the time, though, the search engine will use your page’s HTML title tag directly.

Here’s how the same post from above looks like in Google – you can see that Google did remove the ” – Go WordPress” bit from the end of the title, but otherwise used it word for word.

Example of what an HTML title tag looks like in Google SERPs

What the HTML Title Tag Looks Like in Web Browsers

Web browsers like Chrome, Safari, and Firefox will also use a page’s HTML title tag as the text for the browser title bar and tab.

For example, you can see how Chrome uses a truncated version of the title in the tab

Example of what HTML title tag looks like in browsers

Best Practices for Writing an Effective Title Tag

Because your site’s HTML title tag will often appear in search engines, it plays an essential role in helping you get as many search engine clicks as possible.

Therefore, you’ll want to put some effort into writing an optimal title tag for each piece of content that you want to rank in search engines.

To help you do that, here are some best practices for writing effective website title tags:

Keep it around 55-60 characters – try to keep your title tags in the 55-60 character range (70 at maximum). If you go above this, Google might truncate your title in search results pages. Google is also more likely to rewrite your title if you make it too long. On the other hand, going too short (e.g. 20 characters) is wasting space. That’s why 55-60 characters is usually the sweet spot.
Try to use your main keyword (but don’t “stuff keywords”) – to improve search rankings, you should try to naturally include the page’s main keyword in the title. However, don’t go overboard and “stuff” the title with tons of keywords. You want to write for humans first and foremost while still keeping search engines in mind.
Make it engaging – you want your title to attract readers’ attention and convince them to click on your website over other people’s websites.
Avoid “spammy” signifiers – beyond keyword stuffing, you’ll also want to avoid other “spam” indicators such as too much capitalization, multiple exclamation points, and so on.

For more details on writing quality HTML title tags, check out our full post on how to optimize title tags for WordPress sites.

To help you see what your title tag might look like in search engines, you can use this free tool from Mangools.

How to Set the HTML Title Tag in WordPress

If you’re coding your website from scratch, you’ll set the HTML title tag by adding it directly to your site’s code.

However, if you’ve built your website with WordPress, you can set each page’s HTML title tag from the WordPress editor.

By default, WordPress will use the text from the title of the post or page in the page’s HTML title tag.

However, if you’re able to install your own WordPress plugins (which you can do on the WordPress.com Business plan and up), you can also install a dedicated SEO plugin like Yoast SEO or Rank Math to be able to set the HTML title separately from the title in the WordPress editor.

This can give you a little bit more flexibility in setting up your SEO title, especially if you need to shorten the title it defaults to using.

With the WordPress.com Business plan and up, you can also set your HTML title tag using Jetpack’s built-in SEO tools if you’d rather not install a separate SEO plugin. Jetpack calls it the “SEO Title”.

What Is An Article Title?

In addition to adding a page’s HTML title tag, you’ll also typically add an article title to each post, page, or other piece of content on your site.

Whereas the HTML title tag does not appear to human visitors in the actual page content*, your article title will be visible to human visitors directly in your page’s content.

*A piece of content’s HTML title tag will be visible to humans in the browser tab or search results pages, but it won’t actually appear in the body of a page on your website.

In some cases, your article title might be the same as the HTML title tag. However, even if you use the same text for both the HTML title tag and the article title, they’ll be represented differently in your site’s code.

If you’re using WordPress, WordPress will automatically handle this code for you – there’s no need for you to manually do anything. However, if you were coding a website from scratch, you would need to add them separately.

What the Article Title Looks Like

In the WordPress editor, you set the article title in the title box:

Example of an article title on. the front end of a site

On the front end, the article title typically displays at the top of the page in a large font. The exact styling and location of the article title will depend on which WordPress theme you’re using.

Here’s an example of what an article title looks like with the Al Dente theme:

Example. of how a theme displays an article title

However, whereas the text of your HTML title tag goes inside the <title></title> code in your site’s <head> section, the article title goes in the body of your site’s code and typically* uses the <h1> heading.

For example:

<h1>Your article title here</h1>

Some WordPress themes will use the <h2> heading tag for the article title instead. But in general, it’s more common for a theme to use <h1>.

How to Approach Article Titles vs. Title Tags

At a high level, both article titles and title tags serve the same general purpose – convincing people to read your content by providing an engaging summary/hook of the content.

As we mentioned above, many sites will use the exact same text for both the article title and the HTML title tag.

We generally use this approach here on WordPress.com/Go, though we do append our Site Title to the end of the HTML title.

For example, in our “How to create a paid newsletter post,” we use the following:

Article title: How to Create a Paid Newsletter: The Complete Guide
HTML title tag: How to Create a Paid Newsletter: The Complete Guide – Go WordPress

For your site, it’s totally fine to do the same. In fact, that’s probably the best option in most cases. There’s no need to overthink it!

One thing to consider is that the article title does not have the same constraints on length that the HTML title has.

So while you should try to keep your HTML title tags to 55-60 characters, you’re free to go a little longer in your article title if needed.

However, if you use a different HTML title tag and <h1> article heading, Google might be more likely to rewrite your HTML title tag with its own version.

Typically, Google will actually use your article title in its search results pages instead of the HTML title tag in cases when the HTML title tag and article title are different.

What Are Image Title Attributes?

Beyond the text-based website titles that we’ve focused on so far, you’ll also encounter the title terminology when you’re adding an image to your website.

An image title, along with image alt text, plays an important role in providing textual context and description for the image that you’ve added. Each image can have its own unique title.

Let’s first talk about where the image title attribute appears. Then, we’ll go over some tips on how to properly use image titles and the differences between image titles vs. alt text.

Where You’ll Find Image Titles

On the front end of your site, a human visitor will see the image title if they hover their mouse over the image. Here’s an example of what it looks like in the popular Chrome web browser.

Example of front end view of a title attribute on mouse hover

To set the image title, you can use an option in the WordPress editor or add the title directly to your site’s HTML if you’re working with code directly.

In WordPress, you’ll see the image title attribute box in the Advanced section of the settings sidebar of an Image block (or potentially other blocks that include images).

Here’s an example of what it might look like:

WordPress editor title attribute form in sidebar advanced section

If you were working directly with code, you would add the image title using the title attribute.

Here’s the basic HTML to display an image:

<img src="img_file.jpg">

To add the title, you would add the title attribute as follows:

<img src="img_file.jpg" title="Your image title goes here">

Image Titles vs. Alt Text

In addition to image titles, you can also add another type of text attribute called alt text or alternative text.

Here’s how to think about the difference between image titles vs. alt text:

Alt text – if the image were to completely disappear or become invisible, this text should be a suitable replacement. Basically, if your friend asked you to describe the image because your friend couldn’t see it, what would you say? That’s what you should put in the alt text.
Title – the title adds extra information about the image. It lets you build on the content of the image to provide additional information or context beyond what’s immediately visible in the image.

You should add alt text to every single image on your site, as it’s an essential part of making your website accessible to visitors using screen readers or other assistive devices.

On the other hand, using image titles is optional, and you will see some sites completely skip adding image titles.

For example, let’s say you were writing the image alt text and title for the image of the horse from our example above. Here’s what you might put:

Alt text – A white horse walking in a field
Title – This was the horse from the movie, Hidalgo

The Benefits of Using Image Titles

While using image titles isn’t as important as adding image alt text, there are still some benefits to using image titles.

Most notably, image titles can play a minor role in improving the search engine optimization of your pages by providing additional contextual signals to Google.

Image titles can also help you improve user experience by giving you a way to provide readers with more information about an image.

Many screen readers will also read image titles (along with image alt text), so adding more information to your image titles can also play a role in accessibility.

However, some screen readers will only read the image title attribute if a user specifically tabs to the image element. In general, image alt text is more important from an accessibility perspective.

How to Properly Use Image Titles

Don’t use it to replace alt text – remember that alt text is essential for all websites to improve accessibility. You should never use image titles as a replacement for alt text.
Add context – your image title should provide additional context to what’s already visible in the image.
Include keywords (if natural) – if there’s an opportunity to naturally include a keyword in the image title, it can provide another small signal to Google about the content of your page. Avoid stuffing in keywords just for the sake of SEO, though.
Keep it short – because the image title typically only appears when a user hovers their mouse over the image, you only have a limited amount of space to work with. Given that, it’s important to keep your image titles short and to the point.

How Do Different Website Title Types Interact?

If you want to make your website the best it can be, you’ll incorporate all these different title elements into a cohesive structure.

In WordPress, it starts with your Site Title, which is the overall name and branding of your website.

Then, each page will have its own HTML title tag, AKA the SEO title, the meta title, and so on.

The title tag is generally what convinces readers to click on your site when they’re browsing search engine results pages. It also provides important context about the content of your page, which can help you actually rank on those search results pages.

Your title tag may or may not be the same as the article title. Some people use the same text, while others take advantage of the extra space that the article title affords to provide additional information.

In addition to the <h1> article title, you’ll also likely include other subheadings to divide your content – <h2>, <h3>, and so on. These are not technically titles, but they do fit within the heading hierarchy.

Finally, you might use image titles to provide additional information about the images that you use in your articles.

Common Mistakes to Avoid With Website Titles

To use these various website titles effectively, here are some mistakes that you’ll want to avoid:

Don’t engage in keyword stuffing – while website titles are a great place to include keywords if they naturally fit, you should never stuff in keywords just for the sake of SEO. Your website titles should always be written for humans first.
Don’t make your titles too long – regardless of title type, you’re almost always working with limited space. As such, it’s important to keep your titles short and to the point, whether it’s your Site Title, HTML title tag, image title, and so on.
Don’t forget to set the SEO title (HTML title tag) – if you want to maximize your traffic from search engines, it’s essential to write an optimized HTML title tag/SEO title for each piece of content.
Don’t confuse image titles with image alt text – for accessibility purposes, every image on your site should have alt text. You should never use an image title to replace alt text.

Start Using Website Titles the Right Way

If you want to make your website a success, understanding the role of website titles is important.

When most people say “website title,” they’re referring to the HTML title tag that appears in the code of each page on your site. However, the title terminology will also appear in other areas on WordPress, including the overall Site Title, the article title, and image titles.

By using all of these different title types in an optimal way, you can ensure that you’re creating the best website possible for both your human visitors and search engines.

When you build your website with WordPress.com, you’ll be able to manage all of these titles from a visual interface. There’s no need to work with code like you’d need to if you were building a website from scratch.

If you want to try it out, you can create your free WordPress.com website today.

Want more tips? Get new post notifications emailed to you.