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:```
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: ```
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: ```
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: ```
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: ```
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: ```
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 - ```
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: ```
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: ```
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: ```
name="twitter:image" content="">
## 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: ```
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: ```
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: ```
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: ```
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: ```
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: ```
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: ```
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)