Meta Tags Lab

Easy
899
24
78.2% Acceptance

In this lab, you'll practice adding meta tags to the head section of an HTML document. Meta tags provide information about the web page, such as its title, description, and viewport settings. You will create the following meta tags:

  1. A meta tag with the name attribute set to viewport and content attribute set to width=device-width, initial-scale=1.0
  2. A meta tag with the name attribute set to description and add relevant content. Add a minimum of 5 words here.
  3. A meta tag with the
    • http-equiv attribute set to Content-Type and
    • content attribute set to text/html; charset='utf-8
  4. A meta tag with the property attribute set to og:title and content attribute set to Meta Tags Lab.

Now that you're are aware about the challenges that you have to, you should also understand what these tags and mean and how do they affect the quality of your webpage when shared across the web.

title & description

1. Viewport

name="viewport": This attribute is used by browsers to determine how to control the page's dimensions and scaling.

content="width=device-width, initial-scale=1.0": This value instructs the page to match the screen's width in device-independent pixels and set the initial scale to 1, maintaining the correct layout on both landscape and portrait configurations.

2. Description

name="description": This attribute serves the purpose of providing a clear, concise description of the webpage content. It’s especially important since search engines display the "description" in search results mainly when the searched-for phrase is contained in the description.

content="your description goes here": This value holds the actual description of the page. It needs to be relevant to the page content and at least 5 words long to give a reasonable explanation to the page viewers and search engines.

3. Content Format

http-equiv="Content-Type": http-equiv can be used to simulate an HTTP response header. 'Content-type' here denotes what type of content the HTML document is.

content="text/html; charset=utf-8": This attribute specifies the character encoding for the document. 'utf-8' is a universal character set that includes all possible characters and is backward-compatible with ASCII.

4. Title

property: og:title: This attribute is part of Open Graph (og) protocol, used to integrate any web page into the social graph. 'og:title' defines the title of the webpage that will appear in the social media platform when the page is shared.

content="Meta Tags Lab": This is the actual title of the webpage, "Meta Tags Lab" in this case, which will be used when the contents of the webpage are shared on a social media platform.