So what is a contextual link?

A contextual link is a link that contains the primary keyword phrase of the page you want to link to. For example if I want to link to this article then I would create a link that may look like this.

Contextual Links

<a href=”http://www.createbetterwebsites.com/how-to-use-contextual-links.html”>Contextual Links</a>

I’ll use this link throughout my own site when I want to link back to this article and also on any other website or external link building strategy. This will help my page rank well and come up near the top for that particular keyword, contextual links in this case.

But this will only help get good rankings if the keyword you use in the link is also the focus of the page you are linking to. In other words the content of the page has to be about contextual links in this case and not about hosting or dogs. You can’t trick the search engines. If you try you will get penalized.

Just remember to use contextual links whenever you can to link back to your web pages, whether it’s an internal link (from your own website) or external link (from another website).

Use this technique and you’ll create a website that ranks well in the search engines and gets free organic traffic.

If you want an image to scroll with your web page use the code below. Replace filename.jpg with your image name and make sure you put the correct path to the image as well.

body {
background-image: url(filename.jpg);
background-attachment: scroll;
background-repeat: no-repeat;
}

You can also make the background image to be fixed, so when you scroll the webpage up and down, the background image stays static and doesn’t move. Replace filename.jpg with your image name and make sure you put the correct path to the image as well.

body {
background-image: url(filename.jpg);
background-attachment: fixed;
background-repeat: no-repeat;
}

If you are using a single image for the background make sure it’s large enough to cover you web page. You can also use a small image and repeat it horizontally or vertically.

It’s a link element, an open standard, and is supported by Microsoft, Google, Yahoo.

A canonical link element is a way to define a canonical page which is the preferred version of a set of pages with very similar or duplicate content.

It fixed all the cracks and mistakes developers make in their code.

Make all your internal links consistent. Make sure your URL’s are standardized or normalized. In other words don’t have different versions of your URL’s in your internal linking.

For example all of the URL’s below can be the same exact page but search engines will be confused and see them as different pages even if they return the same content.

Because in practice they can actually return different content depending on the content management system and the web server.

www.yourdomain.com
www.yourdomain.com/index.html
www.yourdomain.com/
www.yourdomain.com/index.html/
index.html

The best thing maybe be to always use absolute URL’s. For example always point to your home page like so…

http://www.yourdomain.com/index.html

This way you are consistent and you don’t confuse the search engines and seem like you have duplicate content.

If you do have different internal linking and or duplicate content that you can’t fix it then you use the canonical link element in your web pages.

The way to specify the canonical page is to insert the link element like this ..

You can self-reference a page. Meaning you can insert the above link element in your index.html page and on any page that duplicates the index.html. When you insert it in index.html it’s a self reference.

One of the biggest issues I’ve seen with code and with content management systems sometimes is that the entire site points to the main page. So all pages are pointing to for example the index page and contain the link code like this.

This can be determental to a site. I’ve seen this happen and the entire site is not indexed except for the index.html. So what do you do in this case? Remove the line of code and resubmit your website to the search engines.

Here is an article on How to Remove Canonical Link Element From Multiple Files.

If you don’t know what a canonical lin tag is read about it here What is a canonical link tag?

Removing them from 100′s of files can be a tedious job. But not on a Mac. On mac you can run one script that will remove a line from multiple files.

The script will search for a line of code that has a common word in it. In this case we search for a line of code that has the word canonical in it. You have to be careful if you use this script for something else. Make sure the line you want to remove has something unique that isn’t anywhere else in your file.

It’s rare in the case for canonical to be anywhere else. Unless you are writing an article about canonical tags as I have here.

One you have the script you can run it and remove the line in just a few seconds from multiple HTML files.

First thing you want to do is create a file in your text editor called deletecanonical.csh with the following code.

#!/bin/bash
for file in *.html; do
mv $file $file.old
sed ‘d/canonical/d’ $file.old > $file
rm -f $file.old
done

Save the file and place in the HTML directory.

Open a terminal window on your Mac and run the command to change directories to where your HTML files are. Learn how to use change directory command here.
If HTML files are in a /documents/websites then run the command “cd /documents/websites”
The file you created for the script file should be in this directory along with all the HTML files in which you want to remove the canonical tag.

Next you need to run the following command to make your file executable.

chmod a+x deletecanonical.csh

Then just run the file in the terminal like this.

./deletecanonical.csh

Voila ….
All .html files that had a line of code with the word canonical have been removed. You can apply this to any line of code you want to delete. Just be very careful. You may want to back up your files just in case you make a mistake.

The HTML code can be any type of tag. But the example above I’m using span tag like this. The tag provides no visual change by itself. The tag is just a way to add a style to a part of a text or a part of a document’s content with no other styling. If I use div in the above example then the highlighted text would also have a line break which I don’t want in this case.

This text is highlighted in orange. This text is highlighted in light green. This text is highlighted in bright yellow.

You can do this by adding inline styling, which means the style is in the HTML Document. See the code below.

<span id=”orange-highlight” style=”background-color: #ff9f2f;”>This text is highlighted in orange.  </span><span id=”green-highlight” style=”background-color: #67ff5f;”>This text is highlighted in light green. </span> <span id=”yellow-highlight” style=”background-color: #fff15f;”>This text is highlighted in bright yellow.</span>

Or strip out all the style elements and put them in a stylesheet. So you’re stylesheet would look like below. And in the HTML then you will have only the <span id=”green-highlight”> and so on.

#green-highlight {
background-color: #67ff5f;
}
#yellow-highlight {
background-color: #fff15f;
}
#orange-highlight {
background-color: #ff9f2f;
}

There is one very easy and simple way to do this using Google translate on your website. Visit the google translate site and follow the instructions.

You can choose all languages or specific languages if you like. For example if I want to translate webpage to only Russian then in the Google translate tool I choose specific languages and then just select Russian and English. Always add English as well. This way your user’s can go back to English as well.

It gives me the following code to copy and past on to translate this webpage to Russian.

<div id=”google_translate_element”></div><script>
function googleTranslateElementInit() {
new google.translate.TranslateElement({
pageLanguage: ‘en’,
includedLanguages: ‘en,ru’
}, ‘google_translate_element’);
}
</script><script src=”http://translate.google.com/translate_a/element.js?cb=googleTranslateElementInit”></script>

And this is how it looks on your website. You can place it anywhere of course. Try it out and see how it works.

On this Strength Training site for example, you’ll see it on the top right column for every language. So user’s can translate all pages to any language.

NOTE: On this particular webpage the code above gets translated as well. Which I don’t want. But I don’t know how to avoid that. So if you are translating this and want to copy the code from here make sure you go back to English first then copy the code.

Here’s a n example.

Here’s the HTML Code for the above example:

<div id=”col1″>This is the first column.  I can put anything in here.</div>
<div id=”col2″>This is the second column and again I can insert anything in place of this text.</div>
<div id=”content-below”>

This is the rest of the content below the columns.

</div>

Here is the CSS code for the above;

#col1 {
width: 48%;
float: left;
font-weight: bold;
padding: 10px 0 10px 0;
}
#col2 {
width: 48%;
float: right;
font-weight: bold;
clear: right;
padding: 10px 0 10px 0;
}
#content-below {
clear: both
}

In this article I show by example a vertical collapsible, expandable menu which is extremely easy to implement and can be great for organizing large navigation systems.

Start by organizing your menu subcats into categories and subcategories.

Menu Example

Click on the links below to expand and collapse the categories.

• Category 1
  • subcat 1a
  • subcat 1b
  • subcat 1c
  • subcat 1d
• Category 2
  • subcat 2a
  • subcat 2b
  • subcat 2c
  • subcat 2d
• Category 3
  • subcat 3a
  • subcat 3b
  • subcat 3c
  • subcat 3d
• Category 4
  • subcat 4a
  • subcat 4b
  • subcat 4c
  • subcat 4d
• Category 5
  • subcat 5a
  • subcat 5b
  • subcat 5c
  • subcat 5d

The first thing you’ll need is the Javascript code which collapses and expands the menu.

var myvar;
function menuinit() {
document.getElementById(‘m1′).style.display = ‘none’;
document.getElementById(‘m2′).style.display = ‘none’;
document.getElementById(‘m3′).style.display = ‘none’;
document.getElementById(‘m4′).style.display = ‘none’;
document.getElementById(‘m5′).style.display = ‘none’;

}
function menuexpand (i) {
menuinit();
if (myvar == i) {
document.getElementById(i).style.display = ‘none’;
myvar = ”;
}
else {
document.getElementById(i).style.display = ‘block’;
myvar = i;
}
}

if ( typeof window.addEventListener != “undefined” )
window.addEventListener( “load”, menuinit, false );
else if ( typeof window.attachEvent != “undefined” ) {
window.attachEvent( “onload”, menuinit );
}
else {
if ( window.onload != null ) {
var oldOnload = window.onload;
window.onload = function ( e ) {
oldOnload( e );
menuinit();
};
}
else
window.onload = init;
}

To add additional categories to this you’ll need to add to the Javascript as well. For example to add a sixth category to this menu, simply add the following line of code to the end of the menuinit() function.

document.getElementById(‘m5′).style.display = ‘none’;

You can add as many extra categories as you need this way.

The HTML code

<ul id=”nav”>
<li> <a id=”pm1″ onclick=”menuexpand(‘m1′);return false;” href=”#”>Category 1</a>
<ul id=”m1″>
<li><a href=”#”>subcat 1a</a></li>
<li><a href=”#”>subcat 1b</a></li>
<li><a href=”#”>subcat 1c</a></li>
<li><a href=”#”>subcat 1d</a></li>
</ul>
</li>
<li> <a id=”pm2″ onclick=”menuexpand(‘m2′);return false;” href=”#”>Category 2</a>
<ul id=”m2″>
<li><a href=”#”>subcat 2a</a></li>
<li><a href=”#”>subcat 2b</a></li>
<li><a href=”#”>subcat 2c</a></li>
<li><a href=”#”>subcat 2d</a></li>
</ul>
</li>
<li> <a id=”pm3″ onclick=”menuexpand(‘m3′);return false;” href=”#”>Category 3</a>
<ul id=”m3″>
<li><a href=”#”>subcat 3a</a></li>
<li><a href=”#”>subcat 3b</a></li>
<li><a href=”#”>subcat 3c</a></li>
<li><a href=”#”>subcat 3d</a></li>
</ul>
</li>
<li> <a id=”pm4″ onclick=”menuexpand(‘m4′);return false;” href=”#”>Category 4</a>
<ul id=”m4″>
<li><a href=”#”>subcat 4a</a></li>
<li><a href=”#”>subcat 4b</a></li>
<li><a href=”#”>subcat 4c</a></li>
<li><a href=”#”>subcat 4d</a></li>
</ul>
</li>
<li> <a id=”pm5″ onclick=”menuexpand(‘m5′);return false;” href=”#”>Category 5</a>
<ul id=”m5″>
<li><a href=”#”>subcat 5a</a></li>
<li><a href=”#”>subcat 5b</a></li>
<li><a href=”#”>subcat 5c</a></li>
<li><a href=”#”>subcat 5d</a></li>
</ul>
</li>
</ul>

Download the files

The CSS File
The Javascript File