1

Firstly, an introduction to why the element is necessary

I have a need to compensate for a fixed top navigation bar in my anchors. For example, if I let my users navigate to a section like #comments in order to view comments below a news article, the first 60-ish pixels of it get covered by the fixed header of the page.

In search for compensating for that, I have found recommendations to use a dedicated element for that purpose, such as an <a name="comments"></a>, and then style it with CSS to compensate for the top offset in this way:

a[name] {
  padding-top:  60px;
  margin-top:  -60px;
}

This works well, it moves the element upwards, but content downwards, so that the browser will anchor 60px sooner than content begins, leaving just enough space for the navigation. This solves the technical problem.


Question

My worry here is, will search engines penalise the site's ranking for having empty <a> elements that lead nowhere? Semantically <a> is a link, but it doesn't link anywhere, and would probably cause the same amount of problems as having the infamous <a href="javascript:;"></a>.

Would I solve that problem entirely by adding a rel="noindex" to it, or even rel="noindex,nofollow"?

Alternatively, should I use another element instead of <a> for anchoring? By specification spans and divs shouldn't really have a name attribute. Adding an id attribute on them to use instead of name would get around that problem, but again semantically spans and divs without any content shouldn't exist.

Strictly SEO-wise, what is the best setup to use for this?

  • 1
    Fact of the matter... All the listed methods will have no bearing on your rankings. Google and Bing care little for semantic correctness or markup, they care about the 'rendered results', after-all it is that what visitors see, not code. Empty spans, divs, a or any other elements will not help or hurt your rankings. But I would recommend using id over name. – Simon Hayter Jul 8 '17 at 9:07
  • There is no noindex link type, and if you specify multiple link types, you have to separate them with whitespace, not with comma. – unor Jul 9 '17 at 17:42
0

I have a similar issue with my site, but I handle it differently. I intercept clicks on anchor links with JavaScript and let JS handle them. This has two advantages:

  1. It allows smooth scrolling animation
  2. It allows me to compensate for the top bar by subtracting space for it from element offset

Here is the code which is meant to work with jQuery:

$(document).ready(function(){
    $('a[href*="#"]:not([href="#"])').click(function(){
        if (location.pathname.replace(/^\//, '') == this.pathname.replace(/^\//, '') && location.hostname == this.hostname) {
            var target = $(this.hash);
            target = target.length ? target : $('[name=' + this.hash.slice(1) + ']');
            if (target.length) {
                $('html, body').animate({
                    scrollTop: Math.max(0, target.offset().top - 60)
                }, 1000);
                return false;
            }
        }
    });
});

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.