HTML
JAVASCRIPT
CSS
PYTHON
JAVA
SQL

HTML Meta Tags

HTML Meta Tags(<meta>)

The HTML <meta> tag is utilized to define metadata, providing essential information about 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 self-closing, eliminating the need for a separate closing tag. It carries information through its attributes, such as name, content, charset, and http-equiv. For example <meta> tags can define the document’s author, set relevant keywords, or determine an expiration date for content.

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: Define the character set (e.g., UTF-8) with the charset attribute.
  • Keywords: Use thename="keywords" attribute to list relevant keywords for search engine optimization.
  • Description: Provide a brief content summary usingname="description".
  • Author: Identify the document’s author using the name="author" attribute.
  • Viewport Settings: Control the page's display on various devices with 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