Title Tag vs Title Attribute: When to Use title on Links and Images

Two different things that share a name

People often mix up the title tag and the title attribute because both are called "title". They do completely different jobs.

• The title tag is the <title> element inside the <head> of a page. There is one per page. It names the whole document: browsers show it on the tab, bookmarks use it, and Google uses it as the main source for the clickable title link in search results.
• The title attribute is an optional attribute you can add to almost any element in the body, such as a link, an image or a form field. It gives extra advisory information about that one element. Desktop browsers show it as a small tooltip when the mouse rests on the element.

So the short answer to the difference between a title tag and a title attribute: the title tag is the name of the page, the title attribute is an optional note on one element inside it.

The title tag: what it does for SEO

The title tag sits in the head of every page:

<head>
  <meta charset="UTF-8">
  <title>Sourdough Classes for Beginners | Example Bakery</title>
  <meta name="description" content="Weekend sourdough classes for beginners...">
</head>

Google uses it as the main source for the title link it shows in results, although it can rewrite the text when the tag is missing, repeated across many pages, stuffed with keywords or does not match the page. A good title tag is unique to the page, describes what the page offers in the words people search, and is usually short enough to show in full, around 50 to 60 characters. The title tag guide covers writing and length in detail, and Google rewriting your title explains why the result can differ from what you wrote.

In WordPress, the field that sets the title tag is usually the SEO title in Yoast or Rank Math, not the post title, although the post title is used when no SEO title is set.

The title attribute: what it actually does

A title attribute on a link looks like this:

<a href="https://example.com/files/menu.pdf" title="PDF, 240 KB">Download our menu</a>

What happens with it depends on how the visitor reaches the link:

• Mouse users see a tooltip after hovering for about a second, if they wait.
• Touch screen users on phones and tablets never see it. There is no hover on a touch screen.
• Keyboard users who tab to the link do not see it in most browsers.
• Screen reader users get mixed results. A screen reader works out the element's accessible name from its text, aria-label or alt, and uses the title attribute only as a last resort. When a link already has text, the title may be read as an extra description, read twice if it repeats the text, or skipped, depending on the screen reader and its settings.

Because so many visitors never see it, anything important must not live only in a title attribute. If a link opens a PDF or a new tab, say so in the visible link text or next to it.

Does the title attribute help SEO?

For links, the text that matters to search engines is the anchor text, the visible words inside the <a> element. Google's guidance on links asks for descriptive anchor text and does not treat the title attribute as a replacement for it. A link reading "click here" with title="Sourdough classes" is still a "click here" link. Improve the words people can see instead; see link text fixes and anchor text fixes.

For images, Google's image guidance relies on the alt attribute, the file name, captions and nearby text. The title attribute is not a substitute for alt text. If your theme only sets a title on images, add proper alt text; the alt text guide explains how. A common reason people want image titles is that they expect alt text to show on hover. It does not in modern browsers, which is covered in alt text not showing on hover.

Filling every link and image with keyword-heavy title attributes does not lift rankings, and it adds noise for screen reader users. Leave them off unless they add real information.

When a title attribute helps, and when it harms

The one place you should always use a title attribute is an <iframe>: embedded videos, maps and forms need a short title that describes their content, so screen reader users know what the frame contains before entering it. For icon buttons, see ARIA label fixes.

How to find title attributes on your site

Start with what the server sends. These commands print the title tag and every link with a title attribute:

curl -s https://example.com/ | grep -oE '<title>[^<]*</title>'
curl -s https://example.com/ | grep -oE '<a [^>]*title="[^"]*"[^>]*>' | head -30
curl -s https://example.com/ | grep -oE '<img [^>]*title="[^"]*"[^>]*>' | head -30

For the rendered page, including anything added by scripts, paste this into the DevTools console. It lists every element with a title, its text, and whether the title just repeats it:

console.table([...document.querySelectorAll('body [title]')].map(el => {
  const text = (el.innerText || el.alt || '').trim();
  return { tag: el.tagName, title: el.title, text: text.slice(0, 60),
           duplicate: text.toLowerCase() === el.title.trim().toLowerCase() };
}));

Platform notes

• WordPress. The block editor does not add a title attribute when you insert a link or an image. The Title field in the media library is used inside WordPress and is not printed on the image. Title attributes in your HTML usually come from a theme, a menu setting (the Title Attribute option in Appearance, Menus, under screen options) or an old plugin.
• Shopify. Some themes copy the product name into a title attribute on every product link. Search the theme code for title=" in the snippets for product cards.
• Static and custom sites. Search templates for title= and decide on each one using the table above.

The fix, step by step

Edge cases worth knowing

• SVG icons. Inside an inline SVG, the <title> element is a child element, not an attribute, and it can give the graphic an accessible name. That is different from both the page title and the title attribute.
• Feeds and stylesheets. <link rel="alternate" type="application/rss+xml" title="Blog feed"> uses the title attribute to label the feed. That is correct and harmless.
• Form fields. A title on an <input> can act as its accessible name if nothing else does, but a visible <label> is far better for everyone.
• Tooltips that cover content. Native tooltips can cover nearby text and cannot be dismissed with the keyboard. If you need a real tooltip, build one that appears on focus and hover and closes with Escape.

Keeping titles right

1. Give every page a unique, descriptive title tag and check it whenever a template changes. The title tag tutorial is a quick refresher.
2. Write link text that makes sense on its own, so no title attribute is needed to explain it.
3. Keep alt text on every meaningful image and leave image title attributes off.
4. Title every iframe, and include that check in your accessibility review.
5. Run the console snippet on key templates after theme updates and remove duplicates it flags.