The <meta> tag is a key element in the <head> section of an HTML document, providing metadata about the webpage. This data is not displayed directly on the page but is crucial for browsers, search engines, and other web services. The <meta> tag primarily uses the name and http-equiv attributes to define its purpose.
The name Attribute
The name attribute defines document-related meta information for search engines, social media platforms, or other client software. Its value is specified via the content attribute.
Common name Values
- description: Provides a concise summary of page content, often shown in search engine results.
<meta name="description" content="A detailed guide to HTML meta tags and their attributes."> - keywords: Supplies keywords related to page content (modern search engines give this low weight).
<meta name="keywords" content="HTML, meta tag, name, http-equiv, SEO"> - author: Declares the webpage author.
<meta name="author" content="Author Name"> - viewport (Essential for modern web development): Controls mobile viewport size and scaling, crucial for responsive design.
<meta name="viewport" content="width=device-width, initial-scale=1.0"> - robots: Instructs search engine crawlers on indexing and following links.
<meta name="robots" content="index, follow">
The http-equiv Attribute
The http-equiv attribute simulates HTTP response headers, instructing the browser how to perform certain actions or handle the page. It is also paired with the content attribute.
Common http-equiv Values
- Content-Type (Obsolete; use <meta charset> instead): Declares document character encoding. The modern standard is:
<meta charset="UTF-8"> - X-UA-Compatible: Instructs Internet Explorer to use the latest rendering mode (for legacy IE compatibility).
<meta http-equiv="X-UA-Compatible" content="IE=edge"> - Refresh: Refreshes the page or redirects to another URL after a specified number of seconds.
<meta http-equiv="Refresh" content="5"> <meta http-equiv="Refresh" content="3; url=https://example.com/"> - Content-Security-Policy (CSP): Defines a Content Security Policy to help prevent attacks like cross-site scripting (XSS).
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
Key Notes & Best Practices
- Character Encoding: Always use
<meta charset="UTF-8">as the first element in<head>to ensure correct character rendering. - Viewport Setting: For mobile-friendly websites, the
viewportmeta tag is essential. - Obsolete Attributes: Attributes like
Generator,Expires, andPragmaare rarely used in modern development, having been replaced by better practices (HTTP headers, CSS, JavaScript). - SEO: The
descriptionis important for search engine results pages (SERPs) and should be written carefully. Thekeywordsmeta tag has minimal impact today.
Proper use of meta tags is fundamental for building standard, accessible, and search-engine-friendly web pages. Select necessary tags based on actual needs and follow the latest web standards.