Hypertext Markup  «Prev 

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.

Examples of META tags

Meta Tag Diagram
Meta Tag Diagram

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

Causes search engine to display specified text instead of actual first lines of document.
<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">

The following meta tags are the most relevant in terms of search engine indexing and interpretation:
<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">

The search engines declining interest in the "description" and "keywords" meta elements may mean that it is preferable for us to drop them entirely. As with all meta elements, there is a danger that, because they are hidden from normal page view, the content can easily go out of date. So unless you know for a fact that the content in these types of meta elements is going to be properly maintained and that they