As a community, we bloggers are getting a lot more switched on when it comes to the techie stuff. DAs, PAs, SEO scores and at least basic code are becoming a regular part of our language. This is brilliant, especially as, for most of us, this is something we’ve had to learn on our own. For my part, I picked up odds and sods of HTML when I was a teenager playing with Myspace templates, and the rest I’ve learned on the job as a content writer and working alongside SEO companies.
I think it‘s fantastic that bloggers are taking it upon themselves to learn basic coding and web design skills. I’m absolutely not disregarding the value of a professional web designer, but for bloggers just starting out, or running routine maintenance, it’s really helpful to understand at least basic bits and bobs of HTML. However, recently I’ve spotted a slew of similar errors, and noticed some general confusion surrounding one of the most commonly-used pieces of code: hyperlinks.
What’s a Hyperlink?
Starting at the beginning, a hyperlink is a handy little function where, instead of having a full URL displayed in a piece of text, you display a piece of text which, when clicked, takes you to a target URL. You’ve probably used them a billion times before, whether or not you knew what they were called or how to make them. There are basically four types of Hyperlink we’re going to talk about here: Basic, No Follow, New Window, and Image.
A Basic Hyperlink operates exactly how you’d expect: you click on it and you are directed to the target webpage, within the same window or tab where the hyperlink was. These basic hyperlinks can be seen by Google and other SEO ranking programs called “bots” which crawl your site looking through your content at code level. It’s these bots which determine your SEO scores, DA, PA etc. Having relevant, authoritative links on your own site, and having hyperlinks to your site elsewhere on the internet, can improve these rankings. This is why doing guest posts, getting involved in other bloggers’ projects or appearing on the websites of brands you’ve worked with can be beneficial for you.
A No Follow Hyperlink works in the same way, and you won’t notice a difference in how they function. However, under the hood there is some extra stuff going on in the code, which is quite important. The No Follow attribute means that, when the crawl bots find these links, they are told not to count it. Based on what I’ve told you so far this might seem like a terrible idea, but bear with me. Yes, having relevant, appropriate, authoritative links on your page is good. But the links have to be valuable. Linking to the same thing too many times in the same blog can be interpreted as spamming by the crawl bots, and you could be penalised. So, there are some occasions where you’ll want to include a link for reasons like user experience or for driving traffic to your blog from other sites where a No Follow link is your best bet. Basically, sometime you need readers to have access to a link, but you don’t want Google seeing it. More on this later. Also, and this is very important, you should always use a No Follow link if you’re linking to something you were paid to mention. So, if you’re doing a sponsored post on a product you must use a No Follow link. These are not my rules, they are Google’s rules. If a brand tells you to use a Basic link you have to refuse or you will be penalised.
New Window Hyperlinks, as the name suggests, opens the link you clicked (you guessed it) in a new window. This requires an added bit of code, and can be applied to Basic and No Follow links. Within my own blog I always pop this into my code. Again, you’ll find out why later.
Finally, Image Hyperlinks are used so you can click an image and be taken to another webpage. This image takes the place of the text in any other kind of Hyperlink, and can be used with Basic, No Follow and New Window links.
Phew. Next up…
When can I use Hyperlinks?
Hyperlinks are useful in so many contexts. You can use them within your own blog to link to relevant external content, such as sources, products or to your social media. These are called external links.
You can also use hyperlinks to send your readers to other posts, relevant to the one you’re writing, for instance if you’re writing a series or if you are following some kind of theme. For example, if you posted about being sent a skirt for review, and then you wear the same skirt later in an OOTD post, you could link to the review within the new piece. These are known as internal links.
You can also apply the same logic to images to turn them into “buttons” (like the ones you usually see in footers and sidebars, for instance my social media interaction buttons on the right). The code for this is slightly different, but I’ll touch on this later. You can use these images in your own site as part of the design, or you can create a button that advertises your blog, and place them on other sites.
And, finally, it’s becoming quite common for bloggers to whip up a nifty little hyperlink to leave in comments on other people’s blogs by way of a signature.
Why should I use Hyperlinks? And which ones should I use?
In your own blog, external links enhance user experience by putting all of the information readers want at their fingertips; you wouldn’t want to read a blog all about a product and then have to trawl the web to find it, would you? You want to be able to click once and find it immediately, and Hyperlinks make this possible without cluttering your post up with full web addresses. If you are linking to a specific page within a website (i.e. anything other than the homepage) you will usually want to use a No Follow link. If you are linking to a homepage (i.e. another blog, but not a single post) then it’s up to you, but I would use a Basic Hyperlink. Whether or not you want to enable the New Window part of the code is up to you, but I usually do. This way you reduce your bounce rate (i.e. people who view one page and then exit your blog altogether) and make it easier for people to read your blog while still open links as they go along. In fact, as a general rule, I like to add the New Window function to any links I leave.
By using internal links, you keep your audience engaged by presenting your blog as an unfolding narrative and helps you to make all of your content continually relevant. Internal links help to reduce your bounce rate, and when used sparingly and appropriately, they can help to improve your SEO rating. For internal links, you want to use Basic Hyperlinks, and it’s your call whether to use the New Window attribute, but I would. For the most part, for internal linking, you want to use Basic Hyperlinks for SEO improvement, however if you’re linking to the same piece a lot, or finding that you need to use a lot of internal links in one piece, use a No Follow one. Balance and moderation are important.
The logic behind using buttons over plain text URLs should be obvious: my sidebar would look horrible with a list of web addresses in it. The little buttons just look tidier, as well as making it clear which pages you’ll be linked to by using the relevant logos. You also need to know how to do this if you want a button to put on other websites: it’s all well and good to visually advertise yourself and your blog, but if people can’t click through to it they probably won’t bother. In your blog, for social media, use No Follows. Social media sites don’t need better SEO. They’re fine. When making your buttons you must add the No Follow attribute, because the same principal applies as is does to sponsored posts. If it’s been paid for, it must be No Follow, or both you and the person displaying your ad can be penalised.
When it comes to leaving hyperlinks in comments, I just think this looks a bit neater and more professional than leaving your full blog URL in a comment, and it can drive traffic to your blog. In this instance you can get away with using a Basic hyperlink now and again to help improve your backlinks and, by extension, your SEO score (especially on prominent blogs with good DA scores). However, if you comment a lot, you should tend towards using No Follow links. This is polite to the blog owner as it stops Google from thinking they have lots of spammy links, and it’s better for you because Google doesn’t think that you are a spammer while still driving traffic to your site. It’s a win-win.
How do I make a Hyperlink?
Finally, the important bit.
Within most word processing programs, and the posting features of most blogging platforms, there is usually a feature that allows you to create links automatically, without ever even having to think about code. On Blogger, for instance, you highlight the text you want to use, click the little picture of a chain link, and insert your destination URL. It even gives you the option to add the No Follow and/or New Window attributes for you. Easy peasy, lemon squeezy.
But hold up, amigos. Just because the computer CAN do the work for you, doesn’t mean it should. You’ll never learn if you let robots do all your hard graft. That’s how the androids will eventually take over the world. Ok, sorry, I’ll take my tinfoil hat off, but the point still stands. Knowing how to make these codes from scratch, whether or not you’ll regularly NEED to, can help you when I comes to bits of basic web design, not to mention troubleshooting if your automatic code isn’t functioning the way it should. It also means that if, and when, people are leaving busted code in your site you can get in touch with them and let them know how to fix it. That way you don’t end up with SEO-negative broken links on your site, and they will be happy with their sparkly, new, functional code.
So, how do you write a Basic Hyperlink?
<a href="http://www.elenabjxrn.com/">Elena Bjørn</a>
That is a basic Hyperlink for my blog, which would display like this: Elena Bjørn. The highlighted text on the right can be edited to say whatever you like, while the URL on the left can be swapped out for the relevant target URL. So, say you wanted to link to a friend’s blog. You’d put their URL on the left and their name on the right, like I did in one of the above paragraphs for Holly.
If you want to make a No Follow link, you do exactly the same, except you add rel=”no follow” between the a and the href parts. In other words:
<a rel=”no follow” href="http://www.elenabjxrn.com/">Elena Bjørn</a>
This will display like any other link. To make either of these link types open in a new window, you add target="_blank" after the URL but before the text. So, for a Basic link:
<a href="http://www.elenabjxrn.com/"target="_blank">Elena Bjørn</a>
And for a No Follow link:
<a rel=”no follow” href="http://www.elenabjxrn.com/"target="_blank">Elena Bjørn</a>
And, finally, if you want to do any of these types of link, but have a photo instead of text, you pop your image onto an image hosting site, or host it on your own servers if you’re that way inclined (though if you are you’re probably too advanced to need this post) and grab the image code. This includes the image’s URL and any borders or dimensions. Then, paste that into the place where the text would ordinarily be (in my examples that’s the highlighted text that says Brave Mermaid.) Don’t just plop in the URL of your image or it’ll display the URL of your image as a hyperlink to your target URL and that’s just too noggin-boggling to cope with. Your image code should look something like this:
<img src="http://i1308.photobucket.com/albums/s602/BraveMermaid/button_zpsdunykv8s.jpg" border="0" alt=" photo button_zpsdunykv8s.jpg"/>
So, all together, it's going to look something like this:
<a rel=”no follow” href="http://www.elenabjxrn.com/"target="_blank"><img src="http://i1308.photobucket.com/albums/s602/BraveMermaid/button_zpsdunykv8s.jpg" border="0" alt=" photo button_zpsdunykv8s.jpg"/></a>
If you've been paying attention, you’ll notice that I’ve included the No Follow and New Window attributes here, because that’s how you’re usually going to use these kinds of links. In situ, this just so happens to be my blog button.
Things to remember!
If it links to something you were paid for, always use No Follow.
If you’re worried you’re linking too much in comments on other blogs, be selective. Use Basic links on bigger blogs, and No Follows on smaller ones, or ones you comment on frequently. Don’t be spammy. Nobody likes a spammer.
Check your code works, especially if you’re using it in comments.
If it doesn’t display look at it. Have you made sure the full URL is in the code? Excluding the http://www. will stop it from working. If you’re sure all your code is correct and it still doesn’t display properly in a comment, chances are HTML commenting is disabled on that blog.
- Ask someone if you’re not sure. A second pair of eyes is sometimes all it takes. Proof reading is tricky enough, let alone in a second language. Because, really, that’s what code is: a whole new robot language.
So, I hope this has helped make sense of this common, but deceptively tricky, little chunk of code. If you have any questions please feel free to ask and I’ll do my best to help!
If you think you've nailed the code, why not leave me a nice hyperlink to your blog in the comments? Remember to make sure it works!