Module 7 of 10 · 5 lessons
HTML Meta Tags Tutorial: Title, Viewport, Favicon, SEO
Titles, character sets, the mobile viewport, SEO tags, icons, and links to CSS and JS.
Nothing in the <head> shows up on the page. It still decides what the page is called, how its text is encoded, how it scales on a phone, how it appears in search results and what people see when they share it. By the end of this module you can write a complete, correct head from memory.
Title and Charset covers the <title>, which appears in the browser tab and as the headline in search results. It also covers <meta charset="utf-8">, which tells the browser to read the file as UTF-8 (opens in a new tab) so accented letters and symbols do not turn into garbage. Viewport and Description explains the viewport tag that makes a page readable on a phone, and the meta description that search engines often print under your title.
Favicon and Social Previews adds the little icon in the browser tab, plus Open Graph (opens in a new tab) tags that set the title, text and image people see when your link is shared. Linking CSS and JavaScript connects outside files with <link rel="stylesheet"> and <script>, and shows why defer makes a page load faster.
Leave out the viewport tag and your site looks tiny on phones. Leave out the title and search engines have less to show. Get the charset wrong and the text breaks. Each fix is one line, and once you know the lines you will not forget them.
The module ends with a Complete Head project, where all the pieces become one head you can reuse on your own sites. When you are done, compare yours with the head and Open Graph templates on HTML Cheat Sheet (opens in a new tab). Plan about 45 minutes.
What you will learn
- Write a title that describes the page and set the encoding to UTF-8
- Add the viewport meta tag so the page works on phone screens
- Write a meta description that search results can show
- Add a favicon and Open Graph tags for previews on social sites
- Link outside CSS and JavaScript files and load scripts with defer
- Put together a complete head section you can reuse on any page
Lessons
- Title and Charset Declare the character encoding and write a specific title for every page.
- Viewport and Description Make a page work on phones and give it a snippet for search results.
- Favicon and Social Previews Give your page a tab icon and decide what its card looks like when people share it.
- Linking CSS and JavaScript Hook a stylesheet and a script file up to your page from the head.
- Project: Complete Head ProjectWrite a full, real-world head for a club website from memory.
Frequently asked questions
What goes in the head section of an HTML page?
The <head> holds information about the page, as opposed to visible content. That means the <title>, <meta> tags for the character set, viewport and description, <link> elements for stylesheets and the favicon, and often <script> elements. Headings, paragraphs and images go in the <body>.
What does the viewport meta tag do?
<meta name="viewport" content="width=device-width, initial-scale=1"> tells a phone browser to use the real screen width. Without it, the browser pretends to be a wide desktop screen and shrinks the whole page, so the text ends up tiny. Put it in every page you build. Google looks at the mobile version of a page for search.
Do meta tags help SEO?
Some do. The <title> is one of the strongest on-page signals, and search results usually show it as the headline. The meta description has no direct effect on ranking, but a good one gets more clicks. Major search engines ignore the meta keywords tag, so leave it out. Google publishes a list of the meta tags it supports (opens in a new tab).