HTML tag

HTML tag is used to provide metadata about an HTML document. Metadata is data about data, which describes the characteristics of a document, such as its author, keywords, description, and other important information that can be used by search engines, social media platforms, and other web services.

Here's an example of how to use the tag:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta charset="UTF-8">
5    <meta name="description" content="This is a sample webpage">
6    <meta name="keywords" content="HTML, CSS, JavaScript">
7    <meta name="author" content="William Doe">
8    <meta name="viewport" content="width=device-width, initial-scale=1.0">
9    <title>My Webpage</title>
10  </head>
11  <body>
12    <h1>Welcome to my webpage</h1>
13    <p>This is a sample webpage.</p>
14  </body>
15</html>

In this example, we have used the tag to provide metadata about the document. The charset attribute specifies the character encoding of the document, the name attribute is used to specify the type of metadata, and the content attribute provides the actual value of the metadata.

Here are some common attributes of the tag:

  • charset: specifies the character encoding of the document (e.g. UTF-8)
  • name: specifies the type of metadata
  • content: provides the actual value of the metadata
  • http-equiv: provides HTTP header information for the web page
  • viewport: sets the viewport for mobile devices
  • property: specifies Open Graph Protocol metadata for social media platforms

Open Graph Protocol (OGP)

Open Graph Protocol (OGP) is a set of metadata tags that can be used to provide social media platforms with information about your web page. By using OGP, you can control how your web page appears when it is shared on social media platforms such as Facebook, Twitter, and LinkedIn. Here are some common OGP metadata tags and their attributes:

  • og:title: specifies the title of the web page
  • og:description: provides a brief description of the web page
  • og:image: specifies the URL of an image that represents the web page
  • og:url: specifies the URL of the web page
  • og:type: specifies the type of content on the web page (e.g. article, website, blog)
  • og:site_name: specifies the name of the website

Here's an example of how to use OGP metadata tags:

1<!DOCTYPE html>
2<html>
3  <head>
4    <meta property="og:title" content="My Awesome Blog Post">
5    <meta property="og:description" content="This is a really great blog post">
6    <meta property="og:image" content="https://example.com/images/post.jpg">
7    <meta property="og:url" content="https://example.com/blog/example">
8    <meta property="og:type" content="article">
9    <meta property="og:site_name" content="My Awesome Blog">
10    <title>My Awesome Blog Post</title>
11  </head>
12  <body>
13    <h1>My Awesome Blog Post</h1>
14    <p>This is a really great blog post.</p>
15  </body>
16</html>

In this example, we have used OGP metadata tags to provide information about a blog post. The og:title, og:description, og:image, and og:url tags provide information about the blog post itself, while the og:type and og:site_name tags provide information about the website where the blog post is published.