Pinterest的按钮链接到错误的内容

Question

我的网站上，我产生如下方式Pinterest的“针”按钮：

<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> 

随着在head加载下面的脚本：

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

问题：
在这种情况下（和其他一些喜欢它），当点击它不正确地提供Pin Pin this url： https://example.com/blog/st-louis-aiga-website-interactive-chair/

附加说明：
1.并非所有博客条目都有这种不正确的行为。许多其他职位“钉”到正确的条目。
2.该网站已通过Pinterest验证。
3.本网站有一些htaccess重定向，我认为可能会导致问题。我已经调整过/测试过了，并不认为它们是一个因素，但值得一提的是：它重定向了“/ blog /”网址，其中没有“/ blog /”。此外，它重定向到强制https，而非www。例如：
HTTP：WWW .// example.com/blog/st-louis-aiga-website-interactive-chair/
会重定向到
https://example.com/st-louis-aiga-website-interactive-chair/

更新：
问题仍然存在，但在此处查看开发人员代码时，我花了大量时间尝试不同的选项。

而事实证明，即使图像是正确的，描述也是错误的。

任何提示/建议？

编辑/ UPDATE 1：
每@保罗的回答，其实我已经尝试了不同的格式，但有同样的结果。

这里的脚，在不同的格式，这导致了同样的结果：

<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> 

注意我想知道，如果URL编码引起的问题，所以我想它没有URL编码，以及行为是不同的，但结果是正确的。

编辑/更新2：
我决定尝试buttonBookmark，和我看到的一些图像的不正确的行为。

它正确地获取所有图像，但某些图像的描述是正确的，并且某些图像的描述不正确。

这里的管脚（与匿名的URL）：

<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> 

我也试过这个引脚完全相同的混合不正确的描述：

<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

作为第一个建议，我想看看到Pinterest的文档：

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

---

正如您有data-pin-do="buttonPin"，您需要使用media属性指定图像URL。这是从您的代码中缺少。

此外，我会指定url和description使用属性。在我看来，你的代码没有错误，但我的方法肯定会防止URL编码错误。

最后，我将指定直接指向页面/图像/资源而不重定向的URL。

综上所述：

<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> 

为了提高可读性我故意去掉了谷歌Analytics（分析）onclick脚本。

我希望这会有所帮助。

---

编辑：（1）

一个侧面说明：Pinterest的可能缓存数据（网址，描述，...），并表现出意外的行为，甚至有一次你的网页代码固定。我建议在代码修复后，在新页面上测试正确的行为。

---

编辑：（2）

（1） AFAIK属性应该不是 URL编码。

因此data-pin-url="http://www.example.com/blog/photography-website-redesign"是好的。

（2）我会坚持data-pin-do="buttonPin"小部件，因为它允许您指定图像。此外，因为事情已经解决，任何小部件都应该正常工作

（3）脚本加载代码应该放在刚刚</body>之前结束标记，并有defer选项：

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

（4）给它一个尝试与原来的“属性 - 更少“的代码版本，即带有附加到URL的参数的代码。

但此时编码不同的参数，你看到他们在Pinterest的文档实例编码相同的方式（见的答案顶部的链接）

我插入新行以提高可读性的URL，他们应该被忽略

<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> 

基本上在URL参数，你只逃脱＆符号，空间与%20和双引号。