Different META Tag Examples

As an HTML5 developer, understanding the full range of HTML5 meta tags is crucial. These tags play a vital role in defining the metadata of a web page, which can influence its behavior and how it's processed by browsers and search engines. Below is a comprehensive list of HTML5 meta tags along with examples for each:

1. Charset Declaration:
   • Purpose: Specifies the character encoding for the HTML document.
   • Example: <meta charset="UTF-8">
2. Viewport:
   • Purpose: Controls the viewport's size and scale, particularly important for responsive design.
   • Example: <meta name="viewport" content="width=device-width, initial-scale=1">
3. Description:
   • Purpose: Provides a brief description of the page, often used by search engines.
   • Example: <meta name="description" content="This is a sample description of the webpage.">
4. Keywords:
   • Purpose: Specifies a list of keywords relevant to the page (less important for SEO nowadays).
   • Example: <meta name="keywords" content="HTML5, web development, programming">
5. Author:
   • Purpose: Indicates the author of the HTML document.
   • Example: <meta name="author" content="John Doe">
6. efresh:
   • Purpose: Sets an automatic refresh and optional redirect for the page.
   • Example: <meta http-equiv="refresh" content="30"> or for redirect <meta http-equiv="refresh" content="5;url=http://example.com">
7. Content-Type:
   • Purpose: Specifies the MIME type and character set of the document (often replaced by the simpler charset declaration in HTML5).
   • Example: <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
8. Content-Language:
   • Purpose: Declares the language of the document.
   • Example: <meta http-equiv="content-language" content="en-us">
9. Cache-Control:
   • Purpose: Controls browser caching behaviors.
   • Example: <meta http-equiv="Cache-Control" content="no-cache, no-store, must-revalidate">
10. Pragma:
    • Purpose: Backwards compatible header for cache control.
    • Example: <meta http-equiv="Pragma" content="no-cache">
11. Expires:
    • Purpose: Sets an expiration date for the document, useful for caching purposes.
    • Example: <meta http-equiv="Expires" content="Wed, 21 Oct 2021 07:28:00 GMT">
12. X-UA-Compatible:
    • Purpose: Used to specify compatibility modes in Internet Explorer.
    • Example: <meta http-equiv="X-UA-Compatible" content="IE=edge">
13. Open Graph Protocol Tags:
    • Purpose: Integrates web pages into the social graph (Facebook, LinkedIn, etc.).
    • Examples:
      1. <meta property="og:title" content="The Title of Your Webpage">
      2. <meta property="og:description" content="A description of your webpage.">
      3. <meta property="og:image" content="http://example.com/image.jpg">
14. Twitter Card Tags:
    • Purpose: Enhances shared content on Twitter.
    • Examples:
      1. <meta name="twitter:card" content="summary">
      2. <meta name="twitter:site" content="@username">
15. Robots:
    • Purpose: Directs search engine crawlers.
    • Example: <meta name="robots" content="index, follow">
16. Application-Name:
    • Purpose: Names the web application.
    • Example: <meta name="application-name" content="Application Name">

Each of these meta tags serves a specific purpose, ranging from optimizing your site for search engines to ensuring it displays correctly on various devices. Correct implementation of these tags is essential for modern web development practices.

<META NAME="description" CONTENT="text">

<META HTTP-EQUIV="copyright" CONTENT="name-date">
Used to add copyright information.
<META NAME="keywords" CONTENT="keyword1, keyword2">
Lists keywords used by search engines in addition to words in document; tag ignored if keyword is repeated more than seven times.
<META HTTP-EQUIV="content type" CONTENT="text/html; charset=ISO-8859-8">
Used to specify MIME types.

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="Refresh" content="5">

<meta name="robots" content="noindex,follow">
<meta name="description" content="A description of the content on the page, which may appear in search engine results">
<meta name="keywords" content="reference, SitePoint, HTML, XHTML, standards">