Pinterest button linking to wrong content

Question

On my site, I generate a Pinterest "pin" button in the following manner:

<a href="https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com%2Fblog%2Fphotography-website-redesign%2F&description=Photography+Website+Redesign" onclick="__gaTracker('send', 'event', 'outbound-article', 'https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com%2Fblog%2Fphotography-website-redesign%2F&amp;description=Photography+Website+Redesign', '');" data-pin-do="buttonPin" data-pin-count="beside"><img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" /></a>

With the following script loaded in the head:

<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>

The Problem:
In this case (and in a few others like it), when clicked it incorrectly offers to Pin this url: https://example.com/blog/st-louis-aiga-website-interactive-chair/

Additional Notes:
1. Not all blog entries have this incorrect behavior. Many other posts "pin" to the correct entry.
2. The site is verified with Pinterest.
3. This site has some htaccess redirects that I thought may be causing issues. I've tweaked / tested and don't believe they are a factor, but it's worth mentioning: It redirects the "/blog/" url to not have "/blog/" in it. Additionally, it redirects to force https, and non-www. Example:
http:www.//example.com/blog/st-louis-aiga-website-interactive-chair/
will redirect to
https://example.com/st-louis-aiga-website-interactive-chair/

Updates:
The problem persists, but I've spent a large amount of time trying different options while reviewing the developer code here.

And, as it turns out, even when the image is right, the description is wrong.

Any tips / suggestions?

EDIT / UPDATE 1:
Per @Paolo's answer, I have actually tried a different format, but have the same result.

Here's the pin, in the different format, that results in the same result:

<a href="https://www.pinterest.com/pin/create/button/"
    data-pin-do="buttonPin"
    data-pin-media="https%3A%2F%2Fexample.com%2Fwp-content%2Fuploads%2Fhip-photography-web-design.jpg"
    data-pin-url="https%3A%2F%2Fexample.com%2Fphotography-website-redesign%2F"
    data-pin-description="Photography+Website+Redesign"
    data-pin-count="beside">
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

Note that I wondered if the URL encoding caused problems, so I tried it without URL encoding, and the behavior is different, but the result is correct.

EDIT / UPDATE 2:
I decided to try the buttonBookmark, and I'm seeing the incorrect behavior on some of the images.

It properly gets all of the images, but the descriptions for some images are correct, and the description for some images are incorrect.

Here's the pin (with anonymized URL's):

<a href="https://www.pinterest.com/pin/create/button/"
    data-pin-do="buttonBookmark"
    data-pin-url="http://www.example.com/blog/photography-website-redesign"
    data-pin-description="Photography Website Redesign"
    data-pin-count="beside">
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

I've also tried this pin with the exact same mixed incorrect descriptions:

<a href="https://www.pinterest.com/pin/create/button/"
    data-pin-do="buttonBookmark"
    data-pin-count="beside">
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

Answer 1

As a first suggestion I would check out to Pinterest's documentation:

https://developers.pinterest.com/docs/widgets/save/

---

As you have data-pin-do="buttonPin" you're expected to specify an image URL using the media attribute. This is missing from your code.

Furthermore I would specify url and description using attributes. It seem to me there are no errors in your code but my approach would definitely prevent URL encoding errors.

Finally I would specify URLs that point directly to the page/image/resource without redirects.

To sum up:

<a href="https://www.pinterest.com/pin/create/button/"
data-pin-do="buttonPin"
data-pin-media="the-url-of-the-image-here"
data-pin-url="https://www.example.com/photography-website-redesign/"
data-pin-description="Photography Website Redesign"
data-pin-count="beside">
    <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

For readability I intentionally removed the Google Analytics onclick script.

I hope this helps.

---

Edit: (1)

One side note: Pinterest may cache data (URLs, descriptions,...) and show undesired behaviour even once your web page code is fixed. I suggest, after code fixes, to test correct behaviuor on new pages.

---

Edit: (2)

(1) AFAIK attributes should not be URL encoded.

So data-pin-url="http://www.example.com/blog/photography-website-redesign" is good.

(2) I would stick to the data-pin-do="buttonPin" widget because it lets you specify the image. Furthermore as things are fixed any widget should work properly.

(3) The script loading code should be placed just before the </body> closing tag and have the defer option:

<script async defer src="//assets.pinterest.com/js/pinit.js"></script>

(4) Give it another try with the original "attribute-less" version of the code, the one with the parameters appended to the URL.

But this time encode differently the parameters, the same way you see them encoded in the Pinterest's documentation examples (see the link at the top of the answer)

I've inserted newlines for readability in the URL, they should be omitted

<a data-pin-do="buttonPin"
href="https://www.pinterest.com/pin/create/button/
?url=https://www.example.com/photography-website-redesign/&
&media=https://www.example.com/your-image-url-goes-here.jpg&
description=Photography%20Website%20Redesign"
></a>

Basically in the URL parameters you escape only ampersands, spaces with %20 and double quotes.