How-to guides

WordPress title tags and page titles: how to set and hide them

|

Apr 19, 2026|17 min read

Two completely different things in WordPress are both called “the title”: the HTML <title> tag (what shows in the browser tab, the search result snippet, and the social share card) and the visible page title (the big heading at the top of the page, usually the <h1> ). They are controlled in different places, serve different purposes, and the confusion between them is why “how do I change the title on this page?” is one of the most-searched WordPress questions – people change the one they do not mean to change, and the one they do mean to change stays exactly the same.

This guide covers both. What the HTML title tag is, how WordPress and SEO plugins generate it, how to customize it per page. And separately, the visible page title – how to set it, how to hide it when the design does not need it, and the specific Elementor problem where the theme’s page title and Elementor’s heading duplicate each other.

The two titles and where each one shows up#

The HTML <title> tag is a single line of text in the <head> of the page. You never see it on the page itself. It shows up in:

The browser tab (next to the favicon – how to add and change the favicon in WordPress covers the other half of that tab combination)
The search engine results page (Google, Bing, DuckDuckGo)
The social share card when someone pastes your URL into Slack, Facebook, or Twitter (unless an Open Graph title overrides it)
The bookmark name when someone saves the page
The browser history entry

This is the title that matters for SEO. Google uses it as the primary signal for what the page is about and shows it (or its own version of it, sometimes overriding yours) as the blue link text in search results.

The visible page title is the heading you see at the top of the page when you load it. It is typically an <h1> element rendered by your theme, and in most themes it is the post or page title you entered in the WordPress editor’s title field. This matters for on-page structure, for accessibility (screen readers announce the <h1> as the page heading), and for the user’s immediate sense of what they are reading.

On a default WordPress install, both default to the same text – whatever you typed in the title field at the top of the editor. Most of the time, that is fine. The cases where it is not fine:

You want the search result to read “WordPress hosting plans – Hostney” but the visible heading to just read “Plans.”
You have Elementor or Divi building the page layout, and the theme is also outputting a page title, resulting in two headings stacked at the top.
You want the visible title hidden entirely (your design uses a hero image instead).
Your theme is outputting an unhelpful <title> like “Hostney – Just another WordPress site” because the tagline never got changed.

All four are different problems with different fixes. Get clear on which one you are solving before editing anything.

How the HTML title tag is generated#

WordPress generates the default <title> by combining several pieces:

The post or page title (from the editor)
A separator character (a pipe | or a dash - )
The site title (from Settings > General)
Sometimes the tagline

On a default theme, a page titled “Pricing” on a site titled “Hostney” with the default tagline produces a <title> like:

Pricing - Hostney - Just another WordPress site

The “Just another WordPress site” portion is the default tagline that most people forget to change. If you see it, update it immediately – it is the single most visible piece of “I did not configure this” on a WordPress site. The site title and tagline both live in Settings > General; how to change your WordPress site title and tagline covers all the places those two fields surface.

Why most sites delegate title generation to Yoast or Rank Math

The default WordPress title is functional but inflexible. You cannot vary the format by content type. You cannot optimize homepage titles differently from post titles. You cannot add the category, the author, or the publication year. Everything gets the same “Title – Site – Tagline” structure.

SEO plugins solve this by replacing the default title with a template-driven system. The two dominant plugins as of 2026:

Yoast SEO. On each post or page, Yoast adds an “SEO title” field (under the Yoast meta box or in the Yoast sidebar panel). Whatever you enter there becomes the HTML <title> for that page, overriding WordPress’s default.

Yoast also lets you define templates per content type. Under Yoast SEO > Settings > Content Types > Posts, you configure a template like:

%%title%% - %%sitename%%

or

%%title%% %%page%% %%sep%% %%sitename%%

The %%title%% , %%sitename%% , %%sep%% , %%category%% , and dozens of other tokens get substituted at render time. A post titled “Setting up DMARC on WordPress” with the template %%title%% %%sep%% %%sitename%% produces Setting up DMARC on WordPress | Hostney .

Any individual post or page can override the template by filling in the “SEO title” field – the template is only the fallback.

Rank Math. Same model. Per-post “SEO title” field in the Rank Math panel at the bottom of the editor, plus global templates in Rank Math > Titles & Meta > Posts using %title% (single percent instead of double – the only real difference). Most sites that switch between the plugins migrate the templates automatically.

Both plugins also generate Open Graph titles separately from the HTML <title> . The HTML title is for search engines and browser tabs; the Open Graph title is for Facebook, LinkedIn, and anywhere that parses og:title . They usually default to the same value, but you can override either independently.

Changing the title tag per page (the practical workflow)

For a single post or page where the default is wrong:

Open the post or page in the editor
Scroll down to the Yoast or Rank Math meta box (or open the sidebar panel)
Fill in the “SEO title” field with exactly what you want the <title> to be
Save or update the post

Keep it under 60 characters. Google truncates titles longer than about 580 pixels (which is roughly 50-60 characters depending on the letters – narrow letters like i and l let you fit more, wide letters like W and M let you fit fewer). Anything past the truncation becomes an ellipsis in the search result.

Include the primary keyword toward the start. Google weights the beginning of the title tag more heavily, and the truncation cutoff means words at the end may not be visible to searchers at all.

Changing the title tag without a plugin (the wp_title filter – do not do this)

On old WordPress tutorials you will find instructions to hook the wp_title filter in functions.php :

add_filter('wp_title', 'custom_wp_title');
function custom_wp_title($title) {
    return 'Custom title - Hostney';
}

This is legacy. wp_title() was deprecated in WordPress 4.4 (late 2015) in favour of wp_get_document_title() , and modern themes call the latter through add_theme_support('title-tag') in functions.php . The equivalent modern filter is pre_get_document_title :

add_filter('pre_get_document_title', 'custom_document_title');
function custom_document_title($title) {
    if (is_page('pricing')) {
        return 'Pricing - Hostney';
    }
    return $title;
}

Even so, hand-rolled title filters are almost never the right answer in 2026. If you have Yoast or Rank Math installed, they are already handling the title tag and your filter will fight them. If you do not have an SEO plugin, install one – the plugin’s per-post SEO title field is easier to maintain than a bespoke filter and comes with a dozen other things (meta descriptions, social cards, sitemaps, schema) that you will need anyway.

The only legitimate reason to write the filter yourself is if you are building a custom WordPress theme that deliberately does not use a third-party SEO plugin. In every other case, the plugin handles it.

Google sometimes rewrites your title

Since 2021, Google has occasionally replaced the <title> you set with something else – usually pulling text from the page’s <h1> , a heading further down, or the link text someone used to link to you. This is a Google-side behaviour and there is no direct toggle to turn it off.

What reduces the likelihood of rewrite:

Keep the HTML <title> and the visible <h1> close in meaning (not identical – it is fine for them to differ, but they should describe the same page)
Avoid stuffing the title with your brand and a pipe and another brand and the page topic in a way that reads like SEO spam
Put the clearest version of the page topic early in the title
Do not use the exact same title across many pages

If Google is rewriting a specific URL and you cannot figure out why, check the page in Search Console (URL Inspection tool) – it shows the title Google is using alongside the one you set.

The visible page title#

Separately from the HTML title, the visible <h1> or heading displayed at the top of the page is a different setting. On most themes, it renders the post or page title from the editor as an <h1> . That is usually the right behaviour – a clear page heading is good for readers, good for accessibility, and good for SEO.

The cases where you want to change it, hide it, or handle it differently come up mainly in two situations: when a visual page builder (Elementor, Divi, Beaver Builder, Bricks) is building the page layout and creating conflicts with the theme, and when the design is hero-driven and does not have room for a conventional page heading.

Changing just the visible heading (without changing the SEO title)

The page title field in the editor sets both: the HTML <title> (via Yoast’s %%title%% token) and the visible heading. If you want them to differ, the common pattern is:

Put the reader-facing heading in the page title field in the editor (this is what visitors see at the top of the page)
Set the search-engine title in the Yoast/Rank Math SEO title field (this is what browsers and Google see)

Example: a page meant for humans to read as “Our team” but for search engines to understand as “The Hostney team – who builds and runs your hosting.” The editor title field reads “Our team.” The SEO title field reads “The Hostney team – who builds and runs your hosting | Hostney.”

No code required. No filters, no theme edits. Just use both fields.

Hiding the visible title on a specific page (block themes)

On block themes (Twenty Twenty-Four, Twenty Twenty-Five, and any theme using the Full Site Editor), every page and post has a Show title toggle in the sidebar. In the editor, click the Page (or Post) tab in the right sidebar. Under Summary, find the Show title option and toggle it off. The page renders without the <h1> block from the theme.

This is the cleanest way to hide the title. It affects only the specific page, it does not require CSS, and it leaves the SEO title intact (Yoast/Rank Math still output the HTML <title> normally). The template still renders the post content, just without the automatic heading on top.

Hiding the visible title on a specific page (classic themes)

Classic themes do not have the built-in toggle. The common options, in order of cleanliness:

1. Theme-specific option. Some classic themes (Astra, GeneratePress, OceanWP, Kadence) have a “Disable page title” toggle in the page settings meta box or the Customizer. Check the page editor first – if the theme exposes the setting, that is the right place to flip it.

2. CSS by page ID. WordPress adds a page-id-N class to the <body> tag, where N is the page ID. You can target a specific page with CSS:

.page-id-42 .entry-title {
    display: none;
}

Replace .entry-title with whatever class your theme uses for the page heading (inspect the element in browser dev tools to find it – common classes are .entry-title , .page-title , .post-title ). This hides the element without actually removing it from the HTML, which means screen readers still announce it. That is fine for accessibility but wastes vertical space on the page itself until the CSS hides it.

3. Display:none from a page builder. Most builders (Elementor, Divi, Beaver) expose a per-widget Visibility > Hide setting. Use it on the theme’s title element if the builder can target it, or wrap the heading in a container and hide the container.

4. Remove it from the template. If you are comfortable editing a child theme, find the template file that outputs the title (usually page.php , single.php , or a template part like content-page.php ) and delete or conditionally remove <?php the_title(...); ?> . This is surgical and permanent but requires understanding the theme’s template hierarchy. Make the change in a child theme so it survives theme updates.

The Elementor duplicate-title problem

This is the specific issue that drives most of the “how to hide page title” searches. You build a page in Elementor. The page has an Elementor Heading widget at the top saying, say, “Pricing.” You save and view the page. Now there are two headings – the theme’s page title (“Pricing”) at the very top, and your Elementor heading (“Pricing”) directly below. Same text, stacked on top of each other, one above the other.

The cause: Elementor is building the content area, but the theme is still rendering its own page title above the content area. Neither knows about the other.

The standard fix, which Elementor itself documents:

Edit the page in Elementor
Click the gear icon at the bottom left (Page Settings)
In the Settings tab, find Hide Title and toggle it on
Update the page

This adds a body class ( elementor-page-title-hide or similar) to the page and Elementor’s theme-integration CSS hides the theme’s page title element. Elementor ships with CSS selectors matching the most common theme classes ( .page-title , .entry-title , .site-main h1:first-child ), so for most themes this just works.

If it does not work (the theme’s heading persists after toggling Hide Title), the theme’s heading is probably using a class Elementor does not target. Inspect the heading in browser dev tools, find its class, and add CSS in Elementor > Custom CSS (requires Elementor Pro) or in Appearance > Customize > Additional CSS – how to edit and add custom CSS in WordPress covers the DevTools workflow for identifying the right selector and matching specificity cleanly:

.elementor-page-title-hide .your-theme-heading-class {
    display: none;
}

The elementor-page-title-hide body class is only added when the toggle is on, so this rule only applies to pages where you deliberately hid the title.

The same pattern applies to Divi, Beaver Builder, and Bricks. Each has an equivalent “Hide title” per-page toggle in the builder’s page settings; the specific UI differs but the concept is identical.

Hiding the title site-wide

If every page on your site should skip the theme’s page title (your design is entirely hero-driven), do it once at the theme level rather than per-page:

In classic themes, use Appearance > Customize to find a “Display page title” option (many themes expose this), or edit the template in a child theme to skip the_title() calls
In block themes, edit the page template in Appearance > Editor, delete the Post Title block, and save

Do this once and every page renders without the heading. Individual pages can still add their own heading via the editor if they need one.

H1 best practices

Whether you hide the theme’s page title or let it render, the page still needs an <h1> somewhere. Search engines use it to understand the page’s topic, screen readers announce it as the page identifier, and it provides the structural anchor that the rest of the headings hang off. Key rules:

One <h1> per page. Not zero, not two. Multiple <h1> tags are valid HTML5 but confuse most accessibility tools and send a muddled signal to search engines.
Include the primary keyword. The <h1> is the strongest on-page topic signal after the <title> tag. If the page is about “adding custom fonts to WordPress,” the <h1> should contain that phrase (or a close variant).
Distinct from the <title> . The <title> is optimized for the search result listing and the browser tab. The <h1> is optimized for someone who just landed on the page. They serve different moments and should usually read a bit differently.
Match user intent. If someone arrives from a search for “hide page title WordPress,” the <h1> should immediately acknowledge that topic. Do not bury it under a generic heading like “Introduction.”
No keyword stuffing. “Custom fonts WordPress theme typography fonts WordPress” is not an <h1> – it is a penalty waiting to happen.

If you hide the theme’s automatic <h1> (via Elementor’s Hide Title toggle, for example), make sure the first heading you do render is an <h1> , not an <h2> . A page with no <h1> at all is worse than a page with the wrong heading – accessibility tools report it, and search engines have to guess what the page is about from body text alone.

Common mistakes#

Changing the site title when you meant to change a page title. Updating Settings > General changes the site title across every page – browser tabs, search results, headers. If the search snippet for just one URL is wrong, that is an SEO title problem, not a site title problem. Go to that specific post/page and update the Yoast or Rank Math SEO title field.
Changing the visible heading and wondering why Google’s listing did not update. The editor’s title field sets both, but only if Yoast/Rank Math do not override it. Check the SEO title field – it may have an old value that overrides your edit.
Hiding the title with display: none on the wrong element. Hiding the <h1> with CSS does not change the HTML structure, which means it still counts as the page’s <h1> for screen readers and search engines. That is usually fine, but if you also have an Elementor heading as <h1> , you now have two <h1> s on the same page even though one is visually hidden. Use visibility: hidden for visual-only hiding, or actually remove the element from the template if you want it gone everywhere.
Leaving “Just another WordPress site” as the tagline. It shows up in the HTML <title> on many default themes, and it telegraphs that the site was never configured. Change it in Settings > General immediately after installing WordPress.
Not setting an SEO title on the homepage. The homepage is often the single most important page on the site, and default WordPress frequently renders its <title> as just the site name with no context. Set an explicit homepage SEO title in Yoast SEO > Settings > Homepage or Rank Math > Titles & Meta > Homepage.
Using the same title on many pages. Duplicate titles across URLs are one of the flags that SEO auditing tools pick up immediately. Every indexable page should have a unique <title> .
Assuming the Elementor “Hide Title” toggle affects SEO. It only hides the visible heading. The HTML <title> is still generated by the theme or SEO plugin normally. Hide Title is a presentation setting, not an SEO setting.
Editing title tags directly in the theme’s header.php . Modern themes call wp_head() in header.php, which lets WordPress and plugins output the <title> dynamically. Hardcoding <title>Your site</title> directly breaks every per-page customization you have done through Yoast or the editor.

How Hostney handles title and heading configuration#

Hostney does not impose any special layer on top of WordPress title handling – WordPress, the theme, and whichever SEO plugin you use are fully in control of both the HTML <title> tag and the visible page headings. The control panel has no opinion about what they should say or how they should render.

What Hostney does affect is the delivery: pages with correctly set titles are served from the FastCGI cache layer, which means the <title> tag and the rendered <h1> on your homepage reach visitors in the same number of milliseconds as any cached WordPress page. The cache varies correctly on URL, so per-page titles remain distinct across cached requests. Static CSS that hides a theme title on a specific page (as in the page-id-N examples above) is served with the same long cache headers as the rest of your stylesheet, so the hide-title rule costs nothing on repeat visits.

If you are moving a site to Hostney and want to audit title tags as part of the migration, the usual tools work: Screaming Frog, Ahrefs Site Audit, or Yoast’s built-in “SEO data” report in the WordPress admin all walk the site and surface duplicate titles, missing titles, and titles over the 60-character recommendation. The broader site audit checklist fits alongside the rest of the WordPress performance guide, since title optimization is frequently done in the same session as caching, image optimization, and other SEO-adjacent cleanup.

Summary#

The HTML <title> tag (shown in browser tabs and search results) and the visible page heading (the <h1> at the top of the page) are two different things in WordPress. Control the first through Yoast or Rank Math’s per-post SEO title field, or through their global title templates; do not write wp_title or pre_get_document_title filters unless you deliberately have no SEO plugin. Control the second through the editor’s title field, or hide it via the block theme’s Show Title toggle, the classic theme’s settings, or Elementor’s Hide Title toggle – the last of which is the fix for the duplicate-heading problem most people searching “how to hide page title” are actually trying to solve. Keep one <h1> per page with the primary keyword, keep the <title> under 60 characters with the keyword near the front, and let the editor title field and the SEO title field diverge when the reader-facing heading and the search-engine title are meant to do different jobs.