HTML — Meta Tag

3 min readOct 6, 2024

Meta tag are very essential and crucial part of web application. specially when we want to get more people visit our website. to get more traffic on our website one of the major source for this is Search Engine. So due to this reason our web application must be search engine optimized.

Meta tags are HTML elements that provide metadata about an HTML page. They are placed within the <head> section of an HTML document and are used to provide information to search engines, browsers, and other applications.

Common Meta Tags

<meta name="description" content="A brief description of the page">: Provides a summary of the page's content for search engines and social media platforms.
<meta name="keywords" content="keyword1, keyword2, keyword3">: Specifies keywords related to the page's content for search engines. (Note: The effectiveness of keywords has decreased in recent years.)
<meta name="viewport" content="width=device-width, initial-scale=1.0">: Optimizes the page for mobile devices by setting the viewport to the width of the device and the initial zoom level to 1.0.
<meta name="author" content="Your Name">: Specifies the author of the page.
<meta name="robots" content="index, follow">: Tells search engines whether to index the page and follow links within the page.
<meta charset="UTF-8">: Specifies the character encoding used in the HTML document.

Display on Social Media site

current area everyone share on social media like facebook, twitter , whatsapp. Using a Meta tag we can provide a attractive and short details of our web page when shred in Facebook, Twitter and others

Facebook:

<meta name="og:description" content="Page Description">: Specifies the description of the page that will appear below the title on social media.
<meta name="og:image" content="image.jpg">: Specifies the image that will be used as the thumbnail for the shared content.
<meta name="og:type" content="article">: Specifies the type of content being shared (e.g., article, website, video).
<meta name="og:url" content="https://example.com/page">: Specifies the URL of the page.

<head>
  <title>My Awesome Website</title>
  <meta name="og:title" content="Check Out This Amazing Article">
  <meta name="og:description" content="A great article about something cool.">
  <meta name="og:image" content="image.jpg">
   
</head>

Twitter:

<meta name="twitter:card" content="summary">: Specifies the type of card to be displayed on Twitter (e.g., summary, summary_large_image, photo).
<meta name="twitter:title" content="Page Title">: Specifies the title of the card.
<meta name="twitter:description" content="Page Description">: Specifies the description of the card.
<meta name="twitter:image" content="image.jpg">: Specifies the image to be used for the card.

<head>
  <title>My Awesome Website</title>
  <meta name="twitter:card" content="summary_large_image">
  <meta name="twitter:title" content="Check Out This Amazing Article">
  <meta name="twitter:description" content="A great article about something cool.">
  <meta name="twitter:image" content="image.jpg">
</head>

how to handle a web page.

<meta name="robots" content="index, follow"> is a meta tag that provides instructions to search engine crawlers (also known as bots) about how to handle a web page.

Breakdown of the values:

index: Tells search engines to index the page, meaning it will be included in their search results.
follow: Tells search engines to follow the links on the page, potentially indexing the linked pages as well.

Other possible values:

noindex: Prevents search engines from indexing the page.
nofollow: Tells search engines not to follow links on the page.
none: Instructs search engines to neither index the page nor follow links.