Elements and Best Practices in HTML Metadata

Meta tags are brief extracts of a code that inform search engines about crucial information about your webpage. They also control how web browsers display to visitors. Meta tags are present on every web page and you can only see them in the HTML code. Here is a list of meta tag examples for SEO.

• Meta description
• Meta robots
• Meta title
• Meta charset
• Meta refresh redirect
• Meta viewport

Meta Title

The page title shown by Google and other search engines in the search results is the meta title. A HTML title provides the users with a quick insight into a result’s content and its relevance to the query. It is usually the basic form of information that determines which result to click on. Using high-quality titles on your web pages is very important for SEO. Here is an example of a meta title:

Best Practices

• Use a special title tag for your pages
• The titles should be brief and descriptive
• Avoid using generic and vague titles
• Use title or sentence case
• Do not use click-bait but rather something click-worthy
• Match search intent
• Use 60 characters or less
• Include target keywords where necessary

Finding and Fixing Title Tag Mistakes

Make sure that your title tag is not too long nor too short. Avoid unnecessarily long or wordy titles while keeping them concise and descriptive. Ensure that every page has a title tag. Avoid multiple HTML title tags on the page as the search engines may show an irrelevant title tag if there are multiple web pages. Duplicate titles across multiple pages. It is very important that each of your site’s pages has a unique and descriptive title.

Test your site’s SEO and performance in 60 seconds!

Good website design is critical to visitor engagement and conversions, but a slow website or performance errors can make even the best designed website underperform. Diib is one of the best website performance and SEO monitoring tools in the world. Diib uses the power of big data to help you quickly and easily increase your traffic and rankings. As seen in Entrepreneur!

• Easy-to-use automated SEO tool
• Keyword and backlink monitoring + ideas
• Ensures speed, security, + Core Vitals tracking

• Intelligently suggests ideas to improve SEO
• Over 500,000 global members
• Built-in benchmarking and competitor analysis

For example “www.diib.com”

Test Your Site for Free

Used by over 500k companies and organizations:

• 
• 
• 
• 

Syncs with

Meta Description

A meta description gives a short description of a web page. Search engines use it to display a web page in the search results. It informs and gains the interest of users using a brief and accurate summary of the contents of a particular page. A meta description reassures the user that they are on the right page and exactly what they are looking for. However, they are not used by Google as a direct ranking factor. The image below shows a meta description:

Best Practices

• Write a unique and understandable description for each page
• Provide an accurate summary
• Do not use generic descriptions
• Use the main keywords appropriately in a meaningful sentence
• Use sentence case
• Do not use click-bait but write something click-worthy
• Match the purpose of the search
• Use 160 characters or less

Common Meta Description Mistakes

Most common mistakes in writing a meta description are almost similar to those of title tags.  A meta description that is too long or too short. There is usually no limit on the length of a meta description. In order to fit the width of the device, the search results extracted are usually shortened. Another mistake is where a web page completely lacks a meta description.

Ensure that you write it on your site. You can also have a page with more than one meta description however, this may confuse the search engines. Having similar meta descriptions on multiple pages is also a common mistake. Ensure that each page has its own unique description.

Meta Robots

Meta robots allow the search engine to crawl web pages and also offer instructions on how to do so. The presence of your site in the search results can have a negative impact if you don’t use the correct attributes in the meta robots tag. Understanding this tag and effectively using it will greatly impact your SEO.

The index values tell the bots to do the page indexing, while the noindex value instructs the bots not to do the page indexing. The bots are instructed by the following value to crawl links on the page to vouch for them, while the nofollow value instructs them not to crawl links on the page to avoid any endorsement.

Best Practices

Only use the meta robot tags when restricting Google crawls on a page and avoid blocking pages with meta robot tags in robots.

Common Meta Robots Mistakes

Some of the typical meta robots mistakes include robots blocking no index pages. This makes it difficult for Google to see the noindex robots tag and may continue indexing the URL. A rogue meta noindex reduces the page’s organic traffic by restricting Google from indexing it. Rogue meta nofollow will prevent Google from crawling the page’s links and reduce the chances of discovering and indexing crucial content. This can also prevent the flow of PageRank to important pages.

Meta Viewport

A meta viewport sets the web page’s visible area and gives instructions on how the page will be displayed by the browser on different screen sizes. This is important since mobile-friendly web pages are ranked higher in Google’s mobile search results.

Best Practices

It is crucial that you use meta viewport on all web pages and with the standard tag.

Meta Charset

This tag determines the character encoding for your page or simply instructs the browser how to display the characters and text on the page. There are two common character sets including UTF-8 used for encoding Unicode and ISO-8859-1 used for encoding the Latin alphabet. Encoding with the wrong character will lead to the browser displaying incorrectly.

(Image Credit: Learn Web Tutorials)

Character formatting issues result in a negative user experience and your pages can look broken. Other problems it can cause include fewer people linking to your page, low dwell time, low time on page, high bounce rate and the search engine may not understand your content.

Best Practices

• Always use meta charset tag on all your web pages
• Use Unicode/UTF-8 where possible

It is important to check all your web pages to ensure that they are using UTF-8 encoding.

Meta Refresh Redirect

This tag redirects the user to another URL after a certain amount of time. Google understands and respects meta refresh redirect tags, but it is best not to use them in SEO. This is because most browsers do not support them and may cause confusion to the user while raising security concerns. It also takes up time since pages require parsing before the destination URL is visible. This is what that tag will look like:

(Image Credit: HostPapa)

Best Practices

• Only use meta refresh redirect tags when necessary

It is best that you avoid using meta refresh redirects where possible since they are a bad practice. If you have them on your web pages, you can use 301 or 302 redirects instead, where possible.

Meta Keywords

Meta keywords are a good meta tag example that is used often these days. It is not advisable to add the meta keywords tag with a list of target keywords since Google stopped using keywords for rankings. This is because many people stuffed irrelevant keywords without users ever seeing those keywords. Google disregarded the keywords meta tag since it was often abused.

Bing now uses the keywords meta tag to signal spam, so this could work against you. It is best that you remove the tag from your site.

Metadata is data that provides information about other data. HTML meta data summarizes basic information about data making it easier to find and work with that particular data. It can be created manually for more accuracy or automatically to offer more basic information. Mata data is used for document files, images, videos, spreadsheets, and web pages.

What is a Meta Tags Generator?

A meta tags generator allows you to develop the required and most useful HTML meta tags for SEO.

Best Practices When Using HTML Metadata

Declare a Doctype Always

A doctype declaration should be the first thing in your HTML meta tags for SEO. It notifies the browser about XHTML standards being used. It is advisable to use the XHTML 1.0 strict doctype, although it is considered a tough choice by some developers. It makes sure that your code conforms strictly to the latest standards.

Use Meaningful Title Tags

Title tags enable the web page to be more meaningful and search-friendly.

Use Descriptive List of Meta Tags

A list of meta tags adds more meaning to your web page for user agents like search engine spiders. It is important that the description does not have repeated words and phrases since the search engines will detect that. Use simple and straightforward descriptions when explaining your web page’s purpose.

Divide Your Layout into Major Sections Using Divs

When constructing a website design, consider dividing the web page into sections in the first step. This will promote a clean and well-intended code while helping you to prevent confusion and using divs excessively when writing a complex and long markup.

Avoid Mixing Content From Presentation

Do not mix your HTML content with the content visual presentation provided by CSS. Creating a separate CSS file for your styles rather than using inline styles in your HTML is very essential. This will enable you and other developers working on the code to make quick changes and ensure that your content is more understandable for user agents.

Minify and Unify CSS

Typical websites have one major CSS file and probably other things like browser-specific fixes and CSS reset. When each C file makes an HTTP request, it slows down the website load times. Taking out characters that are not needed like newlines, spaces, and tabs from all your code and unify files that can be integrated together. This can help solve that problem and improve the load times of your website.

Minify, Unify and Move Down JavaScript

Avoid using inline JavaScript but instead, try minifying and unifying your JavaScript libraries to lower the number of HTTP requests needed to generate one of your pages. However, you can not have parallel downloads in most browsers meaning the browser will not download anything else while downloading JavaScript, making the page appear as if it’s loading slowly.

To avoid this, you can load your JavaScript after loading your CSS by placing the JavaScript at the end of your HTML document where applicable, preferably before closing the body tag.

Use Heading Elements Wisely

Using h1 to h6 elements to indicate your HTML’s content order makes your content more user-friendly for, user agent, search engines, and screen-reading software. When using blogs, it is best that you use the h1 element for the title of the blog post as opposed to the site’s name since it is ideal for search engines.

Use the Right HTML tags at the Right Place

It is important that you know the available HTML tags and how to use them accurately to avoid confusion and create a relevant content structure.

We hope that you found this article useful.

If you want to know more interesting about your site health, get personal recommendations and alerts, scan your website by Diib. It only takes 60 seconds.

Enter Your Website

For example “www.diib.com”

Test Your Site for Free

I have used Diib analytics for years. Their dashboard is addictive! The answer engine is my favorite feature. It is an invaluable resource for continually improving my site. Upgrading to the premium version was the best decision I could have made for my business.

Tom Lineen
CEO FuzeCommerce

Avoid Using Divs Excessively

Some developers wrap div tags on other div tags that have more div tags creating numerous divs. The div is considered a meaningless element that should only be used when there are no other available suitable elements according to the W3C HTML specifications. Avoid having numerous divs by using them responsibly and only when it’s necessary.

Use an Unordered List for Navigation

The navigation element is a very essential factor in website design when combined with CSS. It helps your navigation menus be semantic and beautiful. Here are two ways to do this:

(Image Credit: Studytonight)

Close Your Tags

W3C specifications require that you close all your tags. Other browsers may correctly display your pages even though failure to close your tags is invalid under normal standards.

Use Lower Case Markup

Keeping your markup lower-cased is a standard practice in the industry. Capitalizing your markup affects your code readability but does not change the display of your web pages.

Use Modular IE Fixes

If you are having problems with your pages, you can use conditional comments to focus on the internet explorer. Ensure that you make the fixes modular to ensure that your work is future-proof so that the older version of IE will not require any support.

Validate Your Code

You should not view validation as the end-all evaluation of good work against bad work. A work that validates is not necessarily good code and alternatively, a work that does not fully validate is not necessarily bad code.

You can use auto-validation services as useful debuggers to identify rendering errors. Validate your work frequently when writing HTML to avoid issues that may be difficult to identify once you have completed your work.

Write Consistently Formatted Code

Writing a clean and well-intended code base brings out your professionalism and makes it easier for developers who may work on your code. You will also increase the readability of your work when you write a properly indented markup from the start. For example:

(Image Credit: html.com)

Avoid Excessive Comments

The purpose of documenting your code is to make it understandable and commenting your code is reasonable and logical for programming languages like Java, PHP, and C#. However, markup is very self-explanatory and you do not need to comment on every line in XHTML/ HTML. Reviewing your work for semantics will help you if you are commenting a lot in your HTML to explain the process.

Diib®: Get Your HTML Metadata Stats Here!

Using these elements and following the guidelines will help you in your SEO efforts.

Elements like a good meta description will increase your click-through rates from searches even though it doesn’t improve your ranking. Meta tags are now being used in social media platforms like Twitter and Facebook. You can use tags to check how your data is shared on Facebook. Partnering with Diib Digital will give you the vital metrics regarding your metadata so you can make effective decisions about your website health.

Here are some of the features of our User Dashboard we’re sure you’ll love:

• Customized Objectives designed to enhance website performance
• Alerts that tell you about your Domain Authority other technical SEO issues
• Broken pages where you have backlinks (404 checker)
• Keyword, backlink, and indexing monitoring and tracking tools
• User experience and mobile speed optimization
• Image title optimization

Click here for your free scan or simply call 800-303-3510 to speak to one of our growth experts.