CODEWITHSUNDEEP
facebookwordpressinternet-explorerdebuggingfacebook-opengraph
Iván Fuentes Hagar
Iván Fuentes Hagar

Reputation: 5

Can't solve Facebook Open Graph Meta tags not being scraped for my Wordpress site

This is my first time posting a question on this site, but certainly not the first time finding answers in it.

I have used stackoverflow as a resource to fix several issues I've faced with my new blog, that is until last night, when I found this issue which I just can't fix.

When I try to share the home page of my blog, I don't get the proper image specified in the og:image tag... once I check my site via de FB debugger, it shows me this:

https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com

Curiously enough, I do not find any issues when I check for a page, or a post: https://developers.facebook.com/tools/debug/og/object?q=ivanfuentes.com%2Fvideos%2F https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fivanfuentes.com%2Fthe-popularity-contest%2F

So, I know it's an issue that is generated in the home page only, but during the last 18 hours, have been unable to find it.

I have OG meta tags specified dinamically via a wordpress plugin... currently, it's "Facebook AWD", but I've had several other Facebook sharing, all-in-one's, and OG plugins, which give me the same results in the debugger, which makes me think I messed up somewhere else. I have no embarrassment in admitting I'm quite a newbie, so it's highly likely I messed up while trying to modify some code... probably when I added a few lines to make the site IE compliant?

Hope I gave enough information, and someone gets to help me, as this is not only about the proper image being displayed on a Facebook link, but rather about me likely having a mess in my code, and that could (WILL) mean trouble once I make any mods/updates to my site in the future.

Thanks for the time!

Upvotes: 0

Views: 3119

Answers (1)

Nitzan Tomer
Nitzan Tomer

Reputation: 164167

Your html is a complete mess and that's why the debugger is complaining.

Visiting your page and looking at the code I can see this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<div id="fb-root"></div>
<script>
...
</script>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml" xmlns:og="http://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
<head profile="http://gmpg.org/xfn/11">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<div id="fb-root"></div>
<script>
...
</script>
<title>Ivan Fuentes Hagar</title>

Two problems there:

  1. The sdk code is inserted twice
  2. In both cases there's a div placement before the body

In the debugger result for this page when clicking the bottom link (Scraped URL: See exactly what our scraper sees for your URL) you can also see broken html but in another variation:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"><body>
<div id="fb-root"></div>
<script>
...
</script><meta http-equiv="content-type" content="text/html; charset=utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script>
...
</script><title>Ivan Fuentes Hagar</title>

There problems here:

  1. The body definition is right after the html
  2. There's no head definition
  3. All of the tags which suppose to live inside the head are inside the body
  4. The sdk script is loaded inserted twice

In both cases I found 3 occurrences of the <div id="fb-root"></div>.

As you can see you have some fixin' up to do with the html output of your wordpress.
I'm not sure why the outputs is different for the debugger, I thought that maybe due to the user agent string, but trying curl --user-agent "facebookexternalhit/1.1 (+http://www.facebook.com/externalhit_uatext.php)" "http://ivanfuentes.com/" returns the exact results as with the browser.

Upvotes: 2

Related Questions