Pinterest conflicts

[michaeltieso]

Describe the bug Causes Pinterest to load thumbnails from Algolia instead of the blog post.

To Reproduce Steps to reproduce the behavior:

1. Enable plugin.
2. Create pin on Pinterest.

Expected behavior Should be loading images from the blog post.

Screenshots

Desktop (please complete the following information):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

[richaber]

Howdy @michaeltieso,

With the caveat that I can't provide Pinterest specific support...

I visited https://thetravellingmom.ca/skiing-in-western-canada/

I clicked the "Pinterest" icon and saved to a Pinterest "board".

I'm not really a Pinterest user, but it appears that worked as expected.

I'm afraid I need more details about the issue you are describing, if I am to determine whethre the issue originates within the WP Search with Algolia plugin itself.

Can you provide the exact steps to recreate the issue?

[richaber]

Interesting side note, Pinterest appeared to scrape the title used on the pin from Algolia instead of from the article itself. 🤔

[richaber]

Yet, when I visit that exact same pin today, the article headline is displayed on the pin...

[richaber]

Potentially related Pinterest issues:

https://wordpress.org/support/topic/problem-with-algolia-injecting-text-into-pinterest-pins/

https://wordpress.org/support/topic/algolia-injecting-title-into-pinterest-pin/

[richaber]

It appears in my testing that this issue presents when using autocomplete.

My current hypothesis is that Pinterest's "scraper" has difficulty parsing past the underscore.js style templates in the header.

I am going to open a PR that moves the autocomplete underscore.js style templates and the config into the footer, which I think will resolve the Pinterest issues that are being reported.

[richaber]

To be clear, WP Search with Algolia does not inject any text or images into Pinterest pins.

Some users have reported the text "Hosted Site Search & Discovery for Companies of All Sizes" being used for the Pin title, however, the plugin does not contain that text.

When a "pin" is saved, Pinterest "scrapes" the URL, and parses the markup, Open Graph, and other meta tags that it finds, to determine what text and image to use for the pin.

WP Search with Algolia does not modify any Open Graph or other meta tags in the page.

My testing seems to indicate that this issue may be related specifically to the autocomplete implementation.

When autocomplete is enabled, the plugin adds some underscore.js style templating into the header of the page.

It appears that Pinterest has difficulty parsing past the autocomplete template in the head.

I believe that moving the JS, autocomplete underscore.js template, and config, to the footer of the page should alleviate issues that WP Search with Algolia / Pinterest users are reporting.

[richaber]

I believe the fix/101-pinterest-incompatibility branch should resolve Pinterest issues for most users, however, I would like to perform a little more testing before release.

[richaber]

Testing from my own public facing blog with version 1.4.0:

Testing from my own public facing blog with version 1.5.0-dev:

[richaber]

Verified that autocomplete functions as expected in 1.5.0-dev.

Verified that instantsearch functions as expected in 1.5.0-dev.

[richaber]

Worth noting/mentioning that moving the scripts, autocomplete template, and config to the footer might make the algolia_load_scripts_in_footer hook unnecessary. It was introduced in 1.3.0 as a way for devs to load the Algolia JS libs in the footer for performance reasons. I've defaulted it to true in 1.5.0-dev as part of moving everything into the footer that the Pinterest scraper might choke on.

[kakashigr]

Apparently if you remove this code from autocomplete.php, everything works correctly:

jQuery(document).on("click", ".algolia-powered-by-link", function (e) { e.preventDefault(); window.location = "https://www.algolia.com/?utm_source=WordPress&utm_medium=extension&utm_content=" + window.location.hostname + "&utm_campaign=poweredby"; });

[richaber]

Thank you for the additional information @kakashigr

I'm not sure why Pinterest's scraper follows the algolia-powered-by-link offsite and pulls data from the Algolia domain. That is clearly an issue with Pinterest that we can't control.

However, moving the autocomplete template output that contains that link to the footer, appears to resolve the issue in my testing.

[richaber]

Pinterest issues should be resolved by WP Search with Algolia version 1.5.0.