HTML Page Head - Twitch Website
In this lesson you will learn how to contruct a page head. This is part of Coding Commanders' unit on building a Twitch website.
Here is the HTML head from our Twitch Website Code. You will find the page head in index.html.
<!-- Page Head: Contains information for the web browser to read -->
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta charset="UTF-8">
<!-- Title: Max 50-60 character including spaces -->
<title>Linux Open Source - Twitch Streamer | Coding Commanders</title>
<meta name="keywords" content="linux, open source, streamer, twitch, coding commanders, linux streamer, open source streamer, twitch linux streamer">
<!-- Page Descrition: Recommended length is 50–160 chearacter -->
<meta name="description" content="Commander Candy streams Linux open source software used for computer programming, video editing, animation and more!">
<!-- CSS Links -->
<!-- Our CSS File --><link rel='stylesheet' type='text/css' href='style.css'>
<!-- Fontawesome Librbary --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- Google Font Link--> <link href="https://fonts.googleapis.com/css?family=Share+Tech&display=swap" rel="stylesheet">
</head>
Let's learn to customize it for your HTML page Head.
Viewport and Charset
The first two lines we can keep the same.
<meta name='viewport' content='width=device-width, initial-scale=1.0'>
<meta charset="UTF-8">
To learn more about viewport check out Coding Commanders' lesson HTML Viewport Tag. Viewport and charset are examples of meta tags.
Page Title
Now give your page an appropriate title. The page title should be no more than 50-60 chatacters (including spaces). It is very important that the page title accurately describes your content. The title will display when people share your page and when your site is queried by search engines.
Traditional Title Format
Primary Keyword - Secondary Keyword | Brand Name
Template Page Title:
<!-- Title: Max 50-60 character including spaces -->
<title>Linux Open Source - Twitch Streamer | Coding Commanders</title>Page titles should be specific and appropriately describe the content on your page. They are important for SEO. Each page in your site should have a unique page title. On your homepage, you may want to target your brand name as your #1 keyword.
<!-- Title: Max 50-60 character including spaces -->
<title>Coding Commanders - Linux Open Source Twitch Streamer</title>For more info on the page title check out Coding Commanders' lesson Page Title.
Page Description
Your page description is also very important. This is normally displayed below your page title in Google search results. If you Google "Coding Commanders":
Template Page Description:
<!-- Page Descrition: Recommended length is 50–160 chearacter -->
<meta name="description" content="An HTML document includes many parts. The page head contains important data that is read by the web browser. Create your own website with Coding Commanders easy to follow tutorials.">Page descriptions should accurately describe your content and should encourage people to click on your page link. The recommended length of page descriptions is 50-160 characters.
Keywords
Although Google no longer looks at keyword meta data, other search engines (including DuckDuckGo) still do. I wouldn't stress yourself out about the perfect keywords, but it won't hurt to include this meta data. If your page title accurately describes the content on your page, those won't be bad keywords to select. For more information about keywords check out my tutorial: HTML Keywords
Template Page Keywords:
<meta name="keywords" content="linux, open source, streamer, twitch, commander candy, linux streamer, open source streamer, twitch linux streamer">CSS and Font Links
CSS is the code that formats your HTML. It defines display information such as fonts, colors, and spacing. You will link CSS files in your page head. This includes CSS pages you create as well as external style libraries. You will also link external fonts in the page head.
Fontawesome
I usually link Fontawesome, a Google icon library. I use it for social media icons.
External Fonts
Sometimes you want to use a font that is not generally included by web browsers. I like to use Google Fonts. I normally do this for headings, not the general page body.
Template Page Links
<!-- Our CSS File --><link rel='stylesheet' type='text/css' href='style.css'>
<!-- Fontawesome Librbary --><link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
<!-- Google Font Link--> <link href="https://fonts.googleapis.com/css?family=Share+Tech&display=swap" rel="stylesheet">
Internal Links
When we link another file within our project, we have to write the file's location. The href attribute gives this information. For a detailed tutorial on CSS links, check out my CSS Link Tutorial. I will give you a breif description here.
If the file you want to reference is in the same folder as the file it is being referenced on, you just have to give the file name. In our template style.css is in the same folder as index.html.
<!-- Our CSS File --><link rel='stylesheet' type='text/css' href='style.css'>Twitch Website File Structure
Website
media
index.html
main.js
style.css
If the file is located in a folder that is in the same folder, then we also have to specify the folder's name. There is a folder called media that is inside our main project folder. Let's say there is an image in the media folder called "daisy-chain-cosplay.png". To reference that image on index.html: "media/daisy-chain-cosplay.png".
If the file you want to access is outside the folder of the file you are referencing it on, you use ../ to go back one folder. Let's say we have a file called media-list.html inside our media folder. You want to use style.css on that page: "../style.css".