RetroSearch Browse

Home - News ( United States | United Kingdom | Italy | Germany ) - Football scores

Showing content from https://www.geeksforgeeks.org/html/html-meta-tag/ below:

HTML <meta> Tag - GeeksforGeeks

HTML <meta> Tag

Last Updated : 11 Jul, 2025

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.

1. Character Encoding Meta Tag

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.

2. Description Meta Tag

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">

3. Keywords Meta Tag

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">

5. Viewport Meta Tag

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.

6. Refresh Meta Tag

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 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.

RetroSearch is an open source project built by @garambo | Open a GitHub Issue

Search and Browse the WWW like it's 1997 | Search results from DuckDuckGo

HTML: 3.2 | Encoding: UTF-8 | Version: 0.7.4