Monday 11 May 2015

Examples of how to make meta tags - How to create good meta tags

Examples of how to make meta tags - How to create good meta tags

If you have some knowledge of codes and HTML you will be able to type meta tags in the source of your page. If you have no experience, start with the following examples. These HTML examples are made to help you understand HTML.

Start Simple - meta tag example

In our example we start with the most simple HTML. The title and a some text. If you look in the source of every web-page you will find these basic HTML codes.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>My Test page</title>
 </head>

<body>

  This is a test text.

</body>
</html>
Meta tags have to be placed in the so called HEAD part of the website. For example, we want to sell wooden garden furniture on our website. We start very simple by adding a title, keywords and a description. Take a look at the example below. We use colored letters in this example so it makes reading HTML easier. The colors have no effect or influence on the results in a search engine.

Step 1 Adjust the title in the source


The first phrase you will see and will click on in the search engines is the title. Make sure your title is effective and attractive. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>All our wooden furniture is water proof.</title>
 </head>

<body>

  This is a test text

</body>
</html>

Step 2 Adding keywords - keyword meta tag example


Add maximal 20 keywords and seperate them from each other by a comma en a space.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>All our wooden furniture is water proof.</title>
  <meta name="keywords" content="wood, furniture, garden, garden-table, etc.">

 </head>

<body>

  This is a test text

</body>
</html>

Step 3 Adding a relevant description - meta description tag


The description are the phrases that will appear under every title in Google, Yahoo, Bing and other search engines.  The search engines show the description you add to your meta tags so it's important to make a relevant description for every single page on your website.
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>All our wooden furniture is water proof.</title>
  <meta name="keywords" content="wood, furniture, garden, garden-table, etc.">
  <meta name="description" content="Official dealer of wooden garden furniture.">

 </head>

<body>

  This is a test text

</body>
</html>

Step 4 Provide relevant information


Without a doubt a good website has to provide good information. If writing relevant text is not your thing, you should hire a writer to help you make your text relevant and easy to read.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title>All our wooden furniture is water proof.</title>
  <meta name="keywords" content="wood, furniture, garden, garden-table, etc">
  <meta name="description" content="Official dealer of wooden garden furniture.">

 </head>

<body>

  Visit our showroom on weekdays from 9 to 5...

</body>
</html>

Think like a customer


This is just an example, very simple, so it's quite clear what the meaning is. Making correct meta tags is an accurate job!
Don't use words like computers, travel, books, gifts, consultancy in your text. The number of hits is enormous, for some more than 10.000. Give extra information and the change your site will be found is increasing. Focus on the words you think your customer will be searching under and will find you, or emphasize on specific details that might be interesting for your visitor. Choosing the right words determine if your site will be found.


Google and Meta-tags - how does this work ?


You can find a lot of information about Google and how to use Meta tags online. But there is also a lot of incorrect information out there or tips that will make your site drop from the search engines. That's why we have collected the most important facts on this page and we advice on how to change your website using the Google web-master tips.
Search engines like Google, Bing, Yahoo and AltaVista show Meta tags in their search results. You will have a direct influence on your presentation. And by doing so you are able to manipulate the click-behavior of your soon to be customer. Take a look at our example:
how does google look at your website?
It is like A B C !  You perform a search task by filling out:
  • (A) certain keywords.  The results you will get is
  • (B) the title tag and
  • (C) the small text item, the description tag.
So why don't you give it a try and use meta tags! Learn how to use meta tags in Search Engine Promotion.

Meta tags and Google web-master Tools


Google provides a lot of help in their online Web-master Tools program.
Just sign up for this free service and use all the tips provided by Google. Please pay special attention to the following:
Click on the button "Diagnostics" and look for the item Duplicate meta description. The content analyzer will let you know how to prevent duplicate content. Also the length of the meta description tag will be analyzed. Read about the missing title-tags, duplicate titles and other tips. Basically you want all the numbers down to zero. This means Google found no errors.


Google Webmaster Tools

Google supports the use of a sitemap. The Sitemaps protocol allows a web-master to inform search engines about URLs on a website that are available for crawling. A Sitemap is an XML  file that lists the URLs for a site. It allows web-masters to include additional information about each URL: when it was last updated, how often it changes, and how important it is in relation to other URLs in the site. This allows search engines to crawl the site more intelligently.
Sitemaps are a URL inclusion protocol and complement robots.txt, a URL exclusion protocol. Take a look at www.xml-sitemaps-generator.org

Submit your website to google now Add URL

Incoming and outgoing Link


Another important function is the way the Google bot sees your website. What are incoming links and how does the Google spider bot sees these incoming links. Whole sentences, parts of the sentence, keywords and content are all equally important.

Waht the googlebot sees

You will find this information on Google, on the following page:

U vindt veel informatie in Google Webmaster Tools
http://www.google.com/webmasters/tools

Meta tags - Where do you add them ?

We suggest that you use the Meta tags in your index.htm or index.html page. Then in all other important pages and last but not least in all the pages of your website. Make sure to put some extra effort in it, it will attract extra visitors to your web-page. Create relevant and different meta tags for each and every page.
How long it will take for Google to add the information in the metatags is difficult to say. Google spiders your website more frequently if your website is current, often has new information, new pages and new incoming links. You will find websites that Google will only spider every three months but there are f.x. news websites that are added to the index within a few minutes after being submitted. It is still difficult to know when the Google spider will visit your website. But normally, after you have submitted your website, it will take about 4 to 6 weeks for a regular website.

HTML <meta> Tag


Example

Describe metadata within an HTML document:
<head>
<meta charset="UTF-8">
<meta name="description" content="Free Web tutorials">
<meta name="keywords" content="HTML,CSS,XML,JavaScript">
<meta name="author" content="Hege Refsnes">
</head>

Try it Yourself »

Definition and Usage

Metadata is data (information) about data.
The <meta> tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable.
Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata.
The metadata can be used by browsers (how to display content or reload page), search engines (keywords), or other web services.

Browser Support

Element




<meta> Yes Yes Yes Yes Yes

Tips and Notes

Note: <meta> tags always goes inside the <head> element.
Note: Metadata is always passed as name/value pairs.
Note: The content attribute MUST be defined if the name or the http-equiv attribute is defined. If none of these are defined, the content attribute CANNOT be defined.

Differences Between HTML 4.01 and HTML5

The scheme attribute is not supported in HTML5.
HTML5 has a new attribute, charset, which makes it easier to define charset:

  • HTML 4.01: <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  • HTML5: <meta charset="UTF-8">

Differences Between HTML and XHTML

In HTML the <meta> tag has no end tag.
In XHTML the <meta> tag must be properly closed.

Examples

Example 1 - Define keywords for search engines:
<meta name="keywords" content="HTML, CSS, XML, XHTML, JavaScript">
Example 2 - Define a description of your web page:
<meta name="description" content="Free Web tutorials on HTML and CSS">
Example 3 - Define the author of a page:
<meta name="author" content="Hege Refsnes">
Example 4 - Refresh document every 30 seconds:
<meta http-equiv="refresh" content="30">

Attributes

= New in HTML5.
Attribute Value Description
charset character_set Specifies the character encoding for the HTML document
content text Gives the value associated with the http-equiv or name attribute
http-equiv content-type
default-style
refresh
Provides an HTTP header for the information/value of the content attribute
name application-name
author
description
generator
keywords
Specifies a name for the metadata
scheme format/URI Not supported in HTML5.
Specifies a scheme to be used to interpret the value of the content attribute

Global Attributes

The <meta> tag also supports the Global Attributes in HTML.

No comments:

Post a Comment