I installed the official facebook wordpress plugin, it helps to automatically add the following lines of code to my page:
<meta property="http://ogp.me/ns#locale" content="en_US" />
<meta property="http://ogp.me/ns#site_name" content="XXX" />
<meta property="http://ogp.me/ns#type" content="article" />
<meta property="http://ogp.me/ns#title" content="Contact" />
<meta property="http://ogp.me/ns#url" content="http://XXX.com" />
<meta property="http://ogp.me/ns/fb#app_id" content="XXX" />
Now I want to add a LIKE BOX to my page,
http://developers.facebook.com/docs/reference/plugins/like-box/
When I choose 'XFBML' code, it showed:
"Add an XML namespace to the tag of your document. This is necessary for XFBML to work in earlier versions of Internet Explorer."
<html xmlns:fb="http://ogp.me/ns/fb#">
My question is that do I still need to add this one line of code considering I already got the "meta property" added above? If I add this, would it conflict with "meta property"??
Also which versions of IE need that line of code?
Thanks!!
<html xmlns:fb="http://ogp.me/ns/fb#">
My question is that do I still need to add this one line of code considering I already got the "meta property" added above?
You would still need that, because it has nothing to do with Open Graph meta elements (which just provide some info about the document for “outside” parties like Facebook’s scraper), but with how the browser treats “unknown” tags in your document (and <fb:like-box> is such an unknown tag, because it does not exist in HTML).
If I add this, would it conflict with "meta property"??
No, there is no potential for any sort of “conflict” here.
Also which versions of IE need that line of code?
I don’t know exactly, but I’d guess at least 6 & 7.
If for some reason (CMS, whatever) you can not add this to the HTML element – then you can just use the HTML5 version of the plugin code instead – that uses just a normal DIV element, and that is not “unknown” to any browser. (Your document’s doctype does not have to be the HTML5 one for this to work.)
Related
Okay, I can not figure this out for the life of me. I created a new site, and wanted to add the open graph meta tags like on my old site (which is working fine). When I added these to my new site and tested them in facebook debugger, it says that they are not present. I get this back when I test it:
Inferred Property The 'og:url' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:title' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:description' property should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
Also, it is not finding the image even though it is there as well. Here is the code from my site as follows:
<meta property="fb:admins" content="100002683693547" />
<meta property="og:title" content="JDerry Art" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.jderry.com/2015" />
<meta property="og:image" content="http://www.jderry.com/2015/images/link.jpg" />
<meta property="og:description" content="Art and Illustration by J. Derry" />
<meta property="og:site_name" content="JDerry Art" />
my new site URL is: http://www.jderry.com/2015/
I have tried all suggestions for similar issues on here and other forums, as well as tried moving the order of the tags to no avail...
Any and all help will be greatly appreciated as this is starting to drive me nuts as there appears to be no definite answer and all suggested solutions yield the same problem. Thanks in advance.
P.S. My old site was xhtml and my new site is HTML5, not sure if that has any influence on this issue?
When you are using Open Graph Object Debugger . make sure you check the time last scraped and make sure its up to date with the changes on your website.
you can click on fetch new scrape information , to get the new data. and right now your open graph tags are working fine .
These are the raw tags that we found
Meta Tag <meta property="fb:admins" content="100002683693547" />
Meta Tag <meta property="og:title" content="JDerry Art" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:url" content="http://www.jderry.com/2015" />
Meta Tag <meta property="og:image" content="http://www.jderry.com/2015/images/link.jpg" />
Meta Tag <meta property="og:description" content="Art and Illustration by J. Derry" />
Meta Tag <meta property="og:site_name" content="JDerry Art" />
I was having the same problem, and what was causing it for me was that the content of og:url was just mywebsite.com, and not http://www.mywebsite.com.
The problem for me was that I had ipv6 enabled for my site and I didn't had a proper configuration in my web server settings.
HEY GUYS HERE'S MY ANSWER, i HOPE IT WORKS FOR YOU AS WELL: I try'ed every sugestion I can get my hands on, and what worked for me was this:
go to: https://developers.facebook.com/tools/debug/og/object/
Once you are there, paste the URL from the web page you wish to share in the box, and hit the button "retrieve information from the new extraction"
After you do this, it will appear some information, WHAT YOU ARE GOING TO NEED from this information, is the "og:update_time" element, on the right side of this element you will have a number, you are going to need to add this element along with this number to your meta information, someting like this:
meta property="og:updated_time" content="1496821331"
every number for every page is UNIQUE, but I find that if you put the same number in more than one web page it still works, but you may wanna put the specific number for each web page you are going to need (NOTE: in my experience,
you DONT need to have the image in the same directory as the meta is, actually, I use an image from google images and work out just fine!)
this is an example of the og:updated_time
I hope this can help you guys.
How I fixed this issue:
Turns out that the facebook scraper was timing out before it could get the content. You can check if this is happening to you with this tool. It will give a red error message if it is indeed timing out.
I'm making a wordpress site so I fixed this with the "Super Cache" plugin, which caches the content so that the facebook scraper can load it fast enough to not timeout. You still have to scrape multiple times (up to 4) with the sharing debugger for all the content to come through and work because the image loading is asynchronous.
I have a website where I'd like to have a facebook like button, with the button being customized so it shows a specific picture, description, etc.
All of that is done and it works, however I used regular img, description, title meta tags instead of the og tags we are supposed to use.
Facebook complains when I lint the website with http://developers.facebook.com/tools/debug.
Here are some error messages:
Inferred Property: The 'og:url' property
should be explicitly provided, even if a value can be inferred from other tags.
Inferred Property: The 'og:title' property
should be explicitly provided, even if a value can be inferred from other tags.
and etc for all of the other tags...
Here is the problem: When I did add and configure the tags as shown in examples provided on the web, not only did it not work, I recieved another error:
Meta Tags In Body: You have tags ouside of your . This is either because
your was malformed and they fell lower in the parse tree, or you accidentally
put your Open Graph tags in the wrong place. Either way you need to fix it
before the tags are usable.
Here is my html config:
<html lang="en" xmlns:fb="http://www.facebook.com/2008/fbml"
xmlns:og="http://opengraphprotocol.org/schema/">
...
<meta property="og:url" content="..." />
<meta property="og:site_name" content="..." />
<meta property="og:type" content="..." />
<meta property="og:title" content="..." />
<meta property="og:image" content="..." />
<meta property="og:description" content="..." />
<meta property="fb:app_id" content="..." />
...
NOTE: My fb-root tag and the other fb provided like button code is at the very bottom of the page along with the other script's.
NOTE: I did zero configuration on open graph's website, or on facebook's open graph section of my app, in facebook developers, however I don't think that this is an issue because in fb's instructions, they said to add a like button only copying/pasting code is needed and no actual open graph configuration was needed.
Here is the site URL: http://darehut.com
NOTE: My tag code is actually inside the head element in my source, but for whatever reason, they get rendered outside!
Thanks for your help!!
Meta Tags In Body: You have tags ouside of your . This is either because
your was malformed and they fell lower in the parse tree, or you accidentally
put your Open Graph tags in the wrong place.
That message is missing the word <head> before the first period.
What it means, is pretty simple: Either you put your OG meta tags outside of your <head> element, or your HTML is malformed.
And next time you ask a question like this, please include the URL to the document you’re having trouble with – that way, we can have a look at it ourself and we’ll be able to answer more specific.
I installed some meta tags in my wordpress blog (header file), example:
<meta property="fb:app_id" content="340807095947367" />
<meta property="og:site_name" content="My Website" />
<meta property="og:description" content="Description HERE" />
<meta property="og:type" content="website" />
<meta property="og:image" content="http://www.mywebsite.com/img/tinypic.png" />
And this are working fine with all wordpress posts and pages but it fails with home (main page). Seems that Facebook can't find these meta tags in my home, but they are in source code.
I really don't know what is causing this error, so i can't fix it.
With the facebook open graph debugger the home URL seams to return 503 bad response most of the times, but occationlly 200 OK. If you want a handy way to "emulate" the Facebook fetch bot yourself and fiddle around check out Facebook isn't crawling my site
The warning about "Inferred Property" is because your home URL does not explicitly provide og:url and og:title tags. Add something like this to the home URL document:
<meta property="og:title" content="Porto de Mós Online - O Portal do seu Concelho" />
<meta property="og:url" content="http://www.portodemosonline.com/" />
Also the home URL seams to have some kind of broken BOM header (0x09 0xef 0xbb 0xbf) before the doctype that might confuse. 0x09 is tab so i would suspect that some PHP file is outputting this somehow, maybe a junk tab outside the <?php ?> tags.
To the point above, I wanted to add a little specificity. At the top of the tags in the header.php file, (wordpress) my template file ALSO had ?>. I removed the "!DOCTYPE" and all is indeed well.
I would hat for someone to use a plugin who doesn't need to and can still get all the benefits of the XFBML/HTML5 attributes this code can offer.
Thanks for staying with it and posting this. I know it's not a discussion, but there's a little detail in there. ;)
I would suggest that rather than adding custom open graph parameters, try to use this plugin:
http://wordpress.org/extend/plugins/wp-facebook-open-graph-protocol/
This plugin is well and works fine. I am using this for my blog.
Problems like this are the reason I wrote a plugin to handle it -- Complete Open Graph. I've tried other plugins past, and found them to make some strange assumptions about content I want to use for Open Graph, or just be waaaaaay too much code bloat for what I want to use it for. I think mine is the perfect balance of works-out-of-the-box, and yet flexible enough for developers to filter as they need. You should check it out!
https://wordpress.org/plugins/complete-open-graph/
Is there any way to get facebook's crappy Open Graph meta tags to validate if my doctype is <!DOCTYPE html> (HTML5)?
Other than facebook's Open Graph meta tags, my document validates perfectly.
I really don't want to use <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML+RDFa 1.0//EN" "http://www.w3.org/MarkUp/DTD/xhtml-rdfa-1.dtd"> as that creates a whole new set of problems.
Here is an example of one of the validation errors in question...
Error Line 11, Column 47: Attribute property not allowed on element meta at this point.
<meta property="og:type" content="website" />
Any help would be appreciated... I have been searching off and on for days to no avail.
For HTML5, add this to your html element like described on ogp.me and keep your og: prefixed properties:
<!doctype html>
<html prefix="og: http://ogp.me/ns#">
<head>
<meta property="og:type" content="website" />
...
For XHTML (like OP's question), use the name attribute instead of property attribute. Facebook lint will throw a warning, but the meta value will still be recognized and parsed.
<meta name="og:title" content="Hello Facebook" />
Yes. To validate as HTML5, add the prefix attribute from the Open Graph docs:
<!DOCTYPE html>
<html prefix="og: http://ogp.me/ns#">
<head>
<title>Valid HTML5!</title>
<meta charset="utf-8"/>
<meta property="og:title" content="">
</head>
<body></body>
</html>
Copy and paste the above to the w3 validator to check.
It is production ready – Apple uses this method on apple.com.
The short answer is no, not at this time. All other answers are workarounds, hacks, or just plain crazy. The only long-term solution is that Facebook needs to create an alternate syntax that is valid HTML5.
To those recommending targeting Facebook by the "facebookexternalhit" User Agent, you have to remember that other companies are following Facebook's lead with these tags. For example, Google+ will fall back to the OpenGraph tags if their preferred Schema.org markup isn't present. Since most sites aren’t using Schema.org attributes (especially if they’re spending the time to use OpenGraph correctly), you can easily miss out on enhancing your snippets on sites like Google+ by following this advice.
With the ubiquity of Facebook, it really isn't a good solution to target them directly--even if their choice of implementation is problematic for developers. When looking for solutions on a site like Stack Overflow, you always have to remember that there can be unforeseen consequences to these methods.
For our main sites, we've stuck with XHTML+RDFa for validation sake, and it's worked well enough. I'm hoping that as HTML5's usage grows, the Facebook team will start accepting a valid format for this metadata.
As for why we care about validation:
We've found that validation, when possible, helps to alert us to errors in our pages by not teaching us to ignore them. Since we all use validation extensions in our browsers, we know instantly if there's a validation error (or warning) on a page, and can investigate whether it's possible to eliminate it (which 99+% of the time it is). This saves us time dealing with restrictive implementations of the specs, especially on fringe and mobile platforms nowadays. We've seen a huge reduction in odd bugs because we're aware of our pages being valid and know that what's going on in the browser doesn’t have to do with invalid markup that a particular UA might not interpret as expected.
These meta tags are only required when facebook scans the page for these tags.
<?
if(eregi("facebookexternalhit", $_SERVER['HTTP_USER_AGENT'])){
echo '<meta property="og:type" content=xxxxxxxxxxxxx';
// continue with the other open graph tags
}
?>
The said tags will only be present when facebook needs them - this method with PHP removes them completely for all other instances including W3C validation.
Many of the answers here have become outdated. Please don't snoop for headers or write via JavaScript (since the processors might not evaluate the JS).
The W3C Recommendations (Extensions to HTML5) called RDFa 1.1 and RDFa Lite 1.1 (see http://www.w3.org/TR/rdfa-lite/ and http://www.w3.org/TR/rdfa-primer/ ) have made the "property" attribute valid and conforming. In the mean time (since the older answers here) the validator http://validator.w3.org/check recognizes the attribute as valid. In addition, the Open Graph Protocol documentation, http://ogp.me/ , has been updated to reflect RDFa 1.1 (it uses the "prefix" attribute).
The W3C work has been done with input from OpenGraph and schema.org among others to resolve the kind of issue raise by this question.
In short, make sure your OG tags conform to RDFa and you are golden.
More than a Year has passed and the best solution we've got is to wrap the meta tags in some sort of server-side verification.
In PHP I did:
<?php if (stristr($_SERVER["HTTP_USER_AGENT"],'facebook') !== false) { ?>
<meta property="og:title" content="Title of the page" />
<meta property="og:url" content="http://www.example.com/" />
<meta property="og:type" content="website" />
<meta property="fb:admins" content="123456789" />
<meta property="og:image" content="http://www.example.com/images/thumb.jpg" />
<?php } ?>
It really works for Facebook. But I really don't like this idea!
One recent solution is to register a prefix in the html or head tag:
<html prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
or
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
taken from here - sorry, page is in german...
Bad solution for the meta tags. If you wrap those in Javascript then the Facebook Linter won't find them. That's the same as not putting them in at all.
Wrapping like buttons and such in script works to help validate against XHTML 1.0 but not HTML5.
In JSP:
<%
String ua=request.getHeader("user-agent").toLowerCase();
if(ua.matches(".*facebookexternalhit.*")){
}
%>
<meta property="og:image" content="images/facebook.jpg" />
...
<%
}
%>
Or:
<c:set var="ua" value="${header['User-Agent']}" scope="page"/>
<c:if test="${ua.matches('.*facebookexternalhit.*')}">
<meta property="og:image" content="images/facebook.jpg" />
...
</c:if>
Well, Visual Studio 2011 tells me that the "property" attribute is invalid. However, the W3C seems to be a little more lenient:
http://validator.w3.org/check?uri=http%3A%2F%2Fpacificfoods.com%2F
You'll notice that that I added Open Graph tags per Facebook's recommendation to that site, and it does not break the W3C validator, which I consider to be authoritative.
Consulting the official W3C HTML5 specification for the meta tag, it is clear that the use of the "property" attribute (in lieu of the "name", "http-equiv", "charset", or "itemprop" attributes) is not valid. However, their validator validates it (???). I have no explanation for this discrepancy.
I would be inclined to say don't worry about validation, I don't believe having invalid mark up will hurt your search engine ranking. e.g. googles technical recommendations do not mention standards. http://www.google.com/support/webmasters/bin/answer.py?answer=35769#2 . Html5 allows you provide more information to search engines which they can then use, but I can't see them down ranking based on not validating.
However if you feel it helps you to validate you can use
<script>document.write('<meta property="og:type" content="website" />')</script>
to have these tags present and have a html file that will pass validators.
Although it will cut off non-Javascript users, I've used this
<script type="text/javascript">
//<![CDATA[
document.write('<fb:like href="" send="false" layout="button_count" width="100" show_faces="true" font=""></fb:like>')
//]]>
</script>
and it validated perfectly. It shows and works fine with Firefox, Opera, IE, Chrome, Safari on Windows, and with Firefox, Opera, Safari on Mac.
I'm about to introduce the Open Graph protocol to an existing HTML5 Web application and I'd like to include the necessary RDFa data without introducing any unnecessary crud.
I've looked at the HTML+RDFa 1.1 draft and comparing it with Facebook's Open Graph protocol documentation, I just need to set the lang attribute on the html element and it's HTML5 ready:
<html lang="en">
<head xmlns:og="http://opengraphprotocol.org/schema/">
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
...
Initially, I grew confused about RDFa support in HTML5 with so many sources claiming it cannot be done in a valid manner, until I finally landed on the draft. I'm no expert on the matters at hand, so I'd appreciate if someone could take a look at this and also comment about the support the draft enjoys in today's browsers.
The W3C validator moans about every
<meta property="whatever" content...
demanding that the property shall be
<meta name="whatever ...
instead, right? If facebook is, what you mostly care about, I am happy to tell, it tolerates the latter form, so just go for it:
<meta name="og:title" content="My nice picture"/>
<meta name="og:type" content="article"/>
<meta name="og:url" content="http://foobar123.com/test/simple.php"/>
When testing with FB: Beware, that FB caches page parsings (globally, facebook-side, hard reload won't help) so make sure to add a 'unique' (but pointless) path-info or GET Parameter to the url everytime you change something to test facebook-posting of it:
mysite.com/test.php/bogusParam1
mysite.com/test.php/bogusParam2
mysite.com/test.php/bogusParam3
...
mysite.com/test.php?foo=hello
mysite.com/test.php?foo=howdy
mysite.com/test.php?foo=aloha
Both HTML5 and HTML+RDFa 1.1 are still in development, it implies that everything we say her now might be subject to change. There are two sides of your questions:
Is it valid?
Will it create interoperability issues?
For the validity, you might check at regular pace the implementation status of specifications in the W3C validator. It has an experimental HTML5 validator built into it.
Namespaces in HTML5 are still pretty much in debate. They create issues leading to a different DOM from what is really intended, which leads to my second question: interoperability issues. You can test how the markup is handled with a Live Dom Viewer or use something like Opera Dragonfly to explore the DOM representation of the document in the browser.
If you want to explore the topic of HTML5 DOM and RDFa a bit more, you might want to read Jenni's blog post.
Your markup so far is not really an issue, but if you involve javascript, you will have to be careful about namespaces and values with columns.
This 2009 Draft seems to be trying to build a schema which validates for both.
http://dev.w3.org/html5/rdfa/rdfa-module.html
This is the corect way to doit in html5:
<meta property="http://ogp.me/ns#locale" content="en_US" />
<meta property="http://ogp.me/ns#site_name" content="xxxxxx" />
<meta property="http://ogp.me/ns#type" content="website" />
<meta property="http://ogp.me/ns#title" content="xxxxxxxxxxxx" />
<meta property="http://ogp.me/ns#description" content="xxxxxxxxxxxxxxxx" />
<meta property="http://ogp.me/ns/fb#app_id" content="xxxxxxxxxxxxxxxx" />
etc...
hope it helps
Now a days, The HTML5 validator and Facebook both support HTML+RDFa 1.1, so you can just use property instead of name now. You also don't have to mess with xmlns declarations in html5. The og prefix is defined in the (RDFa) spec, so you don't have to define it. You could explicitly say prefix="og: http://ogp.me/ns#" on the html or head tag though.