HTML meta tags are special elements that provide metadata about an HTML document. They do not affect how the document is displayed but provide information such as character encoding, authorship, viewport settings, and other metadata to browsers and search engines.
1. Charset
Use: Specifies the character encoding for the HTML document.
Example:
<meta charset="utf-8">
2. Viewport
Use: Configures the viewport properties, enabling responsive design on different devices.
Example:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
3. Description
Use: Provides a brief description of the document. This is often used by search engines.
Example:
<meta name="description" content="This is a sample webpage about HTML meta tags.">
4. keywords
Use: Specifies a list of comma-separated keywords relevant to the document.
Example:
<meta name="keywords" content="HTML, meta tags, web development">
5. Author
Use: Indicates the author of the document.
Example:
<meta name="author" content="John Doe">
6. Refresh
Use: Redirects the browser to another URL after a specified time interval (in seconds).
Example:
<meta http-equiv="refresh" content="5;url=<https://example.com/>">
7. X-UA-Compatible
Use: Instructs Internet Explorer to use its latest and best version to render the web page.
Example:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
8. Robots - index, follow
Use: Informs search engines whether to index and follow the links within the document.
Example:
<meta name="robots" content="index, follow">
9. Theme-color
Use: Sets the theme color for some browsers. It affects the look of the browser's UI elements when the site is added to the home screen on mobile.
Example:
<meta name="theme-color" content="#4285f4">
10. og:title
Use: Specifies the title of the Open Graph object (for social media sharing).
Example:
<meta property="og:title" content="Sample Page">
11. og:description
Use: Provides a description of the Open Graph object for social media sharing.
Example:
<meta property="og:description" content="This is a sample page for Open Graph testing.">
12. og:image
Use: Specifies the URL of the image for the Open Graph object (for social media sharing).
Example:
<meta property="og:image" content="<https://example.com/image.jpg>">
13. og:url
Use - Specifies the URL of the Open Graph object (your webpage) for social media sharing.
Example -
<meta property="og:url" content="https://example.com/page-url">
14. twitter:url
Use - Specifies the URL of the Twitter card associated with the shared content.
Example -
<meta name="twitter:url" content="https://example.com/twitter-card-url">
15. twitter:card
Use: Specifies the card type for the Twitter card metadata.
Example:
<meta name="twitter:card" content="summary">
16. twitter:site
Use: Associates a Twitter username with the website for Twitter cards.
Example:
<meta name="twitter:site" content="@example">
17. twitter:title
Use: Sets the title for the Twitter card.
Example:
<meta name="twitter:title" content="Sample Twitter Card">
18. twitter:description
Use: Provides a description for the Twitter card.
Example:
<meta name="twitter:description" content="This is a sample Twitter card description.">
19. twitter:image
Use: Specifies the URL of the image for the Twitter card.
Example:
<meta name="twitter:image" content="<https://example.com/twitter-card-image.jpg>">
20. cache-control
Use: Directs browsers not to cache the content of a web page.
Example:
<meta http-equiv="cache-control" content="no-cache, no-store, must-revalidate">
21. Pragma
Use: Provides instructions to the browser not to store a cached copy of the web page.
Example:
<meta http-equiv="pragma" content="no-cache">
22. Expires
Use: Sets an expiration date in the past, essentially telling the browser the page has expired.
Example:
<meta http-equiv="expires" content="0">
23. apple-mobile-web-app-capable
Use: Specifies whether a web application should run in full-screen mode when launched on an iOS device.
Example:
<meta name="apple-mobile-web-app-capable" content="yes">
24. apple-mobile-web-app-status-bar-style
Use: Sets the style of the status bar for a web app on iOS devices.
Example:
<meta name="apple-mobile-web-app-status-bar-style" content="black">
25. format-detection
Use: Prevents automatic detection and formatting of possible phone numbers in a webpage.
Example:
<meta name="format-detection" content="telephone=no">
26. referrer"
Use: Specifies the referrer policy for links on a webpage.
Example:
<meta name="referrer" content="no-referrer">
27. robots - noindex, nofollow
Use: Directs search engines not to index the content of a page and not to follow the links on that page.
Example:
<meta name="robots" content="noindex, nofollow">
28. revisit-after
Use: Informs search engines when to revisit and re-crawl a webpage.
Example:
<meta name="revisit-after" content="7 days">
29. generator
Use: Indicates the software or tool used to create the webpage.
Example:
<meta name="generator" content="WordPress">
30. content-language
Use: Specifies the language of the content on the webpage.
Example:
<meta http-equiv="content-language" content="en">
31. X-Content-Type-Options
Use: Prevents browsers from interpreting files as a different MIME type.
Example:
<meta http-equiv="X-Content-Type-Options" content="nosniff">
32. X-Frame-Options
Use: Prevents a webpage from being displayed in a frame or iframe.
Example:
<meta http-equiv="X-Frame-Options" content="deny">
33. Content-Security-Policy
Use: Helps prevent cross-site scripting (XSS) and other code injection attacks.
Example:
<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
34. Strict-Transport-Security
Use: Enforces the use of HTTPS for the website.
Example:
<meta http-equiv="Strict-Transport-Security" content="max-age=31536000; includeSubDomains">
For the most accurate and up-to-date information on browser support for specific HTML meta tags, we can check resources like MDN Web Docs (MDN Web Docs ) or Can I use (Can I use... Support tables for HTML5, CSS3, etc ), which provide detailed compatibility tables for HTML, CSS, and JavaScript features across various browsers and versions.
Feel free to give suggestions in comments
THANK YOU FOR CHECKING THIS POST
You can contact me on -
Instagram - https://www.instagram.com/supremacism__shubh/
LinkedIn - https://www.linkedin.com/in/shubham-tiwari-b7544b193/
Email - shubhmtiwri00@gmail.com
You can help me with some donation at the link below Thank you👇👇
☕ --> https://www.buymeacoffee.com/waaduheck <--
Also check these posts as well
Top comments (0)