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">
Related
I've written an html page with the Apple meta to link at my app in the App Store:
<meta name="apple-itunes-app" content="app-id=MY_APP_ID" app-argument="myschema:http://example.com">
The documentation
(https://developer.apple.com/library/content/documentation/AppleApplications/Reference/SafariWebContent/PromotingAppswithAppBanners/PromotingAppswithAppBanners.html)
says that with "app-argument" the app fires application:openURL:sourceApplication:annotation: method and pass as url the app-argument.
The method doesn't been called.
The documentation of the methods say to use new method application:openURL:options:, nothing change.
I read in other answer that this meta works only with the release app version (so isn't debuggable), so I put an hidden file log in the app and log at first line of method to be sure that the problem isn't my code in the method.
I tried in with ios11 and ios11.1
Any suggestion?
The documentation link you included specifically shows "app-argument" should be part of the value given to the content attribute and not an attribute itself. Notice where the quotation marks are:
<meta name="apple-itunes-app" content="app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL">
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'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.
I first manually browse to the below URL:
Mounting injuries won't stop Germany's path to World Cup
Then if view the page source and look for og:image meta tags I find the following:
<meta property="og:image" content="http://l.yimg.com/bt/api/res/1.2/JjwtkhIEdT9nKxLp8p0LFQ--/YXBwaWQ9eW5ld3M7cT04NTt3PTYwMA--/http://media.zenfs.com/en_us/News/Reuters/2013-10-08T122032Z_1_CBRE9970YAZ00_RTROPTP_2_SOCCER-WORLD.JPG"/>
However, if I try to parse the same url programmatically, I get a generic Yahoo stock icon. Here is the code that I am using:
string url = "http://sports.yahoo.com/news/mounting-injuries-wont-stop-germanys-path-world-cup-122032650--sow.html";
WebClient wc = new WebClient();
var doc = new HtmlAgilityPack.HtmlDocument();
string newsPageSource = wc.DownloadString(sourceUri.ToString());
doc.LoadHtml(newsPageSource);
...
(I have removed the rest fro brevity).
If I debug here and inspect the newsPageSource string that contains the content of the target web page and look for og:image tag, its contents are different:
<meta property="og:image" content="http://l.yimg.com/bt/api/res/1.2/81I5U991YW6EEaB2Cjd58g--/YXBwaWQ9eW5ld3M7cT04NTt3PTYwMA--/http://l.yimg.com/os/mit/media/m/social/images/social_default_logo-1481777.png"/>
So not sure what is going on here. I guess, when browsing manually, the original URL is probably redirecting to some other internal URL but when doing this programmatically, the code just grabs the first "snapshot" of page source, without waiting a bit longer and executing any redirects. Can anyone shed light here? Or better yet, how would I extract the real image (2013-10-08T122032Z_1_CBRE9970YAZ00_RTROPTP_2_SOCCER-WORLD.JPG) in this case instead of getting a Yahoo stock icon (social_default_logo-1481777.png).
Somehow Facebook and Google+ are smart enough to extract the correct image when I paste the same link.
Thanks,
Archil