What’s the Difference Between a Title Tag and H1 Heading?

(This page is also being used as a test page for comparison. More on the SEO test here.)

When you develop a site, there are behind the scenes factors that assist search engines to direct searchers to your site. These factors are combined together with different important levels for each. Though it is debatable on what’s the most important, it is a best practice to use Title Tags and H1 Header tags for SEO.

I don’t want to give you a detailed, long-form post; only a brief explanation. You’ll know the difference between Title Tags and H1 Headers. Just enough to make you dangerous. 🙂

For an easier read and variety, Title Tags may be referred to as titles and H1 Header as H1.

(Placeholder for a graphic.)

Title and H1 Header Tags: Behind the Scenes

At the previous section, it stated: “there are behind the scenes factors”. Here’s what it looks like (just in case you’re curious):

Title Tag:

<head> <title> Title tag content that will show within the search page results. </title> </head>

H1 Header Tag:

<body><h1>H1 heading content will show on a page. </h1></body>

(Placeholder for a graphic.)

Defining Title Tags and H1 Header Tags

If you are only researching to grasp what they are. The important piece to remember is that each page has a title tag and H1 Header.  The page’s keywords should appear in both locations.

Title Tag: a Non-Technical Definition

The bolded text is a basic definition of a Title Tag. It is what I feel is most important to make someone aware of in order to understand SEO basics.

  • A title tag is the blue text on a search result’s page.
  • Serves as a link or hyperlink from a search results page to the web page where the content is found.
  • A title tag is also located at the top of a web page, on the tab in the web browser and when bookmarked.
  • Not found by default within a page’s content.
  • Is a type of meta tag.
In this example, I did a search in Google for Woodstock, GA.

Title tag basic description with examples for website and business owners by Cathy Gray

 

H1 Header: a Non-Technical Definition

The bolded text is a basic definition of a Title Tag. It is what I feel is most important to make someone aware of in order to understand SEO basics.

  • It appears within your web page.
  • H1 Header does not usually show up in search engines.
  • Can be styled and often only located at the top of a page.
  • Is a type of meta tag.

(Placeholder for an H1 Header graphic.)

Title Tags vs H1 Headers

Both tags should have your keywords that represent an overall message of your webpage. So the best way to optimize Title Tags and H1 Headers is to write for your viewers while following SEO best practices.

Overall, tags and headers share a similar function. This can stem a little confusion between the two.

The main difference between these is where their location. This difference impacts how a search engine and users analyze a page.

Other Differences:

  • Title Tags are located in more places while an H1 Header tag appears in only one place, but doesn’t have to be used.
  • H1 can be visually stimulating and titles cannot.
  • Search engines can give more weight to Title Tags than H1 Headers.
  • Google can change a title but not a header.

Common Best Practices:

  • Place the keyword at the beginning in both tags, if possible.
  • Use only one Title Tag and one H1 Header tag per page.
  • Keep both tags’ content short and unique.
  • Use the keyword or keyword phrase in both tags.

How to Write Title Tags & H1 Headers

Put yourself in the shoes of your targeted viewer.

For a title tag content, ask “What does the page title to say to gain a viewer’s attention from a search page”?

For the H1 Header tag content, ask “What will be a good introduction to get the viewer on the page”?

 

Do this while following basic SEO best practices, and your HTML tags will please Google the way you want them to.

(Placeholder for a call to action.)

Details on Cathy Gray’s Website

Cathy Gray
Strategizing Print & Digital Marketing w/ Business Operations
(and always with coffee in hand)
About | Contact

Website Details

Current Website Information

  • Will continue to be built with WordPress
  • Theme updated to Divi
    • I switched from BeTheme to Divi because of the Lifetime updates with my subscription that I have.Who can argue with a one-time purchase instead of an annual buy.
  • Divi Child theme used: yes
    • Always use a child theme. There are some that do not use it for the Divi theme, but why would you not if it is best practice. Why you should always use a child theme with WordPress?

Plugins Used

  • Yoast

Website Information Prior to November 2018

  • Built with WordPress.
  • Theme: BeTheme
  • Child Theme Used: Yes

Plugins Used

  • Yoast
  • Contact form 7
  • TinyMCE Advanced
  • WP Sitemap Page

Plugins Tried on this Website

These plugins have been tried on the site but weren’t used for various reasons.

  • Pixabay
Cathy Gray

Cathy Gray

A Marketing & Operations Aficianodo

About | Contact

 

Latest Articles

Using Headings

Heading tags H1 through H6 are tags that are used for creating of headings on a web page. It is done in the same way as an informative book, think about a college book. Headings have a top-down hierarchy with the most important tag is the h1 heading tag and will usually be the title of a post.

There are two ways headings can structure content. In classic HTML, there would be one H1 heading tag on each page, a few of H2 headings and so on. These would all combine to form an outline of the page.

In HTML5, each sectioning tag, an article or section for example, starts again with an H1. This was done to make it easier to combine several components onto one page and still have a good outline.

Structuring the Entire Page Using Headings

In the case of HTML4, it is logical to use one H1 per page where the H1 is the main title of that page. In most cases, The H1 is not a brand name or website name. The few exceptions are the home page or about page. This works because it makes sense to use a brand or website name on these pages.

On a category page that H1 would be the category name and on a product page the product name. It’s not that hard to understand this logic and it is recommended to use headings in this way.

H2 is for subheadings of an H1. Use it to divide content into scannable blocks; both Google and your visitor will like it. H3 is for subheadings of that H2, preferably. I want to mention that this all isn’t new. Over the last many years, not much has changed in the way it is recommended to use headers as best practices. This doesn’t mean that all websites or website designers follow this. There are some that may put the company or brand as the heading for all pages on a site. While every page is technically about the company or brand, but it is too vague and needs to be more specific. If a web developer follows the later, in my opinion, they are old-fashioned regarding best practices.

What I disagree with is when people use headings to style elements of a website such as Call Now. They use H1 to style the phone number. A web designer should know better. Google’s SEO Starter Guide mentions this. Second, when people just put an entire paragraph in an H2 or H3, because it is easier that putting it in the correct way with paragraph styling.

Using Uncommon Headings

Does a site use any H4, H5 or H6 as headings? Using an H4 could be useful if the text is longer than 1,000 words and you want to add an extra layer in the page structure or for scannable for mobility purposes. An H4 could be used for sidebar or footer headings that are sections within that particular section of a page. Using an H1 or H2 is the sidebar or footer headings seems like duplicated use of an H1 or H2 tag when used to structure the page.

Some WordPress themes do not pay that much attention to these headings, sometimes making H5 text smaller than paragraph text. If the lesser headings are used, just be aware of this design element. In this case, adjustments can be made within the theme’s coding pages.

Headings and SEO

What value do headings have for SEO? Well for one, headings help bots grasp the main topics of a long post when a website is crawled. Search engines scan your post, why not make it as easy as possible. Second and the most important reason is for the end user, the visitor of a site. If a page is detailed, use headings with the user in mind and make it easy to understand the content quickly.

It is always best to use headings from the perspective of the end user as well as the purpose of the page.

 

There are other things like text content and schema.org markup that will help page rankings more than a heading structure. Using a consistent heading structure isn’t hard. It only helps visitors.