Lesson 19 - Metatags and Footers
Metatags
Internet search engines will find your pages when a user types in certain keywords, that is if you have those keywords in one of the two places in your code.
- In the heading tags <h1> to <h6>. That's why you should try to use them whenever you can, rather than simply changing the font size and using the <b> tag. Also, pick the words for your heading carefully. You want it to contain the words that describe the focus of the section.
- In Metatags. By using metatags at the beginning of your page, you can tell search engines explicitly what your page is about. There are two ways to do this:
- <meta name="keywords" content="..."> where you can list words or phrases that concisely describe the topic of the page. Separate each keyword or phrase with a comma and a space.
- <meta name="description" content="..."> is the blurb that appears in a search engine result list. If you don't have a meta name="description" tag, the search engines use their own formulae for gathering those blurbs. If you add this tag, you can tell the search engine specifically what to display under your URL and title.
In the head section of your code, between the <head> and </head> tags, add this code to describe your page by inserting the keywords attribute:
| <meta name="keywords" content="Thailand, study, Nongkhai, Nong Khai, First Global Community College, southeast Asia, Modesto Community College, summer 2004"> |
Here's a list of words and phrases that someone might type into a search engine if they were searching for any summer study program in southeast Asia, or for the Modesto Community College program in particular. If the words are commonly misspelled, you might add the most common errors.
Unfortunately, You can't see any pretty picture of how this will look on your website. It will make absolutely no difference to the appearance of your page. But, it does work in helping people find your site.
Now, in the head section of your code either above or below your keywords code, add this code to describe your page, by inserting the description attribute:
<meta name="description" content="Study in Thailand for July 2004 at the First Global Community College, located in Nong Khai, Thailand. This program is sponsored by the Modesto Community College, Modesto, California.">
|
Open the <meta> tag, add the name="description" and content=" " attribute. Then, describe your page in a couple of concise sentences that will hopefully entice users to click through to your site. Some search engines limit the size of this paragraph to 1024 characters. So, put your most descriptive sentences first.
Footers
Footers are exactly what they sound like: information at the bottom of your pages. It helps your readers to have at least the following items consistently in place at the end of the page:
- An address of the page. The URL in all its details.
- A date the page was last updated or modified.
- An email address for someone to get hold of regarding the page.
Adding footers helps the continuity of your website, lets your readers know what to anticipate, and makes for easier navigation around your site.
Adding footers will mean adding HTML code to each of the pages. First, change the HTML code of your home page, using the <address> tag, as shown in the section below.
<address> Tag
The <address> tag tells the browser that the text enclosed between the opening and closing tags should be treated separately from the main body of the page. Most browsers print it one size smaller and some browsers print it in italics.
Add the following block of code to the bottom of the page, just before the closing </body> and </html> tags:
<address>Address of this website:<br>
1.html<br> Last updated on September 22, 2004<br> For questions or comments, please contact<br> <a href="mailto:anyone@somecompany.com">Jo Anne Howell</a> at anyone@somecompany.com</address>
</body>
</html> |
- First, open the <address> tag.
- Next, give the address of the page. After that comes the date when the page was last modified. The last line contains both an email link and the spelled-out email address of a contact person.
- Put line breaks <br> between each line.
- Finally, close the </address> tag.
- After the closing </address> tag, you should already have the closing </body> and </html> tags.
Here's what the footer looks like on the bottom of the home page. Click on the image to view a full-sized image.

For your final website project, you should add this footer to each of your pages. This is going to add a touch of professionalism to your pages. Please replace the email address in this example with your valid, working email address.
This is the end of Lesson 19. Please go to the next lesson.
|