04. HTML Meta Tags

Oftentimes, beginning web developers won't include meta tags because they don't affect any contents on the webpage. However, including meta tags are vital, as search engine bots use them to crawl through webpages. Thus it's important to practice including meta tags, especially if you would like to direct organic traffic onto your webpage.

There are five main meta tags that you should know about.

1) Charset

As we just saw in setting up our HTML playground, the charset declares what character encoding your webpage is using. The most common charset value is UTF-8, which includes a plethora of characters outside the Roman alphabet.

<meta charset="utf-8" http-equiv="Content-Type" content="text/html">

2) Viewport

The viewport meta setting tells the browser how content should fit on a device's screen. The following snippet tells that the browser to set the viewport (the visible size of the window) to the width of the device, with an initial scale of 1 (no zoom).

<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

3) Description

The description meta tag will describe the contents of your page

To apply a description alongside your page, insert the following meta tag:

<meta name="description" content="Code Snippets Academy is a website that provides free tutorials for HTML, CSS and Javascript.">

The description written may show up on a Google search. For example, if I Google "vintage coins" a link to eBay shows up:

Sample Google Image Search for 'Vintage Coins'

The "Shop huge inventory..." portion is the meta description for the page.

Tips for writing a great description

  • Accurately summarize the page's content.
  • Avoid vague or generic words like "This is a webpage about...".
  • Don't fill the description with only keywords. There is another meta tag for that.
  • Use unique descriptions for each page.

4) Keywords

You may also specify keywords for search engines. To do so, simply write it as the value of the "content" attribute like so:

<meta name="keywords" content="HTML, CSS, JavaScript">

5) Author name

You may also write the author name.

<meta name="author" content="John Doe">

Great! That wraps it up for our introduction. Now let's learn how to apply actual content onto our HTML document!

Build modern and responsive webpages

The Modern Web

Build modern and responsive webpages Try Front-end

The Modern Web will guide you through the most important tools of device-agnostic web development, including HTML5, CSS3, and JavaScript. The plain-english explanations and practical examples emphasize the techniques, principles, and practices that you'll need to easily transcend individual browser quirks and stay relevant as these technologies are updated.

$ Check price
34.9534.95Amazon 4.5 logo(30+ reviews)

More Front-end resources

Aching back from coding all day?

Foam Seat Cushion

Aching back from coding all day? Try Back Problems

This foam seat cushion relieves lowerback pain, numbness and pressure sores by promoting healthy weight distribution, posture and spine alignment. Furthermore, it reduces pressure on the tailbone and hip bones while sitting. Perfect for sitting on the computer desk for long periods of time.

$ Check price
99.9599.95Amazon 4.5 logo(9,445+ reviews)

More Back Problems resources