Facebook Open Graph Protocol Lint Debugger Error - You have <meta> tags outside your <head> - facebook

i have a facebook tab that i am attempting to place a send button into (standard FB plugin). i want to control the title and description via open graph, so i followed the current FB instructions to do that.
the open graph data just won't show up in the "send" plugin. passing the page through the FB debugger renders this error: "You have meta tags outside your head" and that's why they aren't working, according to it.
the problem is - i have scoured the source of the page and there are no meta tags outside of the head. furthermore, the page passes through the validator with no errors regarding misplaced meta tags (which it would find). the only errors rendered in the validator are regarding FB's use of non-standard meta attributes. no markup errors, no meta tags outside of the head.
so, at a loss. help: appreciated.

I had a similar problem and traced the issue to Debugger not parsing my document properly because I had NOSCRIPT tags in the HEAD. This is valid in HTML5 (which I was using) but not in HTML 4.01. It appears that the Facebook debugger hasn't caught up with HTML5 tag validation yet.

Related

Facebook Object Debugger returns 404 not found when trying to scrape

I have a simple Tumblr website blog, upon which I post content.
However since I changed my DNS, the Facebook Object debugger sees really old data for my root url: http://www.kofferbaque.nl/ and for every post (for instance: http://kofferbaque.nl/post/96638253942/moodoid-le-monde-moo) it shows a 404 not found, which is bullshit because the actual content is there.
The full error message: Error parsing input URL, no data was cached, or no data was scraped.
I have tried the following things to fix it:
clear browser cache / cookies / history
using ?fbrefresh=1 after the URL (didn't work)
I've added a FB app_id to the page (made sure the app was in production - added the correct namespaces etc. - also didn't change anything)
Checked out other questions regarding this subject
Rechecked all my meta tags a dozen times
What other options are there to fix this issue?
If you need more info please ask in the comments.
2014-09-08 - Update
When throwing my url into the static debugger https://developers.facebook.com/tools/debug/og/echo?q=http://www.kofferbaque.nl/. The 'net' tab from firebug gives the following response:
<meta http-equiv="refresh" content="0; URL=/tools/debug/og/echo?q=http%3A%2F%2Fwww.kofferbaque.nl%2F&_fb_noscript=1" /><meta http-equiv="X-Frame-Options" content="DENY" />
2014-09-11 - Update
removed duplicate <!DOCTYPE html> declaration
cleanup up <html> start tag (aka - removed IE support temporarily)
I've placed a test blog post to see if it would work, it didn't. Somehow my root url started 'magically' updating itself. Or let's say, it removed the old data - probably due to the fact that I removed the old app it was still refering to. However, it still doesn't see the 'newer' tags correctly.
Still no succes
2014-09-12 - Update
Done:
moving <meta> tags to the top of the <head> element
removed fb:app_id from page + the body script, for it has no purpose.
This appearantly doesn't make any changes. It also appears that tumblr injects lots of script tags at the start of the head element. Maybe that is the reason the Facebook scraper doesn't 'see' the meta tags.
The frustrating bit is that through some other og tag scanner: http://iframely.com/debug?uri=http%3A%2F%2Fkofferbaque.nl%2F, it shows all the correct info.
First, the HTML is not valid. You got the doctype two times (at least on the post page), and there is content before the html tag (script tag and IE conditionals).
This may be the problem, but make sure you put the og-tags together at the beginning of the head section - The debugger only reads part of the page afaik, so make sure the og-tags are in that part. Put all the other og-tags right after "og:site_name".
Btw: ?fbrefresh=1 is not really necessary, you can use ANY parameter - just to create a different url. But the debugger offers a button to refresh the scraping, so it´s useless anyway.

Open Graph Meta Tags in Body?

I am trying to add open graph meta tags to our video pages on our website, but for some reason they are not being picked up by Facebook. I believe I'm doing everything as is posted on the developer pages.
Here is an example link:
http://www.atlantafalcons.com/falconstv/?video_id=1750246128001
The linter returns the following 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.
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.atlantafalcons.com%2Ffalconstv%2F%3Fvideo_id%3D1750246128001
Thanks in advance!
Your <!DOCTYPE> declaration has a closing slash /> on it when it is not supposed to. This, and other misplaced characters, can cause erroneous behavior on different levels and tools. The 'Meta Tags in Body' message is more than likely caused by that.

Facebook not able to analyse my web pages to determine useful images etc for shared links

I am trying to ensure that meaningful information is supplied with Facebook shared links to the HTML5 pages on my website. Right now, links are just showing up as a URL, with no description or accompanying image.
I have been using the open graph tags to provide metadata on the page.
I have been trying to check the pages on the website using the Facebook debugging tool but the tool does not get any data from the page being checked.
For example, I try to debug the page: http://www.gaiaguide.info/do/Hierarchy
It responds with the error: "Could not retrieve data from URL."
The graph API data provided by the debugging tool has the following value:
{
"error": {
"message": "An unknown error has occurred.",
"type": "OAuthException",
"code": 1
}
}
When I look at what Facebook scraper sees for the page, all I get is the following:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" "http://www.w3.org/TR/REC-html40/loose.dtd">
The entire HTML content is missing. What is even more peculiar is that it is not even the same doctype as the page I am trying to test.
It is not clear to me why an OAuthException would be raised. The page is visible to external sources for validation. For example, I have validated the page on an HTML5 validation site and it is definitely seeing the entirety of the page contents.
I haved tried URLs from other sites served on the same IP address from the same server and they are fine. An appropriate image and summary is provided in the set of information that would be used to construct the shared link.
I have found other HTML5 pages that validate fine on the Facebook debugger.
I have tried to remove the og:* meta tags from the pages to see if they were causing Facebook to think that the website should be requiring some kind of user authentication but that has not impacted upon the problem.
I have tried to remove the "sharethis.com" mark-up and Javascript that is responsible for the sharing icons to the pages but that has also had no effect.
Any insights into what should be a simple problem would be greatly appreciated.
Thanks
Geoff S
The only issue I can see on your page is the empty space at the top of your HTML code. I made a copy of your page (http://www.webniraj.com/hierarchy.html) and put it through the debugger after removing the odd characters at the beginning of the file.
The page seemed to work correctly after that:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.webniraj.com%2Fhierarchy.html

HTML in Facebook tab not allowed

I want to add a tab with content from a page I made to a fan page of mine.
I set up an app for it here: http://apps.facebook.com/like_analytics/
As you can see, it loads correctly.
However, when I made a tab for it and added it to my page here: http://www.facebook.com/pages/Like-Button-Analytics/115713315157219?v=app_170556839635845
I get this:
Application temporarily unavailable
Parse errors:
FBML Error (line 17): illegal tag "body" under "fb:tab-position"
Runtime errors:
HTML error while rendering tag "script": App exceeded maximum number of script references
HTML error while rendering tag "script": App exceeded maximum number of script references
HTML error while rendering tag "link": There is a hard limit of 2 css link tags on profile tabs in order to remain under the IE 31 tag limit.
Cannot allow external script
It looks like I can't have a full HTML page on a tab, but I need scripts for syntax highlighting etc.
Is there any way to make this work?
Tim
Inside facebook tabs you cannot use html as you would regularily use it.
The part of html that you can put inside a facebook tab consist of the content of the body tag. that means you are not allowed to use the body tag, nor html, head.
If you need to insert css or javascript code you can use the style tag. good luck ;)
iFrames are allowed inside Page Tabs now.
If you're still seeing the illegal tag "body" under "fb:tab-position" error, log in as a page admin, view the page and click the "Upgrade" button at the top of the page to upgrade your page to the new layout and functionality.

Facebook Post Link Image

When someone posts a link on facebook, a script usually scans that link for any images, and displays a quick thumbnail next to the post. For certain URLs though (including mine), FB doesn't seem to pick up anything, despite their being a number of images on that page.
I read up that FB prefers the "image_src" rel tag for the image the user wishes to specify, but this does not generate that thumbnail either for my site.
My url goes directly to the DNS, and is not forwarded, so I don't imagine that could be the problem either.
Does anyone have an idea as to why FB can't generate any thumbnails from my site?
The easiest way is just a link tag:
<link rel="image_src" href="http://stackoverflow.com/images/logo.gif" />
But there are some other things you can add to your site to make it more Social media friendly:
Open Graph Tags
Open Graph tags are tags that you add to the <head> of your website to describe the entity your page represents, whether it is a band, restaurant, blog, or something else.
An Open Graph tag looks like this:
<meta property="og:tag name" content="tag value"/>
If you use Open Graph tags, the following six are required:
og:title - The title of the entity.
og:type - The type of entity. You must select a type from the list of Open Graph types.
og:image - The URL to an image that represents the entity. Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
og:url - The canonical, permanent URL of the page representing the entity. When you use Open Graph tags, the Like button posts a link to the og:url instead of the URL in the Like button code.
og:site_name - A human-readable name for your site, e.g., "IMDb".
fb:admins or fb:app_id - A comma-separated list of either the Facebook IDs of page administrators or a Facebook Platform application ID. At a minimum, include only your own Facebook ID.
More information on Open Graph tags and details on Administering your page can be found on the Open Graph protocol documentation.
http://developers.facebook.com/docs/reference/plugins/like
I know this question is old, but I recently dealt with the exact same problem and went round and round on it for a couple weeks. Multiple searches on Google turned up a lot of useful information, but most of it was focused on Open Graph tags, which I wasn't interested in using. Turns out my site had multiple issues, but here are some of the basics.
As EightyEight said, make sure your HTML is valid - and the same goes for your javascript and server-side code (PHP, ASP, etc.). I had a small PHP error in a piece of code that was executing as a separate call to the server from the main page. Due to a number of bizarre coincidences, that code was generating a 500 error - but ONLY for IE6 and strict parsing engines like the W3C validator and the Facebook page crawler. The problem didn't appear in modern browsers (Chrome 4, FF 3.5, IE 8, etc) so I didn't see it right away, but older/stricter clients were showing the 500 every time and that was the main reason FB wasn't crawling our page (when everything else seemed to be correct).
Regarding Randy's response, he's correct that Facebook will keep an old cached copy of your page long after you've updated it. FB claims it's only held for 24 hours, but I experienced much longer times than that. FORTUNATELY, FB has released their "URL Linter" tool that will show you a preview of how your page will appear when being shared on FB, and it will force FB to instantly update its cache of your page. This was a lifesaving tool. You can find it at http://developers.facebook.com/tools/lint/
Regarding the URL Linter tool, be aware that each variation of a URL is cached separately on Facebook, so "www.example.com" is not the same as "example.com". Also, unique capitalization is stored as well, so "ExampleOne.com" is not the same as "exampleone.com". (This led to a lot of confusion between my client and myself when it appeared to me that the cache had been updated just fine and the client claimed they weren't seeing the updates. Turns out I was looking at exampleone.com and had used Linter to update the cache, but they were looking at exampleOne.com which I hadn't submitted to Linter. As a result, I ended up submitting quite a few variations of the URL to Linter just to cover the bases.)
WyrdNEXUS's advice to use the image_src link tag is spot-on. This allows you to be sure that FB is scraping the best possible image for your page. There are some varying guidelines out there about what specs the image file should have, but I've successfully used a 128px square image and have seen a 130x97 image make it through as well. Here is Facebook's official documentation from http://developers.facebook.com/docs/reference/plugins/like/:
Images must be at least 50 pixels by 50 pixels. Square images work best, but you are allowed to use images up to three times as wide as they are tall.
Obviously, FB will resize a large image for you, but you'll almost always get better results if you resize it yourself beforehand.
Regarding Mike Cooper's link to the eHow article, avoid using step #1 in that article. It was valid advice when the article was written and when Mike posted the link, but it's now better to use the URL Linter tool for previewing how your page will appear when being shared. By using Linter, you won't cause FB to cache a (potentially) bad copy of the page before you get a chance to tweak it.
Use the facebook lintter available here. http://developers.facebook.com/tools/lint/
This will check your link and re fetch any images. this also clears any old cache.
Or try this - https://developers.facebook.com/tools/debug
To change Title, Description and Image, we need to add some meta tags under head tag.
STEP 1 :
Add meta tags under head tag
<html>
<head>
<meta property="og:url" content="http://www.test.com/" />
<meta property="og:image" content="http://www.test.com/img/fb-logo.png" />
<meta property="og:title" content="Prepaid Phone Cards, low rates for International calls with Lucky Prepay" />
<meta property="og:description" content="Cheap prepaid Phone Cards. Low rates for international calls anywhere in the world." />
NEXT STEP :
Click on below link
https://developers.facebook.com/tools/debug
Add your URL in text box (e.g http://www.test.com/) where you mentioned the tags. Click on DEBUG button.
Its done.
You can verify here https://www.facebook.com/sharer/sharer.php?u=http://www.test.com/
In above url, u = your website link
ENJOY !!!!
try this: http://www.ehow.com/how_4938148_thumbnail-show-up-facebook-share.html
Is the site's HTML valid? Run it through w3c validation service.
Actually, if you've already tried linking that page on Facebook BEFORE adding the "image_src" link, Facebook will keep using the old cached copy and not even see your changes. Try modifying the URL by removing or adding the 'www', or duplicate your page to test it.
I've noticed that Facebook does not take thumbnails from websites if they start with https, is that maybe your case?
had the same problem and figured out that my head closing tag was in the wrong place
Old question but recently I seemed to be running into same issue with thumbnail images from my link not showing in status updates on Facebook. I post for many clients and this is relatively new.
FB doesn't seem to like long URLs anymore — if you use a URL shortener such as goo.gl or bitly.com, the thumbnail from your link/post will appear in your FB update.
Try using something like this:
<link rel="image_src" href="http://yoursite.com/graphics/yourimage.jpg" /link>`
Seems to work just fine on Firefox as long as you use a full path to your image.
Trouble is it get vertically offset downward for some reason. Image is 200 x 200 as recommended somewhere I read.
If you used any plugin for seo then Check 1st your seo plugin settings.Then find out Noindex setting if Enable Media for Noindex then disable it.