Кнопка Pinterest, связанная с неправильным контентом

На моем сайте я создаю кнопку "контакт" Pinterest следующим образом:

<a href="#" onclick="location.href='https://www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.example.com%2Fblog%2Fphotography-website-redesign%2F&description=Photography+Website+Redesign'; return false;" 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>

Со следующим script, загруженным в head:

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

Проблема:
В этом случае (и в некоторых других подобных случаях), когда он щелкнул, он неправильно предлагает Pin this url:   https://example.com/blog/st-louis-aiga-website-interactive-chair/

Дополнительные примечания:
1. Не все записи в блоге имеют это неправильное поведение. Многие другие сообщения "наводят" на правильную запись.
2. Сайт проверен с помощью Pinterest.
3. На этом сайте есть некоторые переадресации htaccess, которые, как я думал, могут вызывать проблемы. Я изменил/протестировал и не верю, что это фактор, но стоит упомянуть: он перенаправляет URL-адрес/blog/ ", чтобы не иметь в нем /blog/ ". Кроме того, он перенаправляет силу https и не-www. Пример:
      HTTP: WWW.//example.com/blog/st-louis-aiga-website-interactive-chair/
перенаправит на
      https://example.com/st-louis-aiga-website-interactive-chair/

Обновление:
Проблема сохраняется, но я потратил много времени на различные варианты, просматривая здесь код разработчика.

И, как оказалось,, даже если изображение прав, описание неверно.

Любые советы/предложения?

EDIT/UPDATE 1:
Per @Paolo ответ, я действительно пробовал другой формат, но имел тот же результат.

Здесь вывод в другом формате, который приводит к такому же результату:

<a href="#" onclick="location.href='https://www.pinterest.com/pin/create/button/'; return false;"
    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-адресов, а поведение отличается, но результат правильный.

EDIT/UPDATE 2:
Я решил попробовать buttonBookmark, и я вижу неправильное поведение на некоторых изображениях.

Он правильно получает все изображения, но описания некоторых изображений верны, а описание для некоторых изображений неверно.

Здесь вывод (с анонимными URL-адресами):

<a href="#" onclick="location.href='https://www.pinterest.com/pin/create/button/'; return false;"
    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="#" onclick="location.href='https://www.pinterest.com/pin/create/button/'; return false;"
    data-pin-do="buttonBookmark"
    data-pin-count="beside">
        <img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>

Ответы

Ответ 1

В качестве первого предложения я бы посмотрел документацию Pinterest:

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

Поскольку у вас есть data-pin-do="buttonPin", вы должны указать URL-адрес изображения, используя атрибут media. Это отсутствует из вашего кода.

Кроме того, я бы указал url и description, используя атрибуты. Мне кажется, в вашем коде нет ошибок, но мой подход определенно предотвратит ошибки кодирования URL.

Наконец, я бы указал URL-адреса, которые указывают прямо на страницу/изображение/ресурс без перенаправления.

Подводя итог:

<a href="#" onclick="location.href='https://www.pinterest.com/pin/create/button/'; return false;"
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 script.

Надеюсь, это поможет.

Изменить: (1)

Одностороннее примечание: Pinterest может данные кэша (URL-адреса, описания и т.д.) и показывать нежелательное поведение даже после исправления кода вашей веб-страницы. Я предлагаю после исправления кода протестировать правильное поведение на новых страницах.

Изменить: (2)

(1) Атрибуты AFAIK должны содержать не URL-адрес.

Так что data-pin-url="http://www.example.com/blog/photography-website-redesign" хорошо.

(2) Я бы придерживался виджета data-pin-do="buttonPin", потому что он позволяет вам указать изображение. Кроме того, поскольку все исправлено, любой виджет должен работать должным образом.

(3) Код загрузки script должен быть помещен непосредственно перед закрывающим тегом </body> и иметь параметр defer:

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

(4) Попробуйте еще раз попробовать с оригинальной версией кода, не содержащей атрибутов, с параметрами, добавленными к URL-адресу.

Но на этот раз кодируйте по-разному параметры, так же, как вы их видите, закодированы в примерах документации Pinterest (см. ссылку в верхней части ответа)

Я вставил новые строки для удобочитаемости в URL, их следует опустить

<a data-pin-do="buttonPin"
href="#" onclick="location.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'; return false;"
></a>

В основном в параметрах URL вы выбрали только амперсанды, пробелы с %20 и двойные кавычки.