data-pin-href taking over href
This is the snippet of code I have on my page
<script async defer src="//assets.pinterest.com/js/pinit.js"></script>
<a href="https://www.pinterest.com/pin/create/button/"
data-pin-custom="true"
data-pin-do="buttonBookmark"
class="pinterest"
role="link"
tabindex="1">
<i class="fab fa-pinterest-p" aria-hidden="true" title="Pinterest"></i> pin it
</a>
When viewed in the browser, it outputs like this:
<a
class="pinterest"
data-pin-custom="true"
data-pin-do="buttonPin"
role="link"
tabindex="1"
data-pin-log="button_pinit"
data-pin-href="https://www.pinterest.com/pin/create/button?guid=5pUYMNpbWfnZ-1&url=https%3A%2F%2Fwww.spine-health.com%2Fconditions%2Fneck-pain%2Fneck-strain-causes-and-remedies&media=undefined&description=Neck%20Strain%3A%20Causes%20and%20Remedies">
<i class="fab fa-pinterest-p" aria-hidden="true" title="Pinterest"></i> pin it
</a>
There is no actual href in the link tag now. Which means, the browser doesn't see it as a link (no link mouse cursor). By adding role="link" and tabindex="0" I'm able to place the button in the right keyboard accessible tab order, however, I can't seem to "fire" the link. Hitting enter, or space on my keyboard does not load the url as defined in data-pin-href.
Have I coded something incorrectly here?
@tsidel Did you ever have any luck with this one? Google doesn't like my <a> elements that are missing an href.
Google wants links to be "crawlable" as stated here: https://developers.google.com/search/docs/crawling-indexing/links-crawlable?visit_id=637983546833964747-1441666970&rd=1
@mortscode - Unfortunately no. I was running into this same problem because google dev tools was complaining about it and for accessibility. We're about to launch a redesign, and are doing away with the pins. Good luck!