DEV Community

Cover image for HTML META TAGS
Shubham Tiwari
Shubham Tiwari

Posted on • Updated on

HTML META TAGS

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

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)