HTML Meta Tags

Meta tags are tags within HTML code placed within the <head></head> section of your HTML code that help define the contents of a web page. For example, adescription meta tag is used by Internet search engines to display a description about your page in search engine results. Below is a listing of the different types of meta tags that could be used and a description about each meta tag. Today, it is not as important to include all these meta tags in your web page. The most important meta tags any web developer should be concerned with is the Content-Type meta tag and Description meta tag.

Content-Type meta tag

<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
Identify the content type and charset of the web page being displayed and how to display it. Although this line can be specified in a meta tag, if you have access to the .htacess filedefine the charset in that file instead, so it doesn't have to be specified in every web page.

No-cache meta tag

<meta http-equiv="cache-control" content="no-cache">
Lets the Internet browser know it should not cache the page. This will make sure the latest information is displayed to the visitor. It is only recommended that this tag be used on a page that is frequently updated since it will decrease the time it takes to load the page.

Audience meta tag

<meta name="audience" content="all">
Used with parental control software and robots to know the ages of viewers that can visit the page. This meta tag is not that important, but can be be useful for any adult related pages.

Author meta tag

<meta name="author" content="www.computerhope.com">
Description of the author of the page.

Content-Language meta tag

<meta name="Content-Language" content="english">
The Language the page is written in, in this case English. Today, this tag is not important if you classify the language in HTML tag. For example, <html lang="en"> at the beginning of your page.

Description meta tag

<meta name="description" content="Helping you with ALL your computer questions">
One of the most important meta tags that should be found on every page. The description meta tag describes what the web page contains and what it is about. This line is one of the many things a search engine uses to rank your page by using keywords contained in the description. The description length should be between 150 and 160 characters.

Generator meta tag

<meta name="GENERATOR" content="Microsoft FrontPage 4.0">
The software used to generate the web page.

Keywords meta tag

<meta name="keywords" content="computer, technical, free, help, support">
Keywords separated by commas that help describe what the page contains. Because of abuse, many search engines, including Google no longer look at the keywords.

Page-topic meta tag

<meta name="page-topic" content="Free Computer help">
Topic of the page, used by some search engines. Not all pages need this.

Page-type meta tag

<meta name="page-type" content="Technical Support">
The page, used by some search engines. Not all pages need this.

ProgID meta tag

<meta name="ProgId" content="FrontPage.Editor.Document">
Program used to edit the file. Similar to the generator.

Publisher meta tag

<meta name="publisher" content="Computer Hope">
The publisher of the web page.

Revisit-after meta tag

<meta name="revisit-after" content="15 days">
Notice to web robots indexing the page when to revisit next. It is recommended that therobots.txt file be used instead of meta tags to direct web robots.

Robots meta tag

<meta name="ROBOTS" content="Index, ALL">
This line lets any web robots know what pages to index. It is recommended that therobots.txt file be used instead of meta tags to direct web robots.
<meta name="ROBOTS" content="Index, FOLLOW">
A notice to web robots what action to take on the page, in this case follow all links on the page.

Comments

Post a Comment

Popular posts from this blog

16 Design Tools for Prototyping and Wireframing

Image
This article was written in 2009 and remains one of our most popular posts. If you’re keen to learn more about wireframing, you may find this recent article on free online wireframing tools of great interest. In recent years the number of tools available to help you document and design your web site has just exploded. It seems that we all need a wireframing or prototyping tool at our fingertips (at least in the design arena). So in order to save you the hard work required to find one, I’ve assembled this list. It can be expanded upon, so if you use an unlisted application, please let me know and I’ll add it to the list. The tools tend to fall into two categories: purpose-built applications multifunctional applications Within these two groups I’ve found that usefulness can vary markedly among tools; some are only suitable for diagramming and wireframing, while others focus only on prototyping. The best are blessed with both capabilities and more. Purpose-built Appl...
Read more

What is Functional and Non Functional Requirement

A functional requirement describes what a software system should do, while non-functional requirements place constraints on how the system will do so. Let me elaborate. An example of a functional requirement would be that a system must send a an email whenever a certain condition is met (e.g. an order is placed, a customer signs up, etc). A related non-functional requirement for the system may be that emails should be sent with a latency of no greater than 12 hours from such an activity. The functional requirement is describing the behavior of the system as it relates to the system's functionality. The non-functional requirement elaborates a performance characteristic of the system. Typically non-functional requirements fall into areas such as: Accessibility Capacity, current and forecast Compliance Documentation Disaster recovery Efficiency Effectiveness Extensibility Fault tolerance Interoperability Maintainability Privacy Portability Quality Reliability Resilienc...
Read more

LESS CSS – Beginner’s Guide

Image
Like we said in our previous post on  CSS Style Priority Level ; CSS is very simple and straight forward. However, it also has its limitations, particularly when it comes to its maintenance. When we have thousands of lines of styles and some separated CSS files to maintain, things will problematic. To solve the problem, a  CSS pre-preprocessor  is created to allow us to compose styles in a more dynamic way. There are  a few solutions , but the one that we are going to cover this time is  LESS . LESS Editor In the time of the writing, the only editor that was intended specifically to support LESS file editing is the  ChrunchApp . This  app  is cross-platform, built upon  Adobe Air , so you can run it on  Windows , Mac OSX  and  Linux . As for the  other code editors  that we may be familiar with, like Dreamweaver, Coda, NotePad++ and SublimeText 2, there is a sort of “plugin” or package we can add to enabl...
Read more