HTML
JAVASCRIPT
CSS
PYTHON

HTML Meta Tags

HTML Meta Tags(<meta>)

The HTML <meta> tag is used to define metadata for an HTML document. Metadata provides additional information about the document, which can be utilized in various ways, such as improving search engine optimization (SEO), defining the document’s character set, or setting its viewport properties for responsive design.

The <meta> tag is a self-closing element, meaning it does not require a closing tag. It carries information through its attributes, such as name, content, charset, and http-equiv. For example, you can use <meta> tags to specify the document’s author, define keywords, or set an expiry date.

Although <meta> tags do not directly affect the visual appearance of a webpage, they play a crucial role in how the document is interpreted by search engines, browsers, and other tools. Including them can enhance accessibility, compatibility, and discoverability of your content.

Adding Metadata to Web Pages Using Meta Tags

Metadata can be added to your web pages by including <meta> tags within the <head> section of the HTML document. These tags provide information about the document to browsers, search engines, and other tools.

  • Document Character Encoding: Specify the character set, such as UTF-8, using the charset attribute.
  • Keywords: Add a list of keywords related to the content for search engines using the name="keywords" attribute.
  • Description: Provide a brief description of the page content using name="description".
  • Author: Indicate the name of the document's author using name="author".
  • Viewport Settings: Define how the page should be displayed on different devices using the name="viewport" attribute.

Meta tags are essential for improving SEO, ensuring compatibility across devices, and providing additional document information. While they don't affect the visual appearance of a web page, they play a critical role in enhancing its functionality and discoverability.

Example Meta Tags with All Common Attributes

<!DOCTYPE html>
<html lang="en">
  <head>
  <!-- Character Set -->
 
  <!-- Viewport for Responsive Design -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <!-- Title of the Page -->
  <title>Example Meta Tags</title>

  <!-- Description for Search Engines -->
  <meta name="description" content="An example showcasing all common meta tag attributes .">

  <!-- Keywords for Search Engines -->
  <meta name="keywords" content="meta tags, HTML, SEO, example">

  <!-- Author Information -->
  <meta name="author" content="John Doe">

  <!-- Robots Instruction -->
  <meta name="robots" content="index, follow">

  <!-- Language of the Page -->
  <meta name="language" content="English">

  <!-- Theme Color -->
  <meta name="theme-color" content="#ffffff">

  <!-- Open Graph for Social Sharing -->
  <meta property="og:title" content="Example Meta Tags">
  <meta property="og:description" content="An example showcasing all common meta tag attributes.">
  <meta property="og:image" content="https://topfreecourse.com/image.jpg">
  <meta property="og:url" content="https://topfreecourse.com">
  <meta property="og:type" content="website">

  <!-- Twitter Card for Social Sharing -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Example Meta Tags">
  <meta name="twitter:description" content="An example showcasing all common meta tag attributes .">
  <meta name="twitter:image" content="https://topfreecourse.com/image.jpg">

  <!-- Application Name -->
  <meta name="application-name" content="Meta Example App">

  <!-- Favicon Information -->
  <link rel="icon" href="favicon.ico" type="image/x-icon">
  </head>
  <body>
    <h1>Meta Tags Example</h1>
    <p>This is a webpage demonstrating various meta tags.</p>
  </body>
</html>
Previous