Best Practice
8 MINUTE READ TIME

Meta Tags and Meta Titles for SEO

There are 10 major components of SEO - in this article, we will be discussing one key element known as “Meta Tags'', which is a component of on-page SEO.

SEO, otherwise known as search engine optimization, is the process of optimizing your website to rank on search engines results pages (SERPs). There are 10 major components of SEO - in this article, we will be discussing one key element known as “Meta Tags'', which is a component of on-page SEO.


What is HTML? 

Before we describe how Meta Tags are used in HTML, let have a quick reminder of what HTML is. HTML is the code behind your page that search engines and web browsers read to understand what the webpage is about. For users, each time you visit a page on a website, your browser reads the HTML and displays the page you see.

You can view a page’s HTML by visiting any web page, right clicking on the page to activate the drop down menu, and select “view page source”.

The HTML can look very confusing and complex. Very few people edit the HTML directly when building a website, and instead use website builders editors like Wordpress, Wix, Squarespace and Webflow and many others. These website builders make editing parts of the HTML and web simple by using a drag and drop graphical interface.

While looking at the HTML code of this page, you can see that the title meta tag is highlighted in the HTML above.

The meta tags are actually code snippets within the web page's HTML that search engines like Google, Yahoo, and Bing use to determine information about a web page. Meta tags help in determining the visibility of a page on search engines. They also help search engines determine how much of the content on a page is relevant to the keyword or keyphrase that was searched by the search engine user.

Meta tags provide information about the metadata of HTML documents. The information can be in the form of keywords, page descriptions, and character sets. A meta tag is not visible to the user on a web page. Let us explore more about meta tags, and how they help SEO professionals with small business marketing.

As mentioned above, editing HTML tags is easier than you think. Your website builder allows easy access. The page above is authored in Webflow. Below, you can see the interface  that lets a Webflow user edit the title meta tag. 

Meta Tag Types

There are 3 important Meta Tags for every page. The most important Meta Tags for SEO are: 

  • Title
  • Description
  • H1

From a technical perspective, Meta tags are used in the header tag area of an HTML file. Meta tags go inside the head element of the HTML code, and describe the page title, page descriptions, keywords, character sets, and viewport settings. The combination of the meta tags title, description and H1 Improve the page's SEO by accurately describing a page’s content to search engines, so they easily match with users search intent.  

Meta Tag: Title 

The Title meta tag is one of the most important elements in effectively communicating to search engines what the page’s intent and content summary is.   

 HTML code example

<head><title>Example Title</title></head>

Most website editors or CMS systems allow you to edit the title tag directly via the title tag field within the page’s metadata settings, or directly within the code.  

From the example shown above:  

<title>Cruxdata - Small Business Digital Marketing</title>

Title Tag Best Practices

 

Use these tips to get the most out of your meta tags:

  • Use a unique title for every web page. 
  • Title Length should be 50 to 60 characters. While Google has no  specific guidelines regarding length, most browsers will only feature the first 50–60 characters of a title tag
  • Try to match the search intent of your target audience
  • Include the target keyword, use important keywords in the beginning of the title.  . Write for customers, using clear, concise wording that conveys the value of the web page

Meta Tag: Description 

The meta tag description is used to describe and summarize the content of a web page. Meta tag descriptions are used to help both users and search engines understand the content on a web page. An important aspect of the meta description is that it can often appear as a snippet in search engine results. This is a great opportunity to get your pitch in front of potential customers without them having to click on the link. The description in the meta tag plays a vital role in the  on page SEO of a page. 

Meta Tag Description Example

Let us check an example of a meta description. Looking at the HTML above the description is:  "name="description"/><meta content="Cruxdata - Small Business Digital Marketing" property="og:title"/><meta content="Cruxdata helps small businesses make data-backed decisions. No more bouncing between tools, messy spreadsheets, or second guessing your marketing decisions."

Googling “Cruxdata” you get the following results. 

Consider a broader such as “best camera for photography”.

In these examples, the user is looking for the best cameras for photography. The text mentioned below the titles is the meta description that shows the users about the content or information they will get after clicking on these web pages.

The first example tells the user about the best cameras for professional photography specifying the Nikon Z9 and its features. The second example tells the users that this page will offer information on choosing the best digital camera for photographers.

Just to be clear - meta descriptions will show up in snippets of the respective webpage, but not on the web page itself. Meta tags will only show up in the respective webpage’s HTML, not on the web page itself.   

If you leave the meta descriptions blank or it is not well written, then the page may not rank, or Google may write one for you. Control your destiny and optimize your meta tags.  

Best SEO practices for the Meta Tag <Description>

Keywords: Keywords are essential for SEO. Make sure you use the keyword for which you want to show your page in search results. 

Readable copy: Stuffing meta descriptions with keywords can harm your search engine ranking. A description should be easy to read and understand. If users see multiple keywords in your description that make it difficult to read, they may consider your web page spam.

Length: The length of the meta description should be between 135 to 160 characters. Google has tested the snippets, and it may cut off anything longer than 160 characters in a meta description. So, write the important keywords in the beginning and middle. Keep the description length up to 155 characters.

Do not duplicate: Write a unique and different description for every page. Do not write the same description for two or multiple pages, even if they have similar content.

Meta Tags H1, H2, …H6 

H1, H2, H3, H4, H5, and H6 are in reference to the order of heading tags, as they appear on a webpage. Heading tags are important components of a successful SEO strategy, as they break the content up, making your webpage more organized and easier to read for users and search engine crawlers alike. Heading tags descend in order of prominence and importance, starting with H1 and cascading all the way to H6. H1 heading tags are often the main titles of a page, while each subsequent heading tag (H2, H3, etc) are used to title sub-sections.

For clarification - H1 to H6 header tags are visible on your web page as well as in the HTML, while title and description meta tags are only visible in your web page’s HTML. 

Most website builders and CMS tools use the page title for both the H1 and title tag. Sometimes the Title and H1 Tags are different, but they should essentially say the same thing. The H1 tag describes what the content is about, and is visible on search engine results. It is important to define a strong H1, so that search engine users know what content is on your webpage. Similarly, the H2 tag informs users what is written in a subsection of the content. H2 tags make scanning and reading the content easier for website visitors. H3 to H6 headings would be used for further subsections,    

At-a-glance readability is very important for online content, as website visitors are more likely to stay on a page with easily scannable content. Using H1, H2, and further heading tags makes the readers know what is written under which section allowing them to find the information easily and quickly.

Examples of H1 and H2 tags

Let’s take another look at our previous example of cruxdata.io - below, you can see the H1, H2 and H3 tags. If look at the home page, the H1 is the title of first section, which is the overview of the whole solution The first H2 tag is the title of a section further down the page that supports the FAQ, and the H3 is a Title of a blog that is pinned at the bottom of the home page this a specific solution.  

<h1>Intentionally built for small businesses.</h1>  

<h2>What is Cruxdata?</h2>

<h3>22 Business Directories You Need to Use</h3>

Quick tips:

  • The actual title of the Page is the H1 - make interesting to grab the readers attention 
  • Match or make your H1 tags similar to your title tags 
  • Capitalize all words over three letters (title case) for H1s 
  • Create a visible style difference between H1, H2 and so on. Larger type and / or bold for H1, smaller type not bold for H2, so on.
  • Use a H1 tag on every page 
  • H1 tag formatting is the same as title tags - 50 to 70 characters
  • Include your target keyword(s) in title tags, and in H1 titles 

Summing up Meta Tags and Title Tags for SEO 

Meta tags and title tags play a vital role in the communication of your website to search engines and internet users alike. It is important to make optimal use of meta tags in addition to other SEO factors to improve your website's overall quality and ranking. Using title tags will help your readers understand you webpage better, and will hook their attention on search engines.

Preston Derrick

co-founder