3

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

jamesngart
  • 47
  • 5
  • oh sorry i didnt include my code. – jamesngart Oct 31 '15 at 13:06
  • 1
    Hi James, It would be better if you can **edit** your question and insert your code with the code tool , makes everything easier to read and understand rather than code in comments. Cheers – Martin Oct 31 '15 at 13:12
  • It may be worth qualifying that `OG:image` only shows in facebook as a thumbnail so you don't need your whole gallery in the `OG@image` meta tag, instead just have one or two of your best images, you don't mind if they appear on Pinterest.... (also, you have a wayward `b` in your HTML in your linked page) – Martin Oct 31 '15 at 15:52
  • Is it an oversight that you use a `nopin` attribute (invalid) in the question, and a `data-pin-nopin` attribute (valid) in the comment? – unor Oct 31 '15 at 16:26
  • oh yes must have fat-fingers the extra "b" thanks haha. @unor oh ya i tried both actually, both didn't work :/ – jamesngart Oct 31 '15 at 16:38
  • Hey.. Were you able to find any solution that works? – Sasank Mukkamala Mar 03 '16 at 12:15
  • Hey no it seems you cant make the og:image unpin-able. – jamesngart Mar 06 '16 at 16:52

2 Answers2

0

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.

Community
  • 1
  • 1
Martin
  • 22,212
  • 11
  • 70
  • 132
  • 1
    Thank you for the reply! My site is all about my artwork so the presentation is very important at every stage where the art appears. So i have cropped my og image to fit facebook standards, but its actually not a full image, more like a banner so i dont want it pinned as a "full" repersentation of my work. if you go to jamesngart.com/harvester.html and try the pin button you will see a weird horizontal image which is the og:image I've actually tried what you suggested but it didn't work. the tags i apply into the is not working :/ – jamesngart Oct 31 '15 at 15:32
0

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

Tobias Beuving
  • 630
  • 6
  • 18
  • 1
    Thanks for the reply. That doesnt work for me though because I only want to disable pinning of the OG:Image and not the whole page. The nopin="nopin" works fine for images inside the page, but not for the og:image. is there a way to apply the "nopin" to the og image? – jamesngart Oct 31 '15 at 15:27
  • No, there isn't a nopin attribute in the opengraph specification: See for yourself http://ogp.me/ In order to make it less atractive to download the og:image you might add a watermark, or present a shitty resolution version of it or something like that. – Tobias Beuving Oct 31 '15 at 15:44
  • 1
    Aw man. so you are saying no matter what i do i cant block the pinning of OG image? Either i use the meta name=pinterest no pin and block the whole page, or the og:image will be available. mm okay its not that I can't live with it, but figured i will try fixing it if i could. thanks for your help! – jamesngart Oct 31 '15 at 16:17
  • I am glad I could help! – Tobias Beuving Oct 31 '15 at 16:23