On-Page Optimization
Monday, September 22nd, 200810. On-Page Search Engine Optimization
Do you know what’s so great about this part?
The fact that everything you need to do here is at your finger-tips as you own the website and all files that are located on your server.
This includes pages, pdf files, images, videos, word documents, etc…
The on-page elements include:
1. Page Title
2. Meta Tags
3. Headings Tags (h1 to h6)
4. Content (also known as Body Text)
5. Internal Linking
6. Outbound Links
7. Images alt tag
8. Link (href) title tag
9. Paragraphs ( text included between <p> …. </p> HTML tag)
10. Bold, Italic and Underlined text
plus a lot more.
Some of the points mentioned above, have been already covered, but for now we will look at the Body Text.
Heading Tags
Heading tags are HTML elements that can be found in the source code of a page as h1, h2, h3, h4, h5 & h6, and they are considered as the second most important SEO element, with H1 being the most important and H6 having the least value.
Many web developers give the H tags a go, but due to the fact that they look quite large in the browser, they move to other options.
That is a big NO, because heading tags, as most of the page layout and text, can be easily controlled from the CSS stylesheet.
A good example can be seen on this page, where the “Heading Tags” text above is enclosed between <h3>…</h3> tags and the style for it is:
h3 {font-size: 1.3em;}
plus some other CSS rules below to give it a background-color and control how it looks if it’s a link.
.entry h3{background-color:#CC0000; padding:2px;}
.entry h3 a:hover{color:#cc0000; background-color:#f5f5f5;}
The next question it’s probably how many of them can you use on the one page.
Our answer to that will be:
A. One H1 tag is enough and should include keywords found in the Page Title
B. One or Two H2 tags per page
and so on….
If you need to use more than that, why don’t you split the one page into two or more pages…
Image alt tag
The power of image alt tag is the fact that you can include a small amount of keywords (without stuffing) which in some way helps with search engine optimization.
The meaning of alt tags is to help users using screen-reader software to understand the content of the image itself and for users using browsers with images turned off.
They can be seen as a small text pop-up while holding the mouse arrow over the image, and should describe the image itself without over-doing it and keyword stuffing.
An example code for image alt tag:
<img src=”path to the image” alt=”image description” />
Link title tag
Same as above, but this time the title tag can be found in regular text or image links.
An example code for a regular text link:
<a href=”link to the page” title=”go to page short description”>Anchor Text</a>
Example code for image link:
<a href=”link to the page” title=”go to page short description”><img src=”path to the image” alt=”image description” /></a>
HTML validators are great for detecting the missing tags, and we have even designed something similar that can be found here: Page Validator
Paragraphs, Bold & Italic
The body text should be divided into small paragraphs by using the <p>…</p>tag and each paragraph and should have no more than 3-5 sentences, keeping the most important key-phrases as close to the top as possible.
Make use of the bold (<b>…</b>, <bold>…</bold> or <strong>…</strong>) and italics (<em>…</em> or <i>…</i>) style to highlight the keywords withing the body text, but don’t over do it.
This helps visitors and search engines to identify the important keywords inside the body text.
Another common and useful tag is the “underline” text (<u>…</u>), but not recommended as users expect this type of text to be a link to another page.
