Meta tags a website cannot go without
Carlos Timotheus
Frontend Developer | Software Engineer | HTML | CSS | JavaScript | ReactJS | TypeScript | Next.js | Laravel
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.
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.
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.
领英推荐
Metadata: description
The meta description tag contains a short description of the page wherein it is placed.
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.
Metadata: robots
The robots meta tag provides crawler instructions on how to crawl or index webpage content.
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.
Nevertheless, use the snippet below as a guide when building a custom website.
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="+nxGUDJ4QpAZ5l9Bsjd1Nl=" />
<meta name="robots" content="noindex, nofollow" />
</head>
Visit CipherCode Design Studios for more web development and SEO tips.