Whats the point in using metadata in HTML?

Viewed 70

I started HTML again yesterday and I'm confused. Why are we supposed to use meta tags if it's not on the site?

3 Answers

There's a multitude of <meta /> tag types serving different purposes, but in essence there's two broad categories:

Search engine and other crawlers

  • May use <meta name="description" content="Some description"> for the search results page (reference for google) or for inline link preview.
  • <meta name="keywords" content="some, tag"> was used for search keywords, but at least google doesn't use it anymore.
  • OpenGraph metadata is mostly used by social media sites like Twitter and Facebook to display preview images and additional information inline, when a user posts a link (Twitter calls this "cards"). These include og:image, og:title, og:audio, og:video, og:site_name and many more.
  • Google uses some more for various purposes
  • Some services uses additional proprietary types, like <meta name="twitter:card" content="summary" />.

Instructions to the user agent

  • <meta charset="UTF-8"> specifies the charset.
  • <meta name="viewport" content="width=device-width, initial-scale=1.0"> instructs mobile browsers how to scale the viewport.
  • With <meta http-equiv="..." content="..." /> the browser can be instructed to "add" some HTTP headers. For example:
    • <meta http-equiv="refresh" content="10"> refreshes the page every 10 seconds.
    • <meta http-equiv="content-security-policy" content="default-src 'self'"> adds a content security policy.

In summary: They're used to add different kinds of metadata and processing instructions.

The <meta> tag defines metadata about an HTML document. Metadata is data (information) about data. Metadata is used by browsers (how to display content or reload page), search engines (keywords), and other web services.

In relation to the above answers, metadata pretty much just tells the browser how to handle certain things, or what to show when your site appears on a search page.

If you look at the below image, the <meta name="description" content="Site description"> metatag tells the browser to show people the description: "Learn all about Wolves in the United States and North America."

This image

The rest of the metatags and what they do/did are in the above answer.

Related