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和雙引號。