OpenGraph meta for social sharing not displaying image on Facebook etc - facebook

Perhaps similar to this question but posting a new one because of the intermittent nature of my issue. I have tried many of the suggestions in that post though.
In researching this I've seen posts as far back as 2012 where people have come up against it and while some stuff has worked for some people there isn't anything definitive that I can find as a fix. I can't seem to solve my issue at all so I'm going to detail this as much as possible that way if we do get this solved, hopefully this can act as some sort of resource.
When sharing a URL on services that use OG data the image isn't fetched, but this only happens sometimes. Most notably this happens in Facebook, but when it does happen for a particular image other OG services (like WhatsApp) will experience the same problem, leading me to believe the problem is with the image itself or the OG meta data and not Facebook's execution of it. Its not a case of waiting for the scraper to do its thing either, this has been going on for weeks now and I rescrape often.
When this happens, I get the following from the Facebook debugger:
Warnings about Twitter properties and a "Parser Mismatched Metadata"
in relation to the Twitter properties
A notification of a redirect to the same URL with a trailing slash
Details of the raw tags found
The constructed data based on the raw tags
An example of what users will see when they share the URL
With the raw tags, the constructed data and the example, there's nothing unusual and there were no other errors identified in the report. Basically, the debugger says that everything is A-OK and also shows the image that I'm expecting it to show. But when the URL is actually shared, the fetched information does not include the image.
My research suggested that Facebook is very picky about the information it needs to do some stuff and I should supply as many properties as possible. So, currently my meta looks something like this (depending on the page):
<title>Examplefest 2018 - Lineup</title>
<meta name="description" content="An outstanding lineup" />
<meta property="og:title" content="Examplefest 2018 - Lineup" />
<meta property="og:description" content="An outstanding lineup" />
<meta property="og:url" content="https://example.com/lineup/" />
<meta property="og:type" content="article" />
<meta property="fb:app_id" content="15***********94" />
<meta property="og:image" content="http://example.com/_images/social-shares/lineup-social-share.jpg" />
<meta property="og:image:url" content="http://example.com/_images/social-shares/lineup-social-share.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="800" />
<meta property="og:image:height" content="420" />
<meta property="og:image:alt" content="Examplefest 2018 - Lineup" />
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:title" content="Examplefest 2018 - Lineup" />
<meta property="twitter:site" content="#examplefest" />
<meta property="twitter:creator" content="#examplefest" />
<meta property="twitter:description" content="An outstanding lineup" />
<meta property="twitter:image" content="http://example.com/_images/social-shares/lineup-social-share.jpg" />
<meta property="twitter:image:alt" content="Examplefest 2018 - Lineup" />
Things I've tried (in various combinations) so far based on my research:
og:url - Both with and without trailing slash
og:image:url - Both with and without use of this
og:image:secure_url - Both with and without use of this when image is
delivered by HTTPS
<html prefix="og: http://ogp.me/ns#"> - Both with and without use of this
Forced the contents of the image folder to be delivered by HTTP
instead of HTTPS
Used a .jpg instead of a .png (this seemed to work on one occasion)
Reduced image's original dimensions and file size, now at 800x420 and 342.7kb (this also seemed to work on one occasion)
Verified that there's no issues with my SSL certificate using SSL Shopper's SSL
Checker
To force the delivery of these images over HTTP instead of HTTPS I've used .htaccess. I don't get any errors with this in my logs, there are no subfolders within the specified folder and the Facebook debugger confirms that the image it retrieved was over HTTP. My .htaccess looks like this (with a bunch of permanent and temporary redirects at the end):
Options +FollowSymLinks
RewriteEngine On
#Rewrite the WWW out of urls
RewriteCond %{HTTP_HOST} ^www\.(.*)$ [NC]
RewriteRule ^(.*)$ http://%1/$1 [L,NE,R=301]
#Rewrite everything to https except the contents of specific folders
RewriteCond %{HTTPS} !on
RewriteCond %{THE_REQUEST} !\s/+_images/social-shares[/?\s] [NC]
RewriteRule ^(.*)$ https://%{HTTP_HOST}%{REQUEST_URI} [L,NE,R=301]
#Force contents of specific folders to be HTTP and not HTTPS
RewriteCond %{HTTPS} on
RewriteCond %{THE_REQUEST} \s/+_images/social-shares[/?\s] [NC]
RewriteRule ^(.*)$ http://%{HTTP_HOST}%{REQUEST_URI} [L,NE,R=301]
#Allow cross site resources
Header add Access-Control-Allow-Origin "*"
I feel like I've tried every option I can find about it and nothing seems to work. Its baffling that it's only intermittent as well; when an image works, it works for all OG services, and when it fails, it fails for all OG services. Changing the image to a different one sometimes works and sometimes doesn't. In fact, this has about the same chance of it displaying as the first image had. Could this mean that there's some properties about the image itself that could be important to this process? Changing the image to something else isn't really an option when I have a specific image I want to share.
Has anybody got any ideas on what to try next? Or even better, can you see any glaring issues with my code? I'm quite happy to PM you a URL if you want to have a look at the real thing.

Related

Facebook preview ignores Open Graph tags

I've looked through all the questions describing similar problems but I found no solution, so here's yet another of them.
The page in question is this one https://attanasioscrive.it/cipolle/; you'll notice all the meta tags inside <head>:
<meta property="og:title" content="Cipolle e altre disgrazie" />
<meta property="og:description" content="Un libro per chi non ha pazienza per i libri, una ricca collezione di storie cazzute.
Dai un'occhiata senza impegno e guarda cos'ha da offrire." />
<meta property="og:url" content="https://www.attanasioscrive.it/" />
<meta property="og:site_name" content="AttanasioScrive" />
<meta property="og:locale" content="it_IT" />
<meta property="og:type" content="book" />
<meta property="og:image" content="/static/blog/img/cipolle_fb.png" />
<meta property="og:image:alt" content="Copertina del libro Cipolle e altre disgrazie" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="600" />
<meta property="twitter:title" content="Cipolle e altre disgrazie" />
<meta property="twitter:description" content="Un libro per chi non ha pazienza per i libri, una ricca collezione di storie cazzute.
Dai un'occhiata senza impegno e guarda cos'ha da offrire." />
<meta property="twitter:site" content="AttanasioScrive" />
<meta property="twitter:card" content="product" />
<meta property="twitter:image" content="/static/blog/img/cipolle_tw.png" />
<meta property="twitter:image:alt" content="Copertina del libro Cipolle e altre disgrazie" />
Unfortunately Facebook's debugger seems to think none of those tags exists at all, no matter how many times I click the "scrape again" button, which according to some Facebook support page should invalidate the scraper's cache and appropriately see recent changes.
Among the debugger's warnings there's "SSL Error", despite my SSL certificate being in order, which makes me think their scraper discriminates against Let's Encrypt, but most importantly could possibly be preventing the scraper from actually reading the page, to no fault of my own. I've read somewhere around the web that Facebook had trouble scraping https URLs and I hope that's not true anymore, I don't want to support insecure http just for Facebook's (and possibly Twitter's) sake.
UPDATE: turns out part of the problem was caused by my nginx configuration file not pointing to the full chain certificate. Correcting that allowed Facebook's and Twitter's debuggers to correctly see the site.
However, running Facebook's debugger again, I noticed it can now pick up on some properties, but not all of them: og:url, og:type, og:title, og:image, og:description are the ones it mentions, though notably it also complains about the content of og:url not matching the page's, so something is clearly amiss here.
From the "See exactly what our scraper sees for your URL" feature, I can clearly see that the HTML the scraper sees is the one from my home page, not the specific URL I supplied (see URL above), but I want specific outputs for specific pages. Should I correct og:url to the specific page I want to link to? And will this also fix the other tags not being read correctly?
This answer helps to fix the configuration issue.
I have had some issues with LetsEncrypt certificates and Facebook and it has something to do with the configuration or how they are installed. I am not sure exactly what, but I had this problem a few months ago.
The fix for us was to get a certificate from another provider (we had to do that anyway for other purposes). We didn't spend much time trying through as we were getting a different certificate anyway.
However, I ran a test and found that your SSL certificate is not configured properly.
HTTPS is certainly not a problem. The websites I support both use OG tags as wlel as HTTPS.
Check out this: https://whatsmychaincert.com/?attanasioscrive.it (I do not own the website, just have used it for debugging). It shows that your certificate as it currently is setup is not configured correctly.
Start with fixing that.
Regarding the og:url issue, that is because the link you provided is:
https://attanasioscrive.it/cipolle/
But what you have in the og tag is:
https://www.attanasioscrive.it/
Basically, Facebook is looking for those to match. So try changing your tag to match and see if it solves the issue.

Playing back an embedded mp4 video in a Facebook like or share using Flash

I have an H.264-encoded mp4 file that I'm trying to get embedded into a Facebook post when the page that's serving it is Liked or Shared.
My understanding is that I simply need to have the right Open Graph <meta> tags in place on the URL that's being liked/shared. However, I've tried several different sets of <meta> tags and the video is still not embedding when I paste the URL into my Status Update and Post it. It does embed the image from the og:image property, but clicking on the image just passes the user off to og:url.
When I use the the Facebook Debugger tool, here's what it displays for Raw Open Graph Document Information:
Meta Tag: <meta property="fb:app_id" content="000000000000000" />
Meta Tag: <meta property="og:url" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:title" content="Example Page" />
Meta Tag: <meta property="og:description" content="Example Description" />
Meta Tag: <meta property="og:site_name" content="Example" />
Meta Tag: <meta property="og:image" content="http://content.example.com/images/example.png" />
Meta Tag: <meta property="og:type" content="video.other" />
Meta Tag: <meta property="og:video:width" content="400" />
Meta Tag: <meta property="og:video:height" content="300" />
Meta Tag: <meta property="og:video" content="http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d" />
Meta Tag: <meta property="og:video:type" content="application/x-shockwave-flash" />
Meta Tag: <meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0" />
Meta Tag: <meta property="og:video:type" content="video/mp4" />
Meta Tag: <meta property="og:video" content="http://www.testdomain.com/path/to/shared/page" />
Meta Tag: <meta property="og:video:type" content="text/html" />
The values above have been replaced with dummy values, but they're all valid links.
Facebook seems to parse this out correctly, since it shows under Type of Share -> Video:
status: Video embedding on Facebook enabled
1: application/x-shockwave-flash
2: text/html
When I go directly to the flash player url (http://static.example.com/flowplayer-3.2.15.swf?config=%7b%22clip%22%3a%22http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0%22%7d), the video plays correctly (embedded in the flash player).
Things I've tried/considered:
Skipping the flash player
Originally I didn't even have a flash player in the og:video list and was trying to just use the mp4 file first. Facebook didn't pick it up and treated the like/share as a plain link share.
Whitelisting
At one point apps/domains had to be whitelisted before embedded video was allowed. This is no longer necessary. I haven't whitelisted my domain.
HTTPS
Some sources say that the flash player being used needs to be hosted over HTTPS. My research indicates this should only apply if the user is browsing Facebook over HTTPS, which I haven't been when testing.
I'm currently running some tests with an HTTPS-served flash player to see if anything changes.
Older tags
For the heck of it, I tried adding older Facebook <meta> and <link> tags (e.g. title, video_src) to see if it would pick them up. It did not.
Cache refresh
I passed a ?fbrefresh=1 along with the URL in the Facebook Debugger to make sure the cached version of the URL got cleared. That did result in the newest meta information getting pulled in, but still no embed.
iPad
Since I've got the video/mp4 fallback in my og:video tags, I looked at my Facebook news feed in the iPad app. Excitingly, the thumbnail image had a little play button overlayed on it. However, touching the play button resulted in a redirect to the share URL instead of playing the video inline. Safari on the iPad had the same behavior (but with no play button overlay).
Document namespaces
I added the appropriate Open Graph / Facebook namespaces to my markup:
<html xmlns:og="http://ogp.me.ns#" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# video: http://ogp.me/ns/video#">
But it didn't seem to have an effect. I don't think they're required.
Is there something that I'm missing here? I feel like a lot of resources I've found so far could be outdated since Facebook has changed their API several times, so it's possible that I've missed a newer requirement.
How can I get the video to embed and play back within the Facebook timeline?
Having a look at YouTube's og: meta tags, the only differences I can spot are:
YouTube's og:url and og:video are served from the same domain and subdomain (www.youtube.com). Mine are served from the same domain, but different subdomains (media: content.example.com, player: static.example.com). Does the subdomain have to be the sam across all of the og: meta information?
YouTube's share URL isn't a straight .swf per se, but it is flash content:
rob#uvm:~$ curl "http://www.youtube.com/v/oHg5SJYRHA0?version=3&autohide=1" > yt
% Total % Received % Xferd Average Speed Time Time Time Current
Dload Upload Total Spent Left Speed
100 4242 100 4242 0 0 43522 0 --:--:-- --:--:-- --:--:-- 55815
rob#uvm:~$ file yt
yt: Macromedia Flash data (compressed), version 10
Just realized that one of my URLs is actually on a different domain. I have a feeling that's the culprit. I'm moving some stuff around now to try it out. I've updated my meta tag data above. Feel a bit sheepish for not making this observation up front.
Here's what ended up working for me.
<!-- These two aren't necessary for embedding. -->
<meta property="og:site_name" content="Example">
<meta property="fb:app_id" content="000000000000000">
<!-- These are mostly needed. A few are probably still optional, but they're all good to have. -->
<meta property="og:type" content="movie">
<meta property="og:title" content="Example Page">
<meta property="og:description" content="Example Description">
<meta property="og:url" content="http://www.testdomain.com/path/to/shared/page">
<meta property="og:image" content="http://content.example.com/images/example.png">
<meta property="og:video" content="http://static.example.com/player.swf?file=http%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4%3fv%3d0&autoplay=true">
<meta property="og:video:type" content="application/x-shockwave-flash">
<!-- Not necessary, but might (can't find up-to-date docs) be used for iOS fallback. -->
<meta property="og:video" content="http://content.example.com/path/to/video.mp4?v=0">
<meta property="og:video:type" content="video/mp4">
Some observations and useful information:
Flash player
I switched to using JWPlayer since its query parameter flashvars configuration was slightly simpler than FlowPlayer's. I think I could have gotten FlowPlayer to work with a bit more effort. JWPlayer also has a nice instructional page for Facebook embedding. (Note: many Flash players require a purchased license for commercial use - make sure you get one if necessary.)
Open Graph <meta> tags
Using movie worked for for og:type. I was originally using video and video.other. Those probably work as well, but using movie definitely worked for me.
The following og: properties were not necessary for embedding: fb:app_id, og:video:width, og:video:height.
Note the URLEncoded file query parameter. Needing to do this should be fairly obvious, but keep in mind to encode the parameter values separately. The ampersand (&) before autoplay=true was XMLEncoded before getting added to the page markup. The ampersand was correctly decoded when viewing it in the Facebook Debugger's "Object Properties" section.
Hosting the content and shared url on separate subdomains didn't matter. The only domain concerns that might cause problems are within the flash player itself, and can be avoided with a correctly-configured crossdomain.xml on the content server.
Facebook Debugger Tool observations
The Debugger Tool's "Type of Share" section was slightly misleading:
This is what it showed when I had both application/x-shockwave-flash and video/mp4 types. I would have expected it to have two items in this list, but it just had the second. Despite that, the flash player still embedded.
I was initially wondering if Facebook was getting caught up with the URLEncoded parameters when I saw that it was showing everything represented as unicode:
However, looks like that's not a problem. Don't let it confuse you.
HTTPS
The code above doesn't embed with https Facebook browsing. Additionally, the og:video:secure_url meta property didn't work (maybe due to this). What I ended up doing was serving both the flash player and its source mp4 file parameter over https. The resulting meta tag looked something like:
<meta property="og:video" content="https://static.example.com/player.swf?file=https%3a%2f%2fcontent.example.com%2fpath%2fto%2fvideo.mp4&autostart=true" />
The og:video was the only one that needed to be over https; og:image, og:url, etc. were okay still being served over http.
Hopefully this'll help others avoid the dead ends and red herrings that I ran into while debugging and learning about all of this.
FYI video/mp4 is currently valid here in 2014.
See the meta provided on this page (ctrl-f mp4):
Seems like facebook only accept application/x-shockwave-flash or video/mp4 not text/html.
MIME type of the video. Either application/x-shockwave-flash or video/mp4.
https://developers.facebook.com/docs/sharing/webmasters

Facebook Debugger - "Error Parsing URL"

i have searched a lot for solutions for this problem. Since none of the solutions i have found worked for me i am posting my experience with this issue to see if i can get some help.
Theres this site that i worked on some time ago and it always worked fine to share links on facebook and to use facebook like button. The OG tags are set up as i usually add them on every project i work on, but i have never had this problem before.
Check out how the source code that is being displayed on the browser after the page is loaded (url: http://www.estanaweb.com.br):
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://opengraphprotocol.org/schema/" xmlns:fb="http://www.facebook.com/2008/fbml">
<head prefix="og: http://ogp.me/ns# fb: http://ogp.me/ns/fb#">
<meta property="fb:app_id" content="289790431108540" />
<meta property="og:locale" content="pt_br" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.estanaweb.com.br" />
<meta property="og:site_name" content="ESTANAWEB" />
<meta property="og:description" content="Eventos Vips de Porto Velho" />
<meta property="og:image" content="http://www.estanaweb.com.br/wp-content/uploads/logo-estanaweb-facebook.png" />
All informations on the OG tags are valid and correct. A few things i have tried:
Checking the time spent on db queries to see if the facebook connection was timing out
Checking if the data on the tags are correct
Checking if the site is on Blacklists
Makin a html page only with the OG tags
Ordered the OG tags in many different orders
Removed all the OG tags
Add the tags, one by one and the main by theirselves
Deleted my .htaccess
Setup my .htacess in different ways
I didn't get any error saying the url was spam or anything like that either
Anyway, my point is that i tried a lot of things and i still get the parsing url error.
Any hints on whats going on anyone?
Sorry if my english is somewhat bad, its not my main language.
Thx in advance for your time.
Seems you have a DNS problem to fix first:
$ host www.estanaweb.com.br
www.estanaweb.com.br has address 189.113.11.82
Host www.estanaweb.com.br not found: 3(NXDOMAIN)
Host www.estanaweb.com.br not found: 3(NXDOMAIN)
FB is not able to crawl it reliably probably. This is what my host sees:
$ wget http://www.estanaweb.com.br/
--2012-08-16 14:15:21-- http://www.estanaweb.com.br/
Resolving www.estanaweb.com.br (www.estanaweb.com.br)... failed: hostname nor servname provided, or not known.
wget: unable to resolve host address `www.estanaweb.com.br'

Problems with Facebook OpenGraph and Wordpress

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/

HTML5 and RDFa support

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.