DEV Community

Cover image for Beginner's Best Guide to Meta Tags for SEO.
Ritapossible
Ritapossible

Posted on

Beginner's Best Guide to Meta Tags for SEO.

Meta tags are snippets (small pieces) of code that provide information about a web page to both search engines and visitors. They are located in the head section of the HTML code and do not appear on the page itself.

Here is one example:

<html lang="en">
<head>
    <title>Ripossita Luxury Store</title>
    <meta charset="UTF-8" />
    <meta name="veiwport" content="width=device-width, initial-scale=1.0"/>
<head/>`
Enter fullscreen mode Exit fullscreen mode

Meta tags tell browsers how to display a website on your device. That is, they can make sure the website displays accurately and correctly for both desktop and mobile users.

Therefore, this tells browsers like Google that a website is mobile-friendly. This can help the website rank higher in the Google search engine.

What is SEO

Search Engine Optimization (SEO) is the process of improving the visibility of a website or a web page in search engine results pages (SERPs).

In this article, you will learn the SEO basics and the best guide for using meta tags to optimize a web page.

Let's get started.

There are many types of meta tags, in this article, we will be discussing some of the most important and commonly used ones.

Title tag:

This is the most important meta tag for SEO. it is the text that appears in the search results title bar and is also used as the clickable link in the search results.

Here is what the title looks like on Google search results.

Image description

Here is the code.

<title>Best Fashion Websites | Web Design Inspiration</title>
Enter fullscreen mode Exit fullscreen mode

How to Optimize Your Title Tags for SEO.

-Add the title tag for each webpage.

-The title tag should be descriptive and accurate.

-The title page should not be long - under 60 characters is best.

-It should include the target keywords that you want to rank for.

-Avoid generic and vague titles, for example, 'Home' for the homepage.

-Include the targeted keywords that you want to rank for.

-Create a distinctive title tag for each page on your site.

Meta Description Tag:

This is a brief summary of the content of a web page. Meta description can be used to encourage users to click through to the page. It appears below the title tag in SERPs.

For instance:

Image description

Here is the code.

<meta name="description" content="Best selection of Fashion Website examples for your inspiration. · thebrandingcrew · Bien-Fondé · nextdecade · blubolt · basement studio · Pawel Gola · Orviko · North ..."/>
Enter fullscreen mode Exit fullscreen mode

How to Optimize Your Meta Description for SEO.

-The meta description should be no more than 160 characters long.

-It should include the page's target keywords.

-Be descriptive, accurate, and concise.

-Ensure to avoid duplicate meta descriptions on your website.

-Make use of sentence case.

-Create distinct summaries for each page.

Viewport Meta Tag:

In the simplest form, the viewport is the user's visible area of the webpage. This tag helps to control the width of your page in the browser. That is to say, if you are using a mobile phone to access a website you will be getting a smaller viewport than someone who is using a desktop to access the same website.

Viewport meta tag is used to achieve a responsive design on different screen sizes. Add the below code to the head section of your HTML code to achieve a mobile-friendly website.

<meta name="veiwport" content="width=device-width, initial-scale=1.0"/>
Enter fullscreen mode Exit fullscreen mode

Optimize Your Viewport Meta Tag for SEO.

Viewport meta tag has become one of the best SEO practices, this is because over 50% internet searches are accessed through mobile devices.

Your website will experience a high increase in bounce rate (visitors leaving your website) from visitors who make use of mobile devices to access your website if you fail to include a viewport meta tag to your website to make it responsive for mobile devices.

This can send Google a negative sign which can hinder your website search rankings. It is to be noted that Google understands pages with responsive design better than pages that don't use it. This enables Google to rank those pages higher than pages that don't use the viewport meta tag and responsive design.

Robots Meta Tag:

This tag tells search engines how to index and crawl your pages. By default, all the pages and links in your web pages are indexed by search bots and web crawlers. Therefore, you can use the robots meta tag to control how Googlebot handles the indexing.

Here is what the robots meta tag looks like. It should also be included in the head section of your HTML code.

<meta name="robots" content="noindex">
Enter fullscreen mode Exit fullscreen mode

The instruction is added inside the content attribute for the search engine.

Here are some common parameters:

Index: This instructs the web crawlers to index your web page. If your web page doesn't contain anything, the page will be indexed by default making it possible to be seen by the people making use of search engines.

Noindex: This instructs the search engines not to add the web pages to their index, therefore the web page won't be shown on the search results page.

Noarchive: This instructs search engines not to cache or show the page.

Follow: This enables search engines to follow links in your web pages and leads the reader to other pages. This is by default if it's not added to the webpage.

Nofollow: This is the opposite of follow parameter. This gives instructions to the search engine bots not to crawl links on the page and that you don’t endorse the links. Some sites use it as a safety net to notify search engines that they’re not practicing spammy link techniques.

Optimize Your Robots Meta Tag for SEO.

The use of noindex parameter is not a good practice for SEO as it restricts Google from indexing duplicate contents of your webpage.

You may want to use the nofollow meta robots tag if you don’t want Google to crawl links on that page. This is applicable if your webpage has comment sections and you don't want people to spam it with links that leads to their own websites.

Conclusion:

There are many things to be discussed under meta tags and SEO that were not included in this article. By following these tips discussed above, you can optimize your meta tags for SEO and improve your chances of ranking high in search results, you don't have to be an expert to achieve this.

Thank you for reading through, if you liked this article consider connecting with me on Twitter.

Cheers!!!

Top comments (0)