A meta tag in HTML is an element that provides metadata about the HTML document. Metadata is data that describes other data, and in this case, it helps search engines and browsers understand how to handle or display content. The <meta> tag does not appear directly on the webpage, but it provides information to search engines, browsers, and other services that interact with the page.
Syntax:
<meta name="name_of_the_meta_tag" content="value_of_the_meta_tag">
In this syntax:
- name: Specifies the name of the metadata, such as
description, keywords, author, etc. - content: Specifies the value of the metadata, such as a page description or a list of keywords.
Now, let us understand with the help of the example:
HTML
<head>
<meta charset="UTF-8">
<meta name="description" content="Latest tech news, tutorials, and reviews on gadgets and software.">
<meta name="keywords" content="tech, gadgets, software, reviews, tutorials">
<meta name="author" content="Pushkar">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
In the example above:
charset="UTF-8" defines the character encoding used for the document.name="description" provides a short description of the page, which may be used by search engines.name="keywords" specifies keywords relevant to the page, helping search engines index the content.name="author" identifies the author of the page.name="viewport" ensures the page is responsive on all devices by adjusting the width and zoom level.
Meta tags are always placed within the <head> section of an HTML document. The content inside a meta tag is not displayed on the page, but it helps browsers, search engines, and other web services understand how to process and display the webpage.
The character encoding <meta> tag specifies the character set used to display the page. This is essential for ensuring that all text, including special characters, is displayed correctly.
<meta charset="UTF-8">
- UTF-8 is a popular character encoding standard that includes most characters from all known languages, making it ideal for global websites.
The description <meta> tag provides a short, relevant description of the webpage. This is often used by search engines to display a snippet of the page in search results. The description should be concise and accurately reflect the content of the page.
<meta name="description" content="Free Web tutorials for HTML and CSS">
The keywords <meta> tag allows webmasters to specify keywords relevant to the page’s content. While this tag was once heavily used for SEO purposes, it has become less important in modern search engine algorithms.
<meta name="keywords" content="HTML, CSS, JavaScript">
The author <meta> tag specifies the author of the webpage. While this tag doesn’t directly impact SEO, it is useful for providing credit to the creator.
<meta name="author" content="John Doe">
The viewport <meta> tag is essential for making webpages mobile-friendly. It controls the layout on mobile devices by defining the width and scale of the page to fit different screen sizes.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width ensures the page width matches the device’s screen width.initial-scale=1.0 sets the initial zoom level of the page when it is first loaded.
The refresh <meta> tag automatically reloads or redirects a webpage after a certain period. This functionality is not as commonly used today, with JavaScript offering more control over page reloading and redirection.
<meta http-equiv="refresh" content="30">
The information provided by meta tags is important for search engine optimization (SEO). Although the meta keywords tag is less impactful today, the description and viewport tags remain highly relevant for SEO.
- Description: Search engines like Google often use the description from the
<meta> tag as the snippet displayed in search results. Writing a clear and attractive description with the right keywords can make users more likely to click on your page. - Viewport: Ensuring your page is mobile-friendly is essential for SEO, as Google uses mobile-first indexing. A responsive design improves user experience and search engine ranking.
- Use the
viewport Meta Tag: Always include it to ensure your website is mobile-friendly and adapts to different screen sizes. - Write a Clear and Concise Description: Keep the description brief and accurate; it often appears in search engine results and can affect click-through rates.
- Don’t Overuse the Keywords Tag: Modern search engines don’t rely much on the
keywords meta tag. Focus on good content and natural keywords. - Ensure Proper Character Encoding: Use UTF-8 for character encoding to avoid display issues and support multiple languages.
- Test on Different Devices: Make sure your site looks good on desktops, tablets, and phones, especially with the viewport settings.
Browsers Support
| Browsers |  |  |  |  |  |
|---|
| <meta> tag | Yes | Yes | Yes | Yes | Yes |
Conclusion
The <meta> tag is a tool for web developers which provides an essential information that helps browsers, search engines, and other services understand and display a webpage correctly. By properly using meta tags like description, keywords, author, and viewport, you can enhance your website’s SEO, make it mobile-friendly, and provide a better user experience.
Similar Reads
HTML DOCTYPE Declaration
HTML DOCTYPE (Document Type Declaration) is an instruction that appears at the beginning of an HTML document, before the <html> tag. Its primary role is to tell the web browser which version of HTML the page is written in, ensuring that the browser renders the content correctly. It is not an H
4 min read
HTML abbr Tag
The <abbr> tag in HTML is used to represent abbreviations and provides additional information about them through the title attribute, which displays a tooltip when hovered over. It helps improve accessibility and SEO by offering context for the abbreviated text. It makes text clearer by explai
3 min read
HTML acronym Tag
The HTML <acronym> tag was used to define an acronym, providing a way to identify and explain abbreviated terms in web content. However, it's deprecated in favor of <abbr>, which serves the same purpose but is more semantically correct. Syntax:Â <acronym title=""> Short Form </a
2 min read
HTML < address> Tag
The <address> tag in HTML is used to define contact information for the author or owner of a document or an article. It is typically used for information such as an address, email, or phone number. The <address> element is a block-level element by default.The content inside <address
3 min read
HTML a Tag
The <a> tag defines a hyperlink, which is used to link from one page to another. The most important attribute of the <a> element is the href attribute, which indicates the link's destination. This attribute determines where the user is directed upon clicking the link. [GFGTABS] HTML <
3 min read
HTML applet Tag
The applet tag in HTML was used to embed Java applets into any HTML document. The <applet> tag was deprecated in HTML 4.01, and its support has been completely discontinued starting from HTML 5. Alternatives available in HTML 5 are the <embed> and the <object> tags. Some browsers s
2 min read
HTML area Tag
This <area> tag is used in an HTML document to map a portion of an image to make it clickable by the end user. This specifies the location and size of the active region on an image, which can be clicked. Clicking on areas with href attributes directs to a specified URL or action. [GFGTABS] htm
3 min read
HTML article Tag
The HTML <article> tag defines a self-contained, independent piece of content like a blog post, news article, or comment. It is designed for content that can be independently distributed, shared, or reused, providing semantic meaning to the content. This tag is introduced in HTML5. [GFGTABS] H
3 min read
HTML aside Tag
The <aside> tag is used to describe the main object of the web page more shortly like a highlighter. It identifies the content that is related to the primary content of the web page but does not constitute the main intent of the primary page. The <aside> tag contains mainly author inform
3 min read
HTML5 < audio> Tag
The <audio> tag in HTML5 is used to embed audio content on a webpage. It allows you to play audio files like MP3, OGG, or WAV directly in the browser. The <audio> element provides attributes for controlling playback, such as play, pause, and volume. Using the <source> element enabl
3 min read