SEO (Search Engine Optimization) and links go hand-in-hand. That’s why we hear so much about it all over the internet: blogs, forums, groups, social media – you name it; everywhere you look, somebody is talking about “link juice”, “link bait”, how to build links, optimizing links, etc.
And sometimes you hear about navigation and usability. But rarely do we hear about Anchors.
Today we are going to look at a very specific type of internal linking: local navigation.
Once you understand the true creation of a link, how to use Anchors and they are can be important, you’ll be shouting “Anchors Aweigh!”
Okay, maybe not, but at least you’ll be a bit wiser. 🙂
Wikipedia defines an Internal Link as “a hyperlink that is a reference or navigation element in a document to another section of the same document or to another document that may be on or part of the same website or domain of the internet.”
We know about this. It’s what makes up our navigation systems.
We know about usability factors of allowing the user to get where they want in the least number of clicks possible (and if you didn’t – we’re trying to make it easy for them).
We also know about the SEO factors of supposed page rank, link weight, authority, silos, no dead links, anchor text, etc.
But Wait! I just said “anchor text” and yet the title of this post is “A Name is Not an Anchor”. Confused? Read on.
Structure of a Link
In any link within your opening angled brackets you place the letter “a” along with various attributes and values of the Anchor element, and the text for the link (known as Anchor Text), followed by the closing tags.
A very simple link might look like this:
<a href="https://www.craigkiessling.com">Atlanta SEO Services</a>
Let’s look at what that means. The brackets simply denote an HTML tag. The “A” at the beginning designates the word Anchor. Just like a boat, it holds down a certain place, but here in the online context. This anchor could be a place within the document we are currently reading. It could be a completely different document within our own library (or website) or perhaps some other library. Or perhaps it could be a specific spot within our own library.
The “href” bit means “HyperText Reference”. It is where we usually put the URL or URI. The address or the location of the web site, page, file, image, or whatever it is – that we want to link to.
How about a little more complex link? Got that too:
<a href="https://www.craigkiessling.com" class="SEO-Link" name="Atlanta SEO Services" target="_blank" rel="nofollow">Atlanta SEO Services</a>
And now let’s look at this. The items that are the same as the previous example we do not need to discuss. “Class=” tells us that this link should be labeled as having the class “SEO-Link”, and whatever styling we set up for the class of that name n our CSS should be applied to this link (or any other with that same class name; ids are unique but classes are not). Then we have the “Name” attribute. This something that was pretty cool back in the day; you could name your links, name your link destinations. Great for usability and SEO right? Well maybe. But with HTML5 – the most modern version of it that everyone is using – it’s deprecated; yeah it’s outta here. Then you have the “Target”
attribute of the link. This says where to open the new link – in the same browser window, or a brand new one? Here we tell it a brand new one. “Rel” is basically telling us what the Relationship is between this page and the one being linked to. Here we tell SE to bugger off – don’t follow and waste our link juice :P.
Anchors in HTML5
What do you think happens here, with a link of today’s standards?
<a href="URL" title="additional information" id="cool-name" class="pretty-cool-name">link text</a>
Technically, the “Title” attribute is suppose to give more information about the element in question; wiki says it’s suppose to give “brief” information about the link.
Problem is…Most of the crap SEO people have done with this like they’ve done with everything else – ruined it via over-stuffing of spam keywords etc.
“Class” is what we’ve talked about before – CSS styling.
But what about the ID?
Oh yeah. The “ID=”. I left that one out intentionally because it can be a bit confusing. Bear with me now, we’re diving in head-first!
ID. In CSS you have classes and IDs. Classes you can use many times throughout a site, but IDs you can not.
Like if you wanted every first paragraph to have Drop-Caps for the first sentence; or every first letter of the first paragraph in each post.
But one particular paragraph you want to have special and different stylings. Well then you would give it an ID.
Now then, in most browsers, when the cursor hovers over a link, it typically changes into a hand with a stretched index finger, and the title appears in some way (varies according to browser). Some browsers render alt text the same way, though this is technically incorrect.
In HTML5, you can still use ID for extremely specific styling, But…You can also use it for naming. Why? Because as we’ve already explained they’ve gotten rid of name, and title is used for information.
A name is Not an Anchor
So here we are full-circle. Name is no longer used as a legit attribute for elements in HTML5. Title helps boost us from a SEO and Usability perspecitve. And now for styling – well my suggestion is to still use Classes, but very specifically and with the Cascading methodology. And only use IDs for what you use to use Name for.
That’s right – ID is the new name.
It helps though, for sure. You’ve seen how Google can treat a validated & well-optimized page with a variety of extra links showing up for a domain in the SERPs (Search Engine Result Page(s)).
We are use to seeing well optimized pages show up nicely like this for sites that have various pages, however did you know you can get the same results for simply having one page but broken up semantically well? Yep.