Ultimate Guide Of HTML Meta Tags

Meta tags are part of HTML tags that describe the content of your pages to search engines and website visitors. Meta tags only appear in the page code, anyone can view them from the source code (Ctrl+U). We provide an overview of meta tags that are still very important and those that are no longer.

Metatags can be used to increase a website’s visibility in search engines, so they are definitely important for SEO.

Why use Metatags?

As Holland web said, Meta tags play an important role in SEO (Search Engine Optimization). Especially the use of title tags and meta descriptions is very important. These tags are displayed by search engines as a small text entry in search results. Make sure the meta tags on your site are unique for each page and try to make them as attractive as possible. Both the relevant title tags and description tags must convince visitors to click on the link in the search results.

Most Important Meta Tags:

This tag is displayed by search engines as a small text element in search results. Make sure meta tags on your site are unique to each individual page and make them as attractive as possible. Relevant title tags and description tags both have to convince visitors to click on the link in the search results.

1. Title Tag:

   The title tag is important because it serves as the clickable headline in search engine results. It should precisely and concisely describe the page’s content.

   htmlCopy code

   <title>Your Page Title</title>

2. Meta Description Tag:

   The meta description tag provides a concise summary of the content of your website. It appears beneath the page title in search engine results and can influence click-through rates.

   htmlCopy code

   <meta name="description" content="A concise description of your webpage's content." />

3. Meta Robots Tag:

   The meta robots tag instructs search engine crawlers on how to handle your web page. “index” allows the page to be indexed, while “follow” permits search engines to follow links on the page. Other common values include “noindex” and “nofollow.”

   htmlCopy code

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

4. Canonical Tag:

   The canonical tag specifies the preferred URL for duplicate or similar content. It helps search engines understand which version of a page should be indexed and avoids potential duplicate content issues.

   htmlCopy code

   <link rel="canonical" href="https://www.example.com/original-page" />

5. Open Graph Tags (for social sharing):

   Open Graph tags provide information for social media platforms with information when a website is shared. They manage the title, description, and image that appear when your page is shared on social networking sites such as Facebook and Twitter.

   htmlCopy code

   <meta property="og:title" content="Your Page Title" /><meta property="og:description" content="A concise description of your webpage's content." /><meta property="og:image" content="https://www.example.com/image.jpg" />

6. Viewport Tag (for responsive design):

   The viewport tag ensures that your web page is displayed correctly on various devices and screen sizes. It is essential for creating a responsive and mobile-friendly design.

   htmlCopy code

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

Interesting HTML Meta Tags:

there are some interesting and lesser-known HTML meta tags that can serve specific purposes or provide additional functionality. Here are a few examples:

1. Meta Refresh Tag:

   The meta refresh tag redirects the web page to another URL after a specified time delay (in seconds). It can be used for automatic page redirection or to implement timed refreshes.

   htmlCopy code

   <meta http-equiv="refresh" content="5;URL=https://www.example.com">

2. Meta Viewport Tag (for iOS devices):

   htmlCopy code

   <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

   This meta tag is specifically for iOS devices and allows you to control the viewport behavior. It sets the width to the device width, prevents zooming, and disables user scaling.

3. Meta HTTP-Equiv Tag (Character Encoding):

   htmlCopy code

   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

   The meta http-equiv tag with “Content-Type” can specify the character encoding for the web page. In this example, it sets the character encoding to UTF-8, which supports a wide range of international characters.

4. Meta Theme Color (for mobile browsers):

   htmlCopy code

   <meta name="theme-color" content="#ffffff">

   The theme color meta tag allows you to define the browser’s theme color on mobile devices. It affects the browser’s UI elements such as the address bar or task switcher. Specify the color using a hexadecimal value.

5. Meta X-UA-Compatible Tag:

   htmlCopy code

   <meta http-equiv="X-UA-Compatible" content="IE=edge">

   The X-UA-Compatible meta tag is specific to Internet Explorer and allows you to control the version of IE rendering engine used to display the web page. In this example, “IE=edge” ensures the latest version of IE is used.

Expired HTML Meta Tags:

HTML metatags are crucial to web development because they provide metadata information about a web page. While there is no concept of “expiration” for HTML meta tags, as new standards and practices emerge, certain meta tags have become deprecated or obsolete over time. Staying current with the most recent recommendations and best practices is essential for ensuring the optimal performance and compatibility of your web pages.

1. Meta Keywords:

   The meta keywords tag was once used to specify relevant keywords for search engines to index the page. However, due to abuse and keyword stuffing, most search engines no longer consider this tag. It is generally not recommended to use the meta keywords tag anymore. Example:

   htmlCopy code

   <meta name="keywords" content="your, keywords, here">

2. Meta Refresh:

   The meta refresh tag was used to automatically redirect a web page after a specified time interval. It is considered a poor practice for several reasons, such as disrupting the user experience and impacting search engine optimization (SEO). Instead, server-side redirects or JavaScript-based redirection are preferred.Example:

   htmlCopy code

   <meta http-equiv="refresh" content="5; URL=https://example.com">

3. Meta Revisit-after:

   The meta revisit-after tag was used to specify when search engine crawlers should revisit a page. However, major search engines have stated that they do not consider this tag anymore for indexing and ranking purposes. It is no longer necessary to include this meta tag.Example:

   htmlCopy code

   <meta name="revisit-after" content="7 days">

4. Meta Distribution/Robots:

   The meta distribution or meta robots tag was used to control how search engine bots index and display the content of a web page. While these tags can still be used, it is more common to control these settings through the robots.txt file or using the “robots” meta tag. Example:

   htmlCopy code

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

It’s worth noting that while meta tags provide information to search engines, their impact on search engine rankings has diminished over time. Search engines now prioritize factors such as high-quality content, user experience, and backlinks from reputable sources.

Here is a list of all All Metatags In HTML