bgallz.org | Web coding & design tutorials, scripts, resources and more. » HTML tags

Avoid Duplicate Content Pages

Brian — Sun, 30 Jan 2011 22:41:29 +0000

Many people do not think about the possibility of duplicate content pages on their website, when this is very common and easily avoidable. All it takes is a little HTML in the head tags of the page.

What is a duplicate content page?

Duplicate content is content that is showing up on the Internet by multiple URLs. Another words, a page like aboutus.php might be coming with the same content as aboutus.php?do=send.

This causes some problems with search engines as far as determining which page the engine should use for query matches, page ranking, use of meta tags between the two versions, and just which one to include for their indices.

How do you avoid duplicate content?

Let’s say these are your pages that are coming with the same content:

Original source:
post.php?id=1.

Duplicate content pages:
post.php?id=1&lang=en
post.php?id=1&do=login

On post.php we can include a tag that will reference to the original source so Search Engines gather the original correct information from the server, rather than trying to decide between the serveral duplicate pages.

Place in the tags of post.php:

echo '';

This will take the $id and put it into the URL as just post.php?id=$id. So any other URL parameters, such as lang=en, or do=login, will not be read as a duplicate page, but tell search engines to use the content of just post.php?id=$id.

If you do not need to use PHP and you just want the page to load a set content of just post.php then you would use the tag like so:

When using this method, you want to be sure that you are consistent throughout your website with your canonical URLs. If your canonical url is like: “http://www.bgallz.org/” then you want to use “www” in all of your URL references and tags for the domain.

Now, if you have pages that you do NOT want included in any search engine queries or crawled by search engine bots, then you want to use a META tag with “noindex, nofollow”.

To block a page from search engine indexes places the following in the tags:

Walla!

HTML Div Float Property

Brian — Wed, 10 Nov 2010 19:16:25 +0000

Using the HTML tag –

and the float style property, you can make designs for your websites. Well, you can make layouts for where design could be. This is a good structural tool in laying out where content will be on your web pages, images, blurbs, etc.

Div Float Layout

Let’s say we want a page to look like this:

First I’m going to set up the CSS styles we will set our

’s to in the HTML to give this page the right look as far as padding, margins, borders, etc. Once we have all the styles defined we will call them to the DIV tags in our HTML like so:

. Using the right float’s in the right order will place our DIVs in the right places to make this layout.

This will go in our tags of the HTML page:

html, body, center {
padding: 0px;
margin: 0px;
height: 100%;
}
.header {
padding: 8px;
vertical-align: middle;
height: 80px;
background: #d60000;
}
.banner {
float: left;
border: 0;
vertical-align: middle;
width: 500px;
height: 60px;
}
.ads {
padding: 10px 0px;
float: right;
width: 300px;
height: 60px;
vertical-align: middle;
background: #ffb448;
}
.wrapper { /* Main page holder. */
padding: 10px;
width: 875px;
background: #fff;
height: 100%;
}
.page {
padding: 10px 0px;
width: 630px;
float: left;
height: 100%;
}
.top {
padding: 5px;
height: 40px;
background: #ff7c7c;
margin:0;
}
#boxes {
padding: 5px 0px;
}
.box {
width: 197px;
height: 197px;
padding: 3px;
margin: 3px;
background: #ffddaa;
float: right;
}
.rightside {
float: right;
text-align: center;
height: 100%;
padding: 10px 0px;
}
.nav {
padding: 5px;
background: #ccc;
width: 200px;
height: 100%;
min-height: 600px;
}
.content {
margin: 20px 0px;
width: 600px;
text-align: left;
}

Now we have to write the HTML to use these styles appropriately.

Here is our HTML:





Ads Here
Banner Here


Navigation


Content Here

Box 3
Box 2
Box 1


Content Here, lots and lots of content here! Content Here, lots and lots of content here! Content Here, lots and lots of content here! Content Here, lots and lots of content here! Content Here, lots and lots of content here! Content Here, lots and lots of content here! Content Here, lots and lots of content here! Content Here, lots and lots of content here!Content Here, lots and lots of content here!
Content Here, lots and lots of content here!Content Here, lots and lots of content here!Content Here, lots and lots of content here!Content Here, lots and lots of content here!Content Here, lots and lots of content here!

Take a look at the HTML in action here!

If you notice in the HTML the box’s are placed in descending order inside the “boxes” div ID. Since the box class is set to to the right:

.box {
float: right;
}

We put the boxes in descending order so that the HTML will read down the page and float the first one to the right, then the next, then the last. So it floats BOX3, then BOX2, then BOX1.

Using the float style property of DIV tags is really useful in making layouts because it does not require any real guidelines to follow as far as where it is on the page. This sounds a little wordy but basically with a combination of float, and position style attributes you can make your DIV’s go where ever you want.

HTML body tag

Brian — Sat, 19 Dec 2009 06:04:03 +0000

The body tag in a HTML document defines the documents body. This includes the majority of the displayed content on the page, such as hyperlinks, images, etc.

Here is a basic HTML document with the body tag:



HTML Document



Body content.

The body tag is supported by all major web browsers.

Body tag standard attributes:

Attribute	Value	Information
class	classname	Specified class name to an element.
dir	rtl ltr	Specified text direction to an element.
id	id	Specified id name to an element.
lang	language_code	Specified language to an element.
style	style	Specified style definition to an element.

Using HTML Meta tags

Brian — Mon, 16 Feb 2009 15:08:43 +0000

Meta HTML tags can be very helpful for gaining some search engine rank and promoting your website better. However, these simple tags are not going to drive your website immediately to the top of the lists.

Meta tags are basically information located in the head of your webpage(s). This content is not visible to the viewer, however does communicate with the browser.

Some of the most common meta tags include:

Description
Keywords
Character Set
Author
Robots

Here is an example for meta tags of a website about fast cars:

The robots tag is used to tell whether or not a page should be indexed by search engines. For example, if you don’t want your page to be indexed use the following code:


Page Not Indexed

The meta tags are supported by all major browsers out there. These can help your website with it’s niche and search engine listings.