What are HTML meta tags and how to use them ef­fec­tive­ly

HTML meta tags are pieces of in­for­ma­tion 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 op­ti­miza­tion (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, de­vel­op­ers can share important in­for­ma­tion with search engines, such as the language of a site as well as its content, structure and character encoding.

Meta tags in HTML are fun­da­men­tal for op­ti­miz­ing 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 de­scrip­tions remain important.

How are HTML meta tags used?

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

• Search engine op­ti­miza­tion (SEO): Meta tags like <description> and <title> provide search engines with insights into the content and focus of a page, helping to summarize the page clearly and attract clicks.
• Indexing: Metadata such as robots instructs search engines on whether to index a page or not.
• Display and pre­sen­ta­tion: 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.
• Ac­ces­si­bil­i­ty: Metadata plays a vital role in ac­ces­si­bil­i­ty. For example, it aids screen readers in cat­e­go­riza­tion 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 ma­nip­u­late metadata led to issues such as keyword stuffing.

Nev­er­the­less, metadata and HTML meta tags have not lost their im­por­tance for modern search engines. In fact, improper use of metadata can result in a website being com­plete­ly over­looked. Correctly including relevant metadata like a<title> tag and meta de­scrip­tions, along with regular updates, can still be crucial to main­tain­ing 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 op­ti­miza­tion (SEO)

Search engine op­ti­miza­tion 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 tech­ni­cal­ly 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 de­scrip­tion

While the meta de­scrip­tion doesn’t directly influence rankings, it serves as the first point of contact with users, providing important in­for­ma­tion that can encourage clicks. It’s important that they aren’t too long or too short and include elements like icons or symbols high­light­ing 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 in­struc­tions 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 per­mis­sion 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 re­spon­sive 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 re­spon­sive­ly 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 es­pe­cial­ly 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 com­plete­ly 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 ap­pli­ca­tions, however, expires is rarely used, as caching is mostly con­trolled through HTTP headers.

Syntax:

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

Author and copyright in­for­ma­tion

To include author and copyright in­for­ma­tion in the source code, you can use the HTML meta tags author and copyright. This can help with site man­age­ment and provides trans­paren­cy 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 in­ten­tions of users. In the past, meta keywords were con­sid­ered important ranking criteria for websites. While some in­dus­tries and busi­ness­es still use keywords, the relevance of this type of metadata for search engine rankings has sig­nif­i­cant­ly di­min­ished, with Google ignoring them for SEO and ranking purposes. Nev­er­the­less, staying informed about relevant keywords can still provide busi­ness­es with a com­pet­i­tive advantage.

Syntax:

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