: Best element to use for simple anchoring, avoiding potential SEO penalties for lack of content and purpose of the element Firstly, an introduction to why the element is necessary I have a need
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?
More posts by @Looi9037786
1 Comments
Sorted by latest first Latest Oldest Best
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:
It allows smooth scrolling animation
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;
}
}
});
});
Terms of Use Create Support ticket Your support tickets Stock Market News! © vmapp.org2024 All Rights reserved.