I create a HTML link like this.
<a href='http://www.mywebsite.com/aPage' onclick='customFunc(); return false;'>Show Info</a>
I'm writing an ajax functionality (in customFunc) when this link is clicked and displaying data which is same as the data shown by the link in HREF tag.
Question: When search engines see my link, will they cache it? Or will they get an impression that I'm trying to do a false magic to get this page cached, and hence ignore it?
Appreciate your suggestions.
Edit: So what I interpret from this Q & A is that, (theoretically) search engines are just bothered about the href, and since it found one in the above link - it will cache this page without any troubles and it won't be worried about the things I do in the onclick JS call.
If anyone has a different opinion, please do add your comments.
Spiders will automatically follow each anchor in your page. If you want to avoid this behavior you have to specify rel="nofollow" for "a" tags you want to skip. You can also avoid indexing of whole pages using meta tags or robots.txt.
Anyway attached event listeners are theoretically irrelevant to search engine... I took a look the SEO guide lines from google here: http://www.google.com/webmasters/docs/search-engine-optimization-starter-guide.pdf and I did not read about a scenario like your.
Although search engines like Google now interpret some javascripts, in this case, it will clearly see the href and not see the rel="nofollow".
Related
Since we are diving into SEO guidelines the past weeks we came across a question for which we didn't find a satisfying answer. (We simply didn't agree on this topic). We would like more opinions on this.
Since many projects use jQuery and Bootstrap lately, anchor tags often get used like
Add to cart
Then some fancy JavaScript code wil attach an event handler on the element so the product will be added to the cart when someone clicks this link.
As SE spiders follow all links they would end up following all these internal links (note the #) which can't be good for the ranking.
Some of us thought it would be a good idea to add the rel="nofollow" attribute to these kind of links to prevent spiders from following these links. Others said this would prevent the current page (targeted by the #) to be indexed properly.
It could be an idea to replace all these 'placeholder <a>-tags' with <span>'s or <button>'s but (using Bootstrap) sometimes they exist next to real links and a small difference will be visible due to browser rendering issues with some elements. (especially when using btn-group)
In the Bootstrap manual we found:
"If the <a> elements are used to act as buttons – triggering in-page functionality, rather than navigating to another document or section within the current page – they should also be given an appropriate role="button".
But will SE spiders take this role attribute in account?
We are, as always, curious about how other developers tackle this issue.
We've seen these (and others) articles already
http://en.wikipedia.org/wiki/Unobtrusive_JavaScript
Href attribute for JavaScript links: “#” or “javascript:void(0)”?
Then some fancy JavaScript code wil attach an event handler on the element so the product will be added to the cart when someone clicks this link.
Google is capable of executing some Javascript. Hence, if the click leads to another page, it likely bots will try to follow it.
As SE spiders follow all links they would end up following all these internal links (note the #) which can't be good for the ranking.
The # will be ignored. No harm done to your ranking. Crawling and ranking a separate things.
Some of us thought it would be a good idea to add the rel="nofollow" attribute to these kind of links to prevent spiders from following these links.
It is not a bad idea, especially if you have a large site. You don't want bots to lose their time unnecessarily on those links. But, it is not an absolute must.
Others said this would prevent the current page (targeted by the #) to be indexed properly.
No. If bots managed to get to analyze these links, it means they must have had access to the URL of the page having those links in the first place. Hence, it is enough for them to index that page.
But will SE spiders take this role attribute in account?
I would not rely on this. If you are worried or wanna play it safe regarding bots, you can always set NOFOLLOW on those links.
If the elements are acting as buttons and not as anchor links they should not be indexed. The rel="nofollow" should be used. Better yet it should be a button, not an anchor link.
Having an empty anchor link with nothing but a '#' is bad practice not only for SEO.
I'm currently trying to fix a few bugs on a website that has been built by some guys.
The thing is, I'm having trouble seeing the point of a few things they've done.
The website has a <div> with an onclick="window.location='foobar'" and inside it an <a> tag. Both lead to the same place.
Is there a reason for that?
Thank you!
Some developers are better than others.
More importantly, developers are human and make mistakes. You've found one.
regarding why a developer would use <button onclick="location='somewhere'">, there's a lot of bad advice on the internet, even on stackoverflow, even by high rep users (not trying to pick on j08691, just making a point).
Additionally, button elements may not contain a elements per the specification, so a nested anchor is invalid.
With all that said, the page probably still works. The thing that makes HTML really powerful is its ability to fail gracefully. Instead of erroring out or preventing the entire page from working, the browser is able to make things work, even when the developer does something silly like writing invalid HTML.
I only see downsides:
The user can't use right-click copy link. It will just copy the javascript
Bots from search engines won't follow the link
Users that have javascript disabled can't navigate using that link
However if I understand you correctly, then there is <a href="foobar"> around it?
If that is true, then that would render the disadvantages I have listed above to not apply.
In this case the author of the website may have used this technique as some sort of a hack to style something on multiple browsers the same way...
I'm making a web application that uses hash tags for page navigation like this
http://foo.bar.com/#pages/home
I just realized that one of my pages is going to be kind of huge, containing it's own tree-structured menu with links that should scroll the page to different anchor tags in the page. Obviously I can't use actual hash tags for that now, since they are busy. I'm going to have to use a programmatic solution with an URL like this
http://foo.bar.com/#pages/home/section
Or would it be possible to use more than one hash symbol, perhaps changing it to this?
http://foo.bar.com/#!/pages/home#section
But how can this be done programmatically anyway?
I'd scrap the broken use of hashbangs, switch to using the history API instead and give serious consideration to the question of "If that much content is being replaced, is loading it via Ajax really providing a benefit?"
Your Question does not seem clear to me,
If your page is too large, you could go for pagination using AJAX and PHP, for more
http://www.codediesel.com/php/simple-pagination-in-php/
or http://www.99points.info/2011/01/ajax-pagination-using-jquery-and-php-with-animation/
Other wise, if you still want things to be in URL #tags, then you can go with it.
I doubt you could give something like this "http://foo.bar.com/#pages/home/ "
You could also try URL rewriting http://httpd.apache.org/docs/2.0/misc/rewriteguide.html
I've read how the anchor tag is holy, it should not be used with javascript:
Popup
that it should ONLY be used for a link to another page:
Take me over there
So what is the proper use of the anchor tag with javascript? Should I be using:
Energize!
or some other variant? I'm somewhat confused by different views on the subject. Also is it only SEO that I should be worried about if making the href a javascript piece? Or is it more of a proper web standards compliance deal?
Thoughts? Hopefully I'm not the only one confused.
You are not alone Jakub; even the biggest WWW companies use different approaches.
However based on experiences since Netscape days I wouldn't use :
Popup
which can make some troubles on some browsers, like opening an empty page or breaking the event order on the current page.
However;
Energize!
or;
Link
don't make a serious trouble and are ok to use. Note that the prior one may reset the scroll to the top.
You should use meaningful link targets and unobtrusive javascript wherever possible, but this is not always possible in real life examples. It's not a defined standard, but a method highly agreed by most of the web developers.
When it comes to standards, there is one related with this situation:
You should consider using a 'button' for inputs which doesn't really send the visitor to a page, but does an operation. This is also important for SEO.
As #Sime says (and it should be an answer really), it is considered "bad practise" to now directly reference javascript in any HTML object. So in these cases you attach the event using something like jQuery using the concepts laid out in "unobtrusive javascript".
As you mention another consideration is SEO and accessibility. If SEO is important to your site, make sure that the site is fully navigable using just standard links. Again you can manage this using "unobtrusive javascript", etc.
I've always gone with using an anchor as normal (i.e. specify either an alternate url that is another location where the user could perform what's being done through javascript, or use javascript:void() / #) then use the onclick event for anything you want executed.
You could also use a <span> if you're that worried about conformance, just would need to perhaps style it (change cursor, perhaps color as well) to make it visually obvious you're making it an action.
I think Facebook is the best-case example. Almost all of their links are javascript tied in, but they also have a "backup" page for those that either have disallowed javascript or don't have it (the later, in this day and age, being far less common). Take a look at a module that reacts like you'd like yours to and see how they've done it. They also invested a bunch of work in best-practices that you can benefit from.
If anything, you should bind your anchor links to javascript methods only by using unobtrusive javascript like Paul mentioned.
This means, using separation of concerns and leaving your markup being just that, html markup:
<a id="Jolter">Energize!</a>
and later
<script type="text/javascript">
$(document).ready(function(){
$("#Jolter").click(function(){
// doStuffHere ...
});
});
</script>
I'm trying to use something like jQuery biggerlink or just simple window.location for making bigger and more accessible links. What I'm wondering is what happens with SEO in these cases — I have anchor link in the containing element, but does Google penalize such actions since I'm not really clicking on link. Also, are there any other solutions (besides CSS positioning) which could be better than this one? Thanks.
Setting window.location from script will not be spotted by search engines (Google has detection for simple document.write additions but this won't catch any of the more advanced DOM scripting stuff). It's also bad for usability: all the usual browser controls you get for links, like middle-click-for-new-tab, right-click-copy-location or bookmark stop working.
biggerlink avoids the SEO issue by keeping the correct <a href> markup in the HTML, and adding extra click handling over the top of that. (The ‘bigger’ parts of the biggerlinks still don't respond to eg. middle-click, but the ‘native’ parts do.) As long as you keep <a href> in an appropriate place you don't have to worry about search engines.
I'm not at all sure this stuff is necessary. The effects I've seen biggerlink do could easily be done using links with ‘display: block;’ and occasional workarounds like multiple links when you want to do things like headings inside the links. Sure it's a little more markup, but it's a lot less scripting and then all links respond in the expected way links usually do.
This doesn’t have similarly completion and code syntax to the Meta Refresh tag, although they perform alike wherever the Meta tag refresh and the JavaScript redirect occurs on the customer surface, sense at the web browser point.
<script type="text/javascript"> window.location = "http://www.example.com/path/file.html" </script>
This can be located wherever inside the HTML basis code and is most likely used more than Meta tag Refresh for encoding purpose delays seeing as in JavaScript you can make use of a lot additional other scripting include the window.location function. While this isn’t best for SEO as search engines usually ignore JavaScript code. In the recent years, Google reads javascript and talk about it’s headlell browser technology including GoogleBot crawling.
Search engines generally don’t interpret JavaScript, they just read what your HTML markup says. So your SEO attempts will be overlooked.