What are HTML meta tags and how to use them effectively

HTML meta tags are pieces of information located in the header of a web page that aren’t visible to users. By offering guidance on page structure, type, function and language, meta tags not only affect how a page is displayed and indexed but also serve as valuable tools for search engine optimisation (SEO).

What are HTML meta tags?

HTML meta tags are special HTML tags that are crucial for how browsers and search engines display, interpret and index websites. Found in the header of a web page, these tags aren’t visible to users. Through the effective use of the <meta> tag, developers can share important information with search engines, such as the language of a site as well as its content, structure and character encoding.

Meta tags in HTML are fundamental for optimising pages for search engines, improving rankings and managing how a site displays across different devices. While metadata may not be as critical for rankings today as it once was, essential elements like the HTML title tag and meta descriptions remain important.

How are HTML meta tags used?

Here are some of the key ways HTML meta elements are used:

• Search engine optimisation (SEO): Meta tags like <description> and <title> provide search engines with insights into the content and focus of a page, helping to summarise the page clearly and attract clicks.
• Indexing: Metadata such as robots instructs search engines on whether to index a page or not.
• Display and presentation: Meta tags can offer guidance on character encoding, display on mobile devices and details about updates or automatic redirects.
• Social media: Social networks use specific meta tags to ensure content is displayed correctly when it’s shared.
• Accessibility: Metadata plays a vital role in accessibility. For example, it aids screen readers in categorisation and ensures (with viewport) that websites are correctly displayed on different devices.

How do HTML meta tags affect search engine ranking?

Today, search engines like Google provide highly specific rankings based on search terms and questions. In the past, metadata had a much greater impact on a website’s ranking. However, the ability to easily manipulate metadata led to issues such as keyword stuffing.

Nevertheless, metadata and HTML meta tags have not lost their importance for modern search engines. In fact, improper use of metadata can result in a website being completely overlooked. Correctly including relevant metadata like a<title> tag and meta descriptions, along with regular updates, can still be crucial to maintaining a good ranking.

Important HTML meta tags and their syntax

Different meta tags serve different purposes. In the following section, you’ll find a summary of some of the most important meta tags.

Search engine optimisation (SEO)

Search engine optimisation is one of the primary functions of HTML <meta> tags. Here are the meta tags that are most relevant for SEO:

Title

The <title> element gives both search engines and users a brief overview of what a web page is about. Although it’s not technically a meta tag, it’s often mentioned among the most important ones because search engines read it, and it’s a key factor for ranking.

Since it’s the clickable element in search results, having a clear and concise title that grabs attention is crucial. It’s important to make sure it’s the right length too so it doesn’t get cut off when it’s displayed.

Syntax:

<title>Insert document title here</title>

Meta description

While the meta description doesn’t directly influence rankings, it serves as the first point of contact with users, providing important information that can encourage clicks. It’s important that they aren’t too long or too short and include elements like icons or symbols highlighting relevant terms or a call to action (CTA).

Syntax:

<meta name="description" content="Here is the meta description for the web page. It should ideally be around 150 characters in length.">

robots

The HTML attribute robots provides search engines with important SEO instructions related to indexing, following links, snippets and caching:

• index: The page can be indexed.
• noindex: The page should not be indexed.
• follow: Crawlers are allowed to follow links on the page.
• nofollow: Crawlers should not follow links on the page.
• nosnippet: Content may not be used as a featured snippet.
• noarchive: The version of the page that is cached in Google should not be shown.

If you don’t provide robots metadata, search engines interpret this as permission to index, display snippets or follow links. You can also use the robots.txt file to manage indexing for your site.

Here is a code example for a page that can be indexed and allows crawlers to follow its links:

<meta name="robots" content="index, follow">

viewport

The HTML meta attribute viewport is essential for responsive design. While the meta tag itself may not have immediate SEO relevance, mobile SEO is a key ranking factor. Using viewport informs search engines whether your website is mobile-friendly and designed to display responsively on various devices. It also ensures the website is displayed correctly on different devices, enhancing overall usability.

Syntax :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Character encoding with charset

The charset meta tag informs browsers of the character encoding, ensuring text is displayed correctly. This is especially important if you haven’t defined the character set in the HTTP header or if the browser retrieves HTML files directly from the hard drive instead of via HTTP(S).

Syntax:

<meta charset="utf-8"/>

Caching with expires

If you don’t want to completely prevent caching, you can use expires to specify when cached HTML data should expire. This can be at a specific time or after a certain amount of time has passed. In modern web applications, however, expires is rarely used, as caching is mostly controlled through HTTP headers.

Syntax:

<meta http-equiv="expires" content="Time (in seconds) when the data should expire"/>

Author and copyright information

To include author and copyright information in the source code, you can use the HTML meta tags author and copyright. This can help with site management and provides transparency about recent changes that have been made to your site.

Syntax:

<meta name="author" content="Author"/>
<meta name="copyright" content="Copyright holder"/>

Keywords

Keywords serve to describe the main focuses of a page, ideally aligning with the search intentions of users. In the past, meta keywords were considered important ranking criteria for websites. While some industries and businesses still use keywords, the relevance of this type of metadata for search engine rankings has significantly diminished, with Google ignoring them for SEO and ranking purposes. Nevertheless, staying informed about relevant keywords can still provide businesses with a competitive advantage.

Syntax:

<meta name="keywords" content="Keyword1, Keyword2, Keyword3…">