htmlfacebook-opengraphhtml-meta

apply "nopin" to "og:image"


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 don't want Pinterest to pick it up. I used the nopin tag for some images that I don't want pinned and it worked, but I cant seem to apply it to the OG:image.

Pinterest 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" />

Solution

  • 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