Meta tags a website cannot go without

Carlos CipherCode Design Studios by Carlos Timotheus · 20 Jul, 2021 · 2 min read

The meta tag specifies metadata about a HTML document.


The metadata specified in these tags are not displayed on a webpage but instead used by browsers and search engines.


Quality meta tags can be the difference between your website ranking on the first page or the dreaded second page of Google search results.

Structure of a meta tag

Meta tags are self enclosing tags.


Meta tags do not have a closing tag and therefore carries additional information within their attributes.


Meta tag structure (attributes)
Meta tag structure (attributes)

Where to add meta tags in your HTML document?

Metadata is placed inside the head section of an HTML file between the opening and closing <head> tags.

Metadata: charset

The charset attribute specifies the character encoding used by the HTML document.


Meta charset tag
meta charset tag

The UTF-8 value in the charset attribute specifies to the browser which character encoding to use when printing machine code into readable text so that it can render on the web page.

Metadata: viewport

The viewport meta tag specifies how the webpage should display on mobile devices.


Meta viewport tag
meta viewport tag

Metadata: description

The meta description tag contains a short description of the page wherein it is placed.


Meta description tag
meta description tag

Each page should have a unique meta description.


Furthermore, search engines often ignore web pages with duplicate meta descriptions!


TIP: Keep meta descriptions between 122 to 155 characters.

Metadata: google-site-verification

The google-site-verification meta tag ensures that your webpage is verified for Search Console.


Google site verification tag
Google site verification tag

Metadata: robots

The robots meta tag provides crawler instructions on how to crawl or index webpage content.


Meta robots tag
meta robots tag

Meta tags conclusion

Although meta tags do not render content on the web page, it still plays a key role in how browsers convey your message to users.


Furthermore, these tags also contribute to SEO and page ranking on search results.


Stay tuned for more web development and SEO tips.

Syntax

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="" />
    <meta name="google-site-verification" content="+nxGUDJ4QpAZ5l9Bsjdi102tLVC21AIh5d1Nl=" />
    <meta name="robots" content="noindex, nofollow" />
</head>