The previous tutorial addressed the syntax and global structure of an HTML document. It consisted of three parts. This tutorial will cover document tags which are available to use in the <head> section of an HTML document.
Meta data is used to specify data such as document description, author and keywords. The meta tag does not have an ending tag.
<meta name="description" content="This is the document description"/>
Search engines and browsers do not have to read the <meta> data, and most search engines such as Google do not rank using <meta> data, as it is commonly used to spam.
The name attribute specifies a property and the content specifies the value. It is good practice to provide unique descriptions for each page, as they can appear in the SERP which can result in more website traffic.
This is how this website currently appears in Google’s SERP (Search Engine Results Page). Providing a short but snappy description can lead to increased traffic and sales if you have an e-commerce website.
<meta name="keywords" content="some, keywords"/> <meta name="author" content="thecodingguys"/> <meta name="copyright" content="2012-2013 thecodingguys.net"/>
Meta description, keywords and author are mostly used, there are others but it’s beyond the scope of this tutorial to show all of them. Just remember that meta description and keywords are ignored by search engines to rank your website so don’t spend time trying to spam it. Meta author can be useful for blogs are Google can show the authors name in the SERP.
The <link> tag can link to external style sheets, a different version of the current document, and to next and previous documents. The <link> tag may only appear in the <head> section of a document, and you can create as many as you like. You specify the type of link using the rel attribute.
<link rel="stylesheet" href="url to stylesheet.css"/>
The above links to an external style sheet.
You might have the same document in different languages or different versions, so you can specify the secondary document.
<link rel="alternate" href="http://www.example.com/fr" lang="fr"/>
This specifies that the document is also available in French. It is a good idea to use the lang attribute if the document is written in multiple languages.
There are many more types of links, such as:
|Copyright||Copyright page for current document|
|Next||The next document in a sequence of documents|
|Prev||The previous document in a sequence of documents|
|Start||The starting point of multiple documents.|
The values of rel attribute are not case-sensitive, so for example 'Start' and 'start' are the same. Browsers and search engines may have their own ways to interpret the links, and some browsers might provide a navigation bar for a sequence of documents while search engines might give you the option of different versions of the document.
The <title> tag can only appear once in an HTML document, and it requires the end tag. It is used to provide a title for the current document.
The title tag should be kept short (around 10-16 characters) and to the point of the document, as this may help increase site traffic. Just remember that search engines will only show a limited number of characters before it starts cutting them.
This is how this website appears if you Google “webpages membership” (first result to appear). As you can see, Google has highlighted the keywords as well as the URL.