SEO: <button> vs <a> HTML tags

Question

I'm building a project using Twitter Bootstrap. In the documentation it's stated:

Button tags

Use the button classes on an <a>, <button>, or <input> element.

[...]

Cross-browser rendering

As a best practice, we highly recommend using the <button> element whenever possible to ensure matching cross-browser rendering.

Is this a good practice SEO-wise speaking?

Solution 1

SEO-wise it is best to use the <a> tag since search engines don't go through buttons nor input but rather look for anchor tags and their attributes (href, title). So if you're linking to another page on the website which needs to be crawled by search engines it makes more sense both for SEO and with regards to semantics to use an anchor tag.

On the other hand if you're building a form, it makes much more sense to use the <button> or <input> and in this case, you should follow the recommendation in the documentation.

I believe the reference in the documentation should actually say:

[...] recommend using the element instead of the input element whenever possible [...]

Also note that most form elements including <input> and <button> have browser specific styles that are sometimes hard/impossible to change without JavaScript hence this comment in the Twitter Bootstrap documentation.

Solution 2

As i know google doesn't click on buttons and this bad for SEO. because many buttons makes form submit or JavaScript execution and it's not useful. I can see it on google-analytics of my website. it's caching only a tags href's.

Comments

[Bill]

"browser specific styles that are sometimes hard/impossible to change without JavaScript" - Huh? All user-agent styles are easily overridden with normal CSS?

[grim]

@Bill, have you ever tried to change the styles of the popup of an <input type="date" /> ?

[Bill]

I haven't, usually used libraries for date inputs. I'd recommend having a search on google and on here, if you're still stuck with a specific problem ask a question on here :)