Pinterest 按钮链接到错误的内容

Question

在我的网站上，我通过以下方式生成 Pinterest“pin”按钮：

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

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

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

有什么提示/建议吗？

编辑/更新 1：
根据@Paolo 的回答，我实际上尝试了不同的格式，但结果相同。

这是不同格式的图钉，结果相同：

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

为了便于阅读，我特意删除了 Google Analytics onclick 脚​​本。

我希望这会有所帮助。

---

编辑：(1)

附注：Pinterest 可能缓存数据（URL、描述等）并显示不良行为，即使您的网页代码已修复。我建议，在代码修复后，在新页面上测试正确的行为。

---

编辑：(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 和双引号的空格。