HTML - Meta Tags

Ethan D. -

Types of Meta Tags

Metadata

Metadata meta tags give information about the HTML document. They are not shown on the page but are read by search engines and web crawlers. Some examples of metadata meta tags are:

Meta Tag Description
<meta name="author" content="John Doe"> Specifies the author of the webpage.
<meta name="keywords" content="HTML, meta tags, SEO"> Lists keywords related to the content of the webpage, which can help with search engine optimization (SEO).
<meta name="description" content="Learn about the different types of meta tags in HTML."> Provides a short description of the webpage's content, often used by search engines as the snippet in search results.

HTTP Headers

HTTP header meta tags give instructions to web browsers and servers about how to handle the webpage. They can control caching, content type, and more. Some common HTTP header meta tags include:

Meta Tag Description
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> Specifies the content type and character encoding of the webpage.
<meta http-equiv="expires" content="Wed, 21 Oct 2015 07:28:00 GMT"> Sets an expiration date for the webpage, after which it will be refreshed from the server.
<meta http-equiv="refresh" content="5; url=https://www.example.com"> Refreshes the webpage after a specified number of seconds and/or redirects to another URL.

Viewport

The viewport meta tag controls how the webpage is displayed on mobile devices. It sets the visible area (viewport) of the webpage, which can be used to create responsive designs that adapt to different screen sizes. The viewport meta tag looks like this:

Example: Viewport Meta Tag

<meta name="viewport" content="width=device-width, initial-scale=1.0">

This sets the width of the viewport to the width of the device and scales the initial zoom level to 1.0.

Social Media

Meta tags can also be used to optimize webpages for social media sharing. These tags control how the webpage appears when shared on platforms like Facebook and Twitter.

Open Graph (OG) tags are used by Facebook and other social media platforms to grab information about the webpage. Some examples of OG tags are:

Meta Tag Description
<meta property="og:title" content="My Webpage Title"> Sets the title of the webpage when shared on social media.
<meta property="og:description" content="A brief description of my webpage."> Provides a description of the webpage for social media sharing.
<meta property="og:image" content="https://example.com/image.jpg"> Specifies an image to be used when the webpage is shared on social media.

Twitter Card tags are similar to Open Graph tags but are specific to Twitter. They allow you to control how your webpage appears in tweet snippets. Some examples of Twitter Card tags are:

Meta Tag Description
<meta name="twitter:card" content="summary"> Specifies the type of Twitter Card to use (summary, summary_large_image, app, or player).
<meta name="twitter:title" content="My Webpage Title"> Sets the title for the Twitter Card.
<meta name="twitter:description" content="A brief description of my webpage."> Provides a description for the Twitter Card.

Robots

The robots meta tag is used to control how search engine crawlers index and follow links on the webpage. It allows you to specify if a webpage should be indexed and if its links should be followed. The values for the robots meta tag can be:

  • index: Allows search engines to index the webpage (default).
  • noindex: Tells search engines not to index the webpage.
  • follow: Allows search engines to follow links on the webpage (default).
  • nofollow: Tells search engines not to follow links on the webpage.

An example of a robots meta tag that tells search engines to index the webpage but not follow its links would be:

Example: Robots Meta Tag

<meta name="robots" content="index, nofollow">

Character Encoding

The charset meta tag specifies the character encoding for the HTML document. It's important to set the correct character encoding to make sure text is shown correctly on the webpage. The most common character encoding is UTF-8. To set the character encoding using the charset meta tag, use:

Example: Charset Meta Tag

<meta charset="UTF-8">

This goes inside the <head> element and should be specified as early as possible in the document.

Examples and Code Snippets

Basic Meta Tags Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="author" content="John Doe">
  <meta name="description" content="A sample webpage showing meta tags in HTML.">
  <meta name="keywords" content="HTML, meta tags, example">
  <title>Meta Tags Example</title>
</head>
<body>
  <h1>Welcome to my webpage!</h1>
  <p>This is an example of how to use meta tags in an HTML document.</p>
</body>
</html>

This shows a basic HTML structure with the charset, viewport, author, description, and keywords meta tags in the <head> section.

Social Media Meta Tags Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Social Media Meta Tags Example</title>

  <!-- Open Graph Meta Tags -->
  <meta property="og:title" content="My Webpage Title">
  <meta property="og:description" content="A brief description of my webpage.">
  <meta property="og:image" content="https://example.com/image.jpg">
  <meta property="og:url" content="https://example.com">

  <!-- Twitter Card Meta Tags -->
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="My Webpage Title">
  <meta name="twitter:description" content="A brief description of my webpage.">
  <meta name="twitter:image" content="https://example.com/image.jpg">
</head>
<body>
  <h1>Social Media Meta Tags Example</h1>
  <p>This webpage is optimized for sharing on social media platforms.</p>
</body>
</html>

This shows how to use Open Graph and Twitter Card meta tags to optimize a webpage for social media sharing. The meta tags provide information about the webpage's title, description, image, and URL, which will be displayed when the webpage is shared on platforms like Facebook and Twitter.

HTTP Headers and Robots Meta Tags Example

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>HTTP Headers and Robots Meta Tags Example</title>

  <!-- HTTP Header Meta Tags -->
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <meta http-equiv="expires" content="Wed, 21 Oct 2025 07:28:00 GMT">

  <!-- Robots Meta Tag -->
  <meta name="robots" content="index, follow">
</head>
<body>
  <h1>HTTP Headers and Robots Meta Tags Example</h1>
  <p>This webpage uses HTTP header meta tags to control content type and expiration, and the robots meta tag to allow search engine indexing and link following.</p>
</body>
</html>

This shows how to use HTTP header meta tags to control the content type, character encoding, and expiration of a webpage. The Content-Type meta tag specifies the content type and character encoding, while the expires meta tag sets an expiration date for the webpage. The robots meta tag is also used to allow search engines to index the webpage and follow its links.

These code snippets show how to use various types of meta tags in an HTML document to give information about the webpage, control its behavior, and optimize it for search engines and social media sharing.