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
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
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.
Related
When someone posts a tweet that only contains a URL, Twitter does a bit of scraping where it grabs some text and an image from the webpage.
Example below:
Is there any way of retrieving this data from the Twitter API? I've not been able to find this data in anything that's returned. Do I need to provide some special parameter maybe? Or is this just something that's not possible?
No. You cannot get that data from the Twitter API.
The data that you're seeing is a Twitter Card.
Here's how it works.
The web developer puts some meta tags in their web page - take a look at the source for https://www.nytimes.com/2017/10/04/well/move/for-your-brains-sake-keep-moving.html and you'll see:
<meta name="twitter:site" value="#nytimes" />
<meta property="twitter:url" content="https://www.nytimes.com/2017/10/04/well/move/for-your-brains-sake-keep-moving.html" />
<meta property="twitter:title" content="For Your Brain’s Sake, Keep Moving" />
<meta property="twitter:description" content="Exercise changes the workings of new brain cells in ways that may protect against dementia, a study in mice suggests." />
<meta property="twitter:image" content="https://static01.nyt.com/images/2017/10/10/well/04physed-brain-photo/04physed-brain-photo-videoSixteenByNineJumbo1600.jpg" />
<meta name="twitter:card" value="summary_large_image" />
When Twitter sees a URL, it fetches it and looks for those tags. If it finds them, it will display a photo and headline on the Twitter website.
If you want to retrieve that data, you need to visit the URL and look for the OpenGraph tags.
I want to share campaign name along with image and description but it only share name
<%= social_share_button_tag(#campaign.project.project_name, :image => #campaign.campaign_image_url) %>
Is there any way to share image on social media?
From the code snippets in the question I'm guessing you're using the social-share-button gem.
Unfortunately, if an attribute you pass in to the social_share_button_tag is used depends on the platform you're trying to share on to, and each of them accept different params than the other. For example, Facebook doesn't allow you to specify images when you try to share that way. You can see the attributes that are passed into each of the platforms in the social-share-button.coffee file.
The best way to get the image to appear is to include meta tags for open graph which includes the title, description, image to use etc for that page. You can see all the relevant Open Graph Markup here. If you render those tags in the header section of your page when its rendered, those images and other information will appear when you share the page. For example:
<meta property="og:title" content="<%= #campaign.project.project_name %>" />
<meta property="og:description" content="<%= #campaign.project.description %>" />
<meta property="og:image" content="<%= #campaign.campaign_image_url %>" />
Additionally, it'll appear even if the user shares the page using the URL straight, rather than going through that plugin. This has become pretty standard now and other platforms such as Slack etc will also use those tags to determine how to display a link on their platform.
When I try to claim my URL I get this error:
The fb:pages tag on the url doesn't contain this page's id. The url has
fb:pages tag but they don't have this page's id. Please work with your
developers / webmaster to add this tag to your website.
Am I supposed to place this meta tag: <meta property="fb:pages" content="130810137587****" /> in the head of my web page's HTML before I can calm my URL? Or in the head of my Instant Article's HTML
?
You place that meta tag in the html for the url/subdomain/path you are trying to claim. Not in the instant articles.
If you're using Wordpress add your meta tag in the header.php file in the <HEAD>...</HEAD> section
You must put the tag between the tags of your website in the index
<Head>
<Meta property = "fb: pages" content = "130810137587 ****" />
</ Head>
You probably also need to update the open graph 'type' property:
<meta property="og:type" content="website" />
As is said here:
https://www.facebook.com/business/help/community/question/?id=10156960334050657
Facebook is trying to read the metadata from your canonical URL, you can check which URL it's using on their debugging tool:
https://developers.facebook.com/tools/debug/
Paste your URL and check the Canonical URL info and its headers, that's the domain you need to update with the meta tag .
In my case, it was pointing to a different URL in my test environment.
Hope this helps
I have the same error.
you need to add the meta tag inside Head tag. of your website.
Why is this happening?
HTML shows:
<meta content='http://www.costumingdiary.com/2015/05/freddie-mercury-robe-francaise.html' itemprop='mainEntityOfPage' itemscope='itemscope'/>
Structured Data Testing Tool output shows:
http://www.costumingdiary.com/2015/05/freddie-mercury-robe-francaise.html#__sid=md3
Update: It looks like it has to do with my breadcrumb list. But still, why is it happening, and is it wrong?
If the URL you want to provide is unique you can use the itemid property.
I was confronted with mainEntityOfPage by the tool after the latest update. And using Google's example I used the following code
<meta itemscope itemprop="mainEntityOfPage" itemType="https://schema.org/WebPage" itemid="https://blog.hompus.nl/2015/12/04/json-on-a-diet-how-to-shrink-your-dtos-part-2-skip-empty-collections/" />
And this show up correctly in the Structured Data Testing Tool results for my blog
I don’t know where the fragment #__sid=md3 is coming from, but as the SDTT had some quirks with BreadcrumbList in the past, it might also be a side effect of this.
But note that if you want to provide a URL as value for the mainEntityOfPage property, you must use a link element instead of a meta element:
<link itemprop="mainEntityOfPage" href="http://www.costumingdiary.com/2015/05/freddie-mercury-robe-francaise.html" />
(See examples for Microdata markup that creates an item value, instead of a URL value, for mainEntityOfPage.)
I am working through the Facebook tutorial for iOS and am having trouble when a get to the final part with Publish Open Graph Story. I have gone through and set everything up as best I understand. When I try to test using the Object Debugger I get "Missing Required Property: The 'og:url' property is required, but not present." Can some one help me and explain this tag and how it should be set?
Thanks for the help.
Have a look at ogp.me they define og:url as :
og:url - The canonical URL of your object that will be used as its
permanent ID in the graph, e.g.,
"http://www.imdb.com/title/tt0117500/".
Basically as jeff sherlock of facebook explains in this post: https://stackoverflow.com/a/7831012/228741
That when you give the url of your action (the one containing meta tags) facebook ignores everything that is on that page (doesn't render it) . But it renders whatever you have given in the og:url.
What i do usually is have my og:url call the same page with the parameters. So facebook renders the same page for me. If you want to render some other page you give the link in the og:url.
This is set as a meta tag in the <head> section.
Example :
<meta property="og:url" content="your url">