[Developer]

Lesson : Link & Meta Tags in HTML

The most important tag in the head of a web page is the title tag, but the link an meta tags can tell a lot of information about your content. These tag can tell important information to search engines, and provide a handful of usefulness to a visitor. HTML is not simply intended to hold content, it contains data to describe itself and reference more content. Text on the web is not just linear, its hypertext. It wants to quickly branch off like a textbook with chapters, pages, indexes and glossaries. The web is intended to be consumed in different ways by different people. The link and meta tags tell how a web page fits in the hierarchy of a website.
Link Tag

The link tag is used for directing to other documents. In the case of a link to a stylesheet, it might display with the current web page, but for the most part it links to other documents pertaining to a collection of information. “rel” is used to describe the type of link. I describe the types of rel links below. Like a link in the body of a web page, use href to show the path to the page.
Style sheet: Link tags are most commonly used for link to style sheets. What you may not know is that there are various types of media you can specify with a link tag.
<link rel=”stylesheet” media=”screen” type=”text/css” href=”style.css” />

1. Screen - This is what your web browser uses to display the content
2. Print - The browser uses this style sheet whenever a web page is printed. Generally you want this page to be black text on a white background.
3. Handheld - for mobile devices
4. More media types include: projection, braille, aural, tty & tv

Alternate: You can specify different forms of a document using the rel=”alternate”.

• Languages: You can specify the web page in a different languages. You can use this form: <link rel=’alternate’ lang=’fr’ title=’La documentation en Français’ type=’text/html’ hreflang=’fr’ href=’frenchversion.html’ >
• RSS Feeds: Not only can you specify different languages, you can link to things like RSS feeds: <link rel=”alternate” type=”application/rss+xml” title=”Tutorial Dog RSS Feed” href=”http://feeds.feedburner.com/TutorialDog” >

Appendix: Links to an appendix document. What is an appendix? It’s supplemental material.

 <link rel=”appendix” href=”appendix.html” /> Start: Refers to the first document in a collection of documents. This link type tells search engines which document is considered by the author to be the starting point. For example, if you had a article which was broken up into many page, you would want page one to be the “start”.
 <link rel=”start” href=”pageone.html” />

Next / Prev: Refers to the next or previous document in a linear sequence of documents. Sometimes browsers may pre-load the next document to reduce load time.
<link rel=”next” href=”pagefour.html” />
<link rel=”prev” href=”pagetwo.html” />
Contents: Refers to a table of contents page. <link rel=”contents” href=”tableofcontents.html” />
Other link types include index, glossary, copyright, chapter, section, subsection, help and bookmark.
Meta Tag

The meta tag describes information about a document. Like a digtial photo holds meta data about the camera, date, exposure, so does a web page.
Keywords & Description: Meta tags are most commonly known for specifying description and keywords. They are know to help search engines identify and the content of the web page. Though no one knows how much these play in to search results, they can’t hurt to include.
<meta name=”keywords” content=”keyword, followed by a, comma” />
<meta name=”description” content=”Descriptive sentence here about webpage” />
Refresh: You can have the webpage reload itself without any javascript.
<meta http-equiv=”refresh” content=”10″ /> <!– reload every 10 seconds –>
Content Type: Tells what type of document the web page is. The example is pretty standard.
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8″ />
Generator: What software made the web page or website. For example, wordpress includes the generator for stat purposes and to credit their software.
<meta name=”generator” content=”WordPress 2.5.1″ >
For Wordpress Users: All in One SEO Pack
If you’re a Wordpress user, you can use the All In One SEO Pack plugin to add tags to the meta keywords & descriptions. The SEO pack automatically takes care of suggesting keywords and descriptions. The keywords it suggested are pretty accurate too.
This entry was posted on Monday, June 2nd, 2008 at 12:00 pm and is filed under HTML Tutorial. You can follow any responses to this entry through the RSS 2.0 feed. You can skip to the end and leave a response. Pinging is currently not allowed.