How to Add Meta Tags to Website

<Semantic HTMLMedia Files>

The <meta> tags are used to define metadata that will be used by the browser, the search engines, and the web crawlers, in order to understand the content, structure, and purpose of the webpage.

They do not define any content that users can see, but that doesn't mean it's not important. In fact, it is one of the most important HTML tags in the webpage, especially for SEO purposes. The <meta> tags are placed inside the <head> section of an HTML document, and serve various purpose depending on the attributes.

  • The viewport tag

Defines how a web page is displayed on mobile devices. This is related to responsive design, a very important concept in modern web development that makes sure web pages are usable on different screen sizes. We are going to come back to this topic later.

html
1<meta name="viewport" content="width=device-width, initial-scale=1.0" />
  • The charset tag

Specifies the character encoding for the page.

html
1<meta charset="UTF-8" />
  • The description tag

A brief description of the webpage.

html
1<meta
2  name="description"
3  content="A short description of your page's content." />

This used to be very important, search engines will display this description as part of the search result.

Google Description

However, nowadays search engines such as Google has become a lot smarter, and they will generate their own description according to the content of the webpage.

  • The keywords tag

Defines the keywords of the webpage. Used to be used by search engines, but this is no longer relevant and often ignored by modern search engines.

html
1<meta name="keywords" content="HTML, CSS, JavaScript, Web Development" />
  • The author tag

Specifies the author of the webpage.

html
1<meta name="author" content="Your Name" />
  • The robots tag

Controls how search engines index and crawl the page. We will discuss more about this when we get to the SEO (Search Engine Optimization) lesson.

html
1<meta name="robots" content="index, follow" />
  • The og (open graph) tags

Defines how your content will displayed when shared on social media platforms such as Facebook or Twitter.

html
1<meta property="og:title" content="Page Title" />
2<meta property="og:description" content="Description for social sharing." />
3<meta property="og:image" content="https://example.com/image.jpg" />
4<meta property="og:url" content="https://example.com" />
<Semantic HTMLMedia Files>