apply "nopin" to "og:image"

Question

I'm not a coder but I was able to build my site from nonstop searching for "how to do xxxx" on this site. Thank you all so much for the posts and info!

I want to know how I can apply the "nopin" tag for pinterest to my "og:image"

Here is a link to a sample page http://jamesngart.com/harvester.html

I made a horizontally cropped image of the illustration to be used as the og:image for facebook and twitter links, but I dont want pinterest to pick it up. I used the nopin tag for some images that I dont want pinned and it worked, but I cant seem to apply it to the OG:image.

pin interest is also not picking up any of the data-pin info i enter, I was thinking to add "this is a cropped image please pin the others" but nothing works. Here is my code:

    <meta property="og:image" content="http://jamesngart.com/img/OG-Harvester.jpg" nopin="nopin" />

Thank you!

James

Answer 1

Don't add the nopin attribute to the facebook open (og) graph metatag.

Instead create a new meta tag and add it below or above the opengraph tag. In the following example - pinning is disabled for the whole page:

<meta property="og:image" content="jamesngart.com/img/OG-Harvester.jpg" /> <meta name="pinterest" content="nopin" />

If you want to disable pinning per image you have to add the nopin attribute to the image (IMG) tag:

<img src="jamesngart.com/img/OG-Harvester.jpg" nopin="nopin" />

Read more about pinterest data-attributes and metatags in this article at csstricks

Answer 2

Reading various articles about this on the wide web, there seems to be very few guides for specific images, but this

http://allyssabarnes.com/2013/07/22/how-to-block-your-images-from-being-pinned/

link shows:

<meta name="pinterest" content="nopin" description="Enter your new description here" />

and

<img src="your-image.png" nopin="nopin">

Which leads me to establish that due to Opengraph being a meta feature that you would need to do something like:

 <meta property="og:image" content="jamesngart.com/img/OG-Harvester.jpg" nopin="nopin" />

I would also hope you'd be using https://developers.pinterest.com/docs/getting-started/introduction/ for reference as well.

See also https://stackoverflow.com/a/10421287/3536236

Which actually states that (as of 2012) Pinterest does not directly reference OG:images in its processing.

Overall it's a little questionable why you would want to share an image on OpenGraph, (ie for Facebook and Google searches) that would then not be available for Pinterest specifically.