When a link isn’t just a link.
The other day during my blogging class, I taught my students about links. Seems like a simple concept right? If you think so then you may not be aware of the different types of links available and when to use them.
A quick intro to HTML
HTML or Hyper Text Markup Language is the language of the web. It is what makes these words show up as italics, or bold or even underlined.
The way that HTML generally works is that if you want to have a piece of text behave in certain way, you have to wrap with the right opening tag and closing tag.
If you want something bold, you first place the strong tag, then the text you want, then you close the strong tag. So that if you were to type this:
<strong>some text that should be bold</strong>
Then the result would be this:
some text that should be bold
Notice the opening <strong> tag, then the text, then a closing </strong> tag. The "/" tells your browser that this is the closing tag. In order for you to actually see these codes, you must be in your blogpost editor in HTML mode. In WordPress, you have "Visual" and "HTML" mode on the top right hand corner of your editing window. In other blogs Visual may be called "WYSIWYG", and the HTML mode may be called "Code."
Well, there are more things you can do to those tags to tell your browser that there are additional parameters you want to give to a particular tag. Generally, the WYSIWYG short for What You See is What You Get or Visual mode don't give you access to these tags so you have to roll up your sleeves and edit these by hand.
Back to the thing about links
Let's take a look at the link tag. The tag that makes a link work is called an anchor tag and its code in its simplest form would look something like this:
<a href="#">The Link Text</a>
So if you were to type that in HTML mode, you'd simply get this:
The "#" symbol in this case acts as an anchor and it could be replaced with a URL that will take the visitor somewhere. For example: http://example.com or http://example.com/awesome-document.doc OR http://example.com/my-favorite-song.mp3. Here it is how it could look in HTML mode:
<a href="http://example.com/my-favorite-song.mp3">My Favorite Song</a>
That's all fine and dandy, in fact you can easily create links with the little chainlink icon in most programs that let you type stuff. So why am I telling you this? Well there are a couple other things you can do to a link that will make it different and appropriate in some situations.
Remember how I said that you could add more "stuff" to a tag? In the case of a link as shown above, you could also instruct the HTML that when someone clicks on a link it should open in a new window. Or perhaps you want to tell the browser to display a specific piece of information when someone hovers their cursor over the link. And the most important part that I want to show you today is how to create a "nofollow" link.
So let's see a couple examples.
Opening a link in a new tab or window:
<a href="https://notagrouch.com" target="_blank">Oscar Gonzalez's Website</a>
Would translate to this:
And if you actually click on that, you'll notice that the browser will open a new window or tab, try it. I'll wait. This is accomplished by using the parameter of target, with the value of _blank. Take a closer look and you'll see in the link there is a part that shows: target="_blank" This tells the browser, this particular link should open in a new window. Pay particular attention to the spaces between parameters and notice how the values after the equal sign are always wrapped up in double quotes.
Adding hover text to a link.
This is called a Title and it is easy to do. Building upon the link example above, you can make a link display a little more information about the link that a visitor is about to click. Hover your mouse over the link below and notice the extra text that pops up.
To accomplish that, you need to add the parameter of Title with some text after it, like this:
<a title="This is Oscar's Personal Blog. This is the Title of this link!" href="https://notagrouch.com" target="_blank">Oscar Gonzalez's Website</a>
This one is useful when you want to promote or describe the link a little bit further, but it also helps search engines understand what a link is all about and you should try to use it often.
Links leak SEO juice
The most important reason I'm sharing this with you is to tell you about these types of links. These are called nofollow links. In the world of Search Engine Optimization and advertising, nofollow links are critical to a website's survival. For example, if you advertise something on your website for which you are getting compensated it is strongly advised that you make the links to the store, or manufacturer be "nofollow."
This is what Wikipedia says about nofollow links:
nofollow is a value that can be assigned to the rel attribute of an HTML link element to instruct some search engines that a hyperlink should not influence the link target's ranking in the search engine's index. It is intended to reduce the effectiveness of certain types of search engine spam, thereby improving the quality of search engine results and preventing spamdexing from occurring.
In layman's term, if you are getting paid for a link, you should make it "nofollow." Each time you link to a webpage, Google and other search engines look at those links and make a determination that the destination of that link is important. The more links there are to that location, the more "important" the destination may appear to the search engines. This is how something appears at the top of Google results. So it seems that you could easily get to the top of the search results if you just get enough links... right? Correct! But there's a caveat.
The thing is that Google doesn't want you to put links on your page to alter these results if someone is paying you to put those links on your page. And if they find that your website is receiving a lot of links that appear to be paid, they may take your website and bump it to the bottom of the pile. So you have to be careful of links that go out to certain types of websites. Make sense?
The way that you add a nofollow link is similar to adding a title or making the link open up in a new tab or page. You need to add an attribute and a value. Like this:
<a title="This is Oscar's Personal Blog. This is the Title of this link!" href="https://notagrouch.com" target="_blank" rel="nofollow" >Oscar Gonzalez's Website</a>
And that results in this:
There is no way to easily tell if a link is nofollow. You have to have a plugin that shows you, or you have to look at the code of the page to find out (I'll cover this in another blogpost).
This type of link essentially tells Google: this link is for my visitors to find the resource I want to share with them, but I don't want you to give it much value as far as search results go.
Keep in mind that Google has over 200 signals that they consider when they give websites their ranking, so while the number of quality links is one of the most important, it isn't the only one.
The lesson here is that a link isn't just a link. There are many things you can do with links and some reasons why you want to know about these. If you want to know about other attributes you can apply to your links, read a little bit about XFN, the Rel attribute of a link or Link Juice.
