HTML and CSS Reference
In-Depth Information
Metadata and Search Engine Optimization
Search engines sometimes use the description from the metadata as the text that appears below the link to the
page when presenting your web page in search results. In the past, some search engines also used the keywords
when ranking web pages but found that many people would abuse this practice by stuffing lots of keywords into the
meta element to help their pages rank higher for certain searches. For this reason, most search engines no longer
consider this information to be reliable and therefore do not use it for ranking purposes. It is still considered good
practice to define keywords, however.
Make sure that the content for your meta descriptions and keywords is relevant to each individual page. Avoid us-
ing the same content for all of your pages. This is a best practice for search engine optimization (SEO).
Notice how keywords are separated by commas but do not have spaces after the commas.
Defining the Character Encoding
A principal use of the
<meta>
element is to define the character encoding of the page. Like the DOCTYPE,
this element has been greatly simplified in HTML5:
<meta charset="utf-8">
The
charset
attribute on this
<meta>
element tells the browser how it should interpret the characters in the docu-
ment. Unless you have a very special use case, you should use UTF-8 here. In the following exercise, you define the
character encoding in your page templates.
The code for this exercise can be found in folder 11.
1.
Open the
index.html
and
about.html
files in your text editor.
2.
Define the character encoding by adding the following
<meta>
element to the
<head>
. The character en-
coding should always be the first element within the
<head>
.
<head>
<meta charset="utf-8">
<title>...</title>
...
</head>
