I have seen conflicting information on how to best implement Open Graph namespaces. Specifically, the Open Graph website uses a few different methods, and the Facebook Open Graph examples use other methods.
Open Graph website example (using HTML prefix attribute):
<html prefix="og: http://ogp.me/ns#">
Open Graph website source code (using HTML XMLNS attribute):
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#">
Facebook Open Graph documentation (using HEAD prefix attribute):
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
Facebook Open Graph documentation #2 (using HTML XMLNS attribute):
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#"
xmlns:fb="https://www.facebook.com/2008/fbml">
What is the recommended method or does it not even matter?
They are all equivalent and will all work.
Use prefix as it is the new recommended way and is fewer characters.
I'll get all our documentation updated to prefix.
I tried following #Paul Tarjan's answer of using prefix in the head. However I got some Internet Explorer 8 issue. So in the end I still use the xmlns way for fb namespace:
<!DOCTYPE HTML>
<html xmlns:fb="http://ogp.me/ns/fb#">
<head prefix="og: http://ogp.me/ns# object: http://ogp.me/ns/object#">
It doesn't even matter. RDFa Core Initial Context recognizes og as a widely used vocabulary prefix:
RDFa users can use these prefixes without having the obligation of defining the prefixes in the HTML code. The same list of prefixes have also been defined for JSON-LD as a JSON-LD Context at the URI http://www.w3.org/2013/json-ld-context/rdfa11; JSON-LD users can use the #context key with that URI as a shorthand to use the same prefixes.
Emphasis added for clarity.
Therefore, you do not need to add a namespace to your HTML documents. More information here.
<html xmlns="http://www.w3.org/1999/xhtml" prefix="og: http://ogp.me/ns# fb:
http://www.facebook.com/2008/fbml"> <head>
There is the best way to validate.
prefix/xmlns attribute is useful to define short-hand. rdf is from xml lineage so xmlns notation should be expected to work independent of doctype detail. rdfa extends html with attributes including prefix as given by http://www.w3.org/TR/rdfa-in-html/#extensions-to-the-html5-syntax
However, this requires adhering to http://dev.w3.org/html5/rdfa/rdfa-module.html
Also, the tool support for rel="profile" as mentioned therein is as yet awaited. Till then, the choice is between using older doctypes, or manually placing rdf: for validation purpose or wait for validator & such tools to catch-up. The right place to make declaration is any element opening tag which is ancestor of wherever the short-hand notation will be used. Specifically for the case of og prefix, its predefined by the initial context of RDFa Core http://www.w3.org/2011/rdfa-context/rdfa-1.1.html so skipping it altogether for newer doctypes is alright. And specifically for html5 the RDFa initial context http://www.w3.org/2011/rdfa-context/html-rdfa-1.1 is loaded only after the RDFa initial context mentioned earlier.
Related
I am wondering if you can use https in HTML doctype declarations? For example, w3.org lists different declarations, all of which have http and not https
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
I have not seen a doctype declaration with https (although, the sample size is small for me). Is there any reason why this remains as http? I am assuming the URI gets mapped to https anyways so it's just a cosmetic thing, but why is this still http?
I'd recommend you use HTML5's <!DOCTYPE html> (listed at the w3.org page you linked), but the older declarations are historical curiosities that don't present a security problem. Browsers don't use that http://... string that appears in the DOCTYPE tag as a URL to load; it's just a way to declare what standard the author intended to follow.
I have an issue with facebook, longer period of time the meta tags are not working on my website. The title is showing perfectly on facebook, however the image doesn't. Also, when I go through fb debugger, it says: Your page has meta tags in the body instead of the head. This may be because your HTML was malformed and they fell lower in the parse tree.
Please fix this in order for the tags to be usable.
My website is: http://www.popularno.mk/, but this error message also comes up at every single post (example: http://www.popularno.mk/2013/07/27/vozila-grcija/)
I'd be very grateful for a solution.
Regards,
There is a Byte-Order Mark that seems to be messing things up for the debugger.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><body>
<p>
You may want to deal with removing that from your code before proceeding further.
I have the following output at https://developers.facebook.com/tools/debug
I added the locale metatag, because I had a lot of Extraneous Property errors. But that does not solve it.
Extraneous Property: Objects of this type do not allow properties named og:latitude
Extraneous Property: Objects of this type do not allow properties named og:longitude.
Extraneous Property: Objects of this type do not allow properties named og:region.
Extraneous Property: Objects of this type do not allow properties named og:street-address.
Extraneous Property: Objects of this type do not allow properties named og:locality.
Extraneous Property: Objects of this type do not allow properties named og:postal-code.
Extraneous Property: Objects of this type do not allow properties named og:country-name.
Extraneous Property: Objects of this type do not allow properties named og:email.
Extraneous Property: Objects of this type do not allow properties named og:phone_number.
Extraneous Property: Objects of this type do not allow properties named og:fax_number.
I also have the namespaces in the <html> tag:
<html
xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://ogp.me/ns/fb#">
I have also tried xmlns:fb="https://www.facebook.com/2008/fbml"
as suggested here: https://developers.facebook.com/docs/opengraph/
My doctype is <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd">
I have checked this thread Facebook Open Graph locale for Australia and this Object Debugger gives me Extraneous Property And Inferred Property error on opg
But I still have the Extraneous Property error
Edit: I used this documentation: https://developers.facebook.com/docs/opengraph/#extra-data When I browse to the namespace definition of open graph, I don't see the latitude and longtitude options, but Facebook's documentation does recommend it. But the debugger of Facebook does not accepts it. I am missing something here...
Edit2: I have:
<meta property="og:type" content="company" />
but Facebook says: https://graph.facebook.com/10150616664862786
type: website
???
Why does Facebook see a different type? And how do I fix this?
This is because even though you have specified og:type=company, the linter is showing that your type is website, and the properties you are trying to use are not applicable for a website object type. There is an accepted answer for this here. Your real problem is that the linter is reading og:type incorrectly.
Facebook's documentation is out of date, (big surprise there.) The only allowed og:types can be found here, none of which are company.
You should also remember to add namespace declaration to the head and body tags of your page.
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US" xmlns:fb="https://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns# YOUR_NAMESPACE: http://ogp.me/ns/apps/YOUR_NAMESPACE#">
<meta property="fb:app_id" content="YOUR_APP_ID" />
<meta ...
Obviously, replace YOUR_NAMESPACE and YOUR_APP_ID with your app's settings.
It might a bug in documentation or just me getting it wrong, but in any case I think it is confusing to see several different definitions of the same fb: namespace:
xmlns:fb="http://www.facebook.com/2008/fbml"
Given as example here.
xmlns:fb="http://ogp.me/ns/fb#"
Shows up in the generated XFBML code here.
So which one should the developers use?
fb namespace is like your application name.
for example if your application name your testapp your canvas url is going to be
apps.facebook.com/testapp/
hope that helps
Edit : In developers screen there is a namespace field my info is about it.
Just asked a facebook engineer (at the mobile hackathon today).
Advise was use the second one:
xmlns:fb="http://ogp.me/ns/fb#" Shows up in the generated XFBML code here: http://developers.facebook.com/docs/reference/plugins/like/
As the first one is for fbml which is deprecated.
(If I am wrong this info came directly from a facebook engineer).
I believe you should now be using
<html xmlns:fb="http://ogp.me/ns/fb#">
This is what is used in the sample code of the xfbml tab of their beta plugins so I presume this is the latest. I've never seen it used prior to your post implying it is newer then the 2008 facebook namespace. See This
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
both are related about open graph protocol
My understanding was that the xmlns attribute allowed for adding
namespace information for tags and for attributes
As per Open Graph's documentation at http://developers.facebook.com/docs/opengraph , we can specify our own og:types.
If your object does not fit into one of the types above, you can
specify your own type. This will be represented as type other on
Facebook. We will monitor the most commonly used types and graduate
them to fully supported og:types. If you are specifying your own type
we recommend that you use your own namespace.
Running the linter on a page on my website
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fznood.com%2Fachkar_tools returns the following errors:
Object at URL 'http://znood.com/places/dcGPdl0Psuc' is invalid because
the configured 'og:type' of 'znoodcom:store' is invalid
On my other page wich og:type is "city", if you check the linter up top, the og:type is set to "website" (which is bad!)
http://developers.facebook.com/tools/debug/og/object?q=znood.com%2Fcities%2FbIYWj4uRhCc
Can someone clarify how to set up custom types that Open Graph can pick? Also, why is the "city" type being replaced with "website" on my page?
Try visiting the Open Graph tool inside your app and declare your Object Type.
https://developers.facebook.com/docs/beta/opengraph/define-objects/
Are you passing in your namespace links in your head tag? Like:
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# yourns: http://ogp.me/ns/fb/yourns#`">
where yourns is your namespace.