Is there a difference between doing the OG metadata in the head of your HTML for say Facebook and Google?
If you add Schema.org markup to the body of your HTML document is it redundant to have OG data in the head? Is there an advantage to one over the other? Schema.org markup does not explicitly use meta property etc.
Technically it's all supplement information but in my opinion it's not redundant.
I think you probably should do both because they are for two different audiences. Your open graph data is for social networks (primarily Facebook) and your schema markup is for search engines. Obviously both are important and I personally think the advantage is with Schema because it's more universal but it really depends on how people are getting to you and that's going to depend on your internal marketing strategy and resources (i.e, you have 500,000 Facebook followers and you do hardcore Facebook ads then focus on Open Graph).
Meta tags are just a place to put information in the head of an HTML or XHTML document. You can include information in a page in a variety of ways.
Here's another post if you haven't seen it. OpenGraph or Schema.org?
Related
Seems to be some degree of ambiguity in FB doco for this.
https://developers.facebook.com/docs/instant-articles/api (under Create new article)
Using the API they say you can submit the html of the page of interest implying full unadulterated site html5 html.
For RSS its a somewhat bespoke html format.
Can anyone confirm the API html needs to be the same as the RSS html.
Using the API they say you can submit the html of the page of interest
No, it doesn’t say that. It says,
html_source [required] – Full HTML markup of article.
That article refers to an Instant Article here (and not just any kind of “article” with full-blown HTML you might have on your website) should be obvious.
Can anyone confirm the API html needs to be the same as the RSS html.
Of course it expects the markup to consist only of what is allowed for Instant Articles. It is not a magic converter that you just drop your web pages into and it’ll do the rest for you.
This is my first attempt with social share buttons on a classic HTML website (not a CMS).
I understand that social meta tags are now the way to go as you have more control on what you are sharing (you can have more control on the title, the picture, the description, the content type etc..).
What I don't get is how to share a specific article only when you have ten articles displayed on the same page.
All the tutorials I read about sharing buttons are dedicated to a whole web page but I would like to share a specific section of the page per button, not the whole page (one page = 10 articles = 10 share buttons).
How would I achieve that?
Thank you.
(Bonus question: are social meta tags shared by FB, twitter and linkedin or are they only dedicated to FB?)
I don't know if you are still struggling with this, but I've just been thinking about a similar-but-different problem, with a one-page site where the content is swapped out dynamically so that it is not possible to change the og: tags in the header.
The solution requires generating individual pages for each specific article that have their own with dedicated og: tags. Then in your page which lists 10 articles, each one has a share button where the link points to the specific article page, e.g. <a href="https://www.facebook.com/sharer/sharer.php?u=http://yoursite.com/article1.html">.
When some clicks the share button, facebook will crawl the target url for og: tags, not the page you are currently on.
In your case the solution is pretty straightforward, as you presumably have individual pages for the articles already. Mine is slightly trickier because I have to generate extra pages which won't be navigated to from my site but exist for facebook to crawl (and to display the right content when people arrive via the social shares).
I'm having trouble understanding canonical URLs with regards to how search engines and Facebook seem to handle them.
My Google maps powered site allows visitors to use social media to request a gig in their country. One of the pages in question can be found at: http://izzy.nogig.in/
When a user clicks on their countries marker it gives them sharing options (twitter/facebook/etc), which when shared will share the URL specifically for that country, eg: izzy.nogig.in/usa? or izzy.nogig.in/spain? etc.
All of these countries in the URL amount to a lot of duplicate content so I use the following to point search engines to the page I want ranked:-
<link rel="canonical" href="http://izzy.nogig.in/_?"/>
For Facebook Likes to count towards each individual country I've set my Open Graph "og:url" as follows, eg:
<meta property="og:url" content="http://izzy.nogig.in/australia?" />
Now when I run a country-specific URL through the Facebook Object Debugger (eg. http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fizzy.nogig.in%2Faustralia%3F) it shows the following:-
Response Code: 206
Fetched URL: http://izzy.nogig.in/australia
Canonical URL: http://izzy.nogig.in/australia
Mismatch og:url and canonical url:
og:url tag in the header is not the same URL as rel='canonical' link in the html.
The above error is what's confusing me. I know they're mismatched, but I thought this was the correct way to do this.
Everything in the debugger looks good to me (correct link, description, image etc for each country), and I can't change the rel="canonical" value to match my og:url as I need it pointing to a single page (country-less) for search engines.
I believe it is all working correctly. Should I just ignore the error from the debugger, or have I set this up incorrectly? I don't want "likes" for each country all disappearing and counting towards the rel="canonical" URL.
Many Thanks - Will
link rel="canonical" will be used by search engines where as og:url will be used by facebook
og:url basically tells the FB scraper "ignore anything on this page, and scrape this url instead"
More for Canonical link element: http://en.wikipedia.org/wiki/Canonical_link_element
Canonical urls refer to page content.
The target (canonical) IRI MUST identify content that is either
duplicative or a superset of the content at the context (referring)
IRI. rfc6596#3
Opengraph url refers to "object".
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/". ogp.me
So they may be different. For example, for multi-language websites, page for each language should have distinct canonical url, because content is different, but usually the same og:url for all languages, because they refer to the same object described in multiple languages.
On one of the sites I've developed I serve the page in more than one language, and provide links to allow the user to switch between one language and the other. So, my rel="canonical" will have the URL http://www.example.com/, whereas, within the code I update the og:url so that it is either http://en.example.com/ or http://fr.example.com/. That way when the user shares the page on Facebook, everything will appear on Facebook in the language they were viewing the page, which makes sense since most of the visitor's friends will likely speak the same language.
Regards.
I see no reason why og:url and canonical should be different. In both circumstances you're saying to either the search engine or Facebook what page you want to index or be displayed.
Twitter has a beautiful share API. If I want to customize text, I just include it in the URL I'm linking to:
<a href="https://twitter.com/share"
class="twitter-share-button"
data-text="whoa, check out this SUPER-EASY CUSTOMIZED TWEET TEXT!"
data-via="foo">
Tweet
</a>
My question is whether there is a way to do this with Facebook, Google Plus, and LinkedIn.
I want to be able to do this without having to put og meta tags in the link target. Basically instead of the link target having knowledge of the message, I want the share button itself to have that knowledge.
Thanks
It is a good idea to populate your pages with metadata to describe them to non-human systems including search engines, social networks, screen readers etc. For Google+, you have your choice methods: Schema.org metadata, OpenGraph, or simple meta names/descriptions. You can read more about how to populate snippets from your site at https://developers.google.com/+/plugins/snippet/
Our websites article backend does not allow access to anything above </head> which prevents our writers from specifying shareable content with use of the facebook meta tags. Anyone know an alternative route of specifying the article image, title, and description of a shared article without accessing the <head>? My search yielded no results, my apologies if this has been answered.
Can you give your writers a way to create meta tags in other separate pages, outside of your article backend?
The Facebook Open Graph meta tag content does not need to reside within the same page that the like button is rendered on. The shareable content (images/titles/descriptions) will be pulled from the meta content of the page referenced in the URL parameter of the Facebook button. So you could create separate pages corresponding to each of your articles that serve simply to supply the meta content for the Facebook news story post. The Facebook news story posts would still link back to your articles as long as the meta "og:url" in the placeholder file is set to your article url.