DEV Community

Cover image for HTML META TAGS
Shubham Tiwari
Shubham Tiwari

Posted on • Edited on

HTML META TAGS

#webdev #html #learning #beginners

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">
Enter fullscreen mode Exit fullscreen mode

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.">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="author" content="John Doe">
Enter fullscreen mode Exit fullscreen mode

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:

<meta http-equiv="X-UA-Compatible" content="IE=edge">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="theme-color" content="#4285f4">
Enter fullscreen mode Exit fullscreen mode

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:

<meta property="og:description" content="This is a sample page for Open Graph testing.">
Enter fullscreen mode Exit fullscreen mode

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 -

<meta property="og:url" content="https://example.com/page-url">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="twitter:card" content="summary">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="twitter:title" content="Sample Twitter Card">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="twitter:image" content="<https://example.com/twitter-card-image.jpg>">
Enter fullscreen mode Exit fullscreen mode

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:

<meta http-equiv="pragma" content="no-cache">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="apple-mobile-web-app-capable" content="yes">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="format-detection" content="telephone=no">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="robots" content="noindex, nofollow">
Enter fullscreen mode Exit fullscreen mode

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:

<meta name="generator" content="WordPress">
Enter fullscreen mode Exit fullscreen mode

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:

<meta http-equiv="X-Content-Type-Options" content="nosniff">
Enter fullscreen mode Exit fullscreen mode

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:

<meta http-equiv="Content-Security-Policy" content="default-src 'self'">
Enter fullscreen mode Exit fullscreen mode

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

shubhamtiwari909

CSS | Trigonometry Circle

Shubham Tiwari ・ Sep 19 '23

#html #css #webdev #tutorial
shubhamtiwari909

Next JS | Multi-Step Form

Shubham Tiwari ・ Sep 11 '23

#react #javascript #webdev #nextjs
shubhamtiwari909

React Components | Gallary

Shubham Tiwari ・ Sep 6 '23

#react #javascript #webdev #tutorial
shubhamtiwari909

React interactive Components | Tabs

Shubham Tiwari ・ Sep 2 '23

#webdev #react #javascript #tutorial

Top comments (1)

Collapse
 
umi_84 profile image
Aloof •

Absolute banger!!