I see a TON of questions on here and around the web in general about how to set these Facebook thumbnails. Most answers involve the og: meta tags, but I'm just not convinced this works. To be fair, it could be Facebook's fault, but I'm pretty sure I have the code written out properly. Can anyone tell me if something is wrong?
The website: http://nopadc.com/
Here is what I have in my header.php file (this is a Wordpress website BTW):
<?php if( get_option('spark_logo') ): ?>
<meta property="og:image" content="<?php echo get_option('spark_logo'); ?>">
<link rel="image_src" href="<?php echo get_option('spark_logo'); ?>">
<?php endif; ?>
<meta property="og:title" content="<?php bloginfo('name'); ?>">
<meta property="og:description" content="<?php bloginfo( 'description' ); ?>">
And here is what is output in the source:
<meta property="og:image" content="http://nopadc.com/wp-content/uploads/2013/04/logo-nopa.png">
<link rel="image_src" href="http://nopadc.com/wp-content/uploads/2013/04/logo-nopa.png">
<meta property="og:title" content="NoPA">
<meta property="og:description" content="An American brasserie in the heart of Penn Quarter.">
I have made sure the logo URL is correct. I have tried this without the < link > tag and tried linking to the website on Facebook on the first, second, and third day after the change. The same goes for having the < link > tag. I noticed some solutions mentioned that Facebook could take up to a day to rescrape for images, that's why I gave it three days with each change.
In any case I cannot tell what is wrong with this code. Unless there is some other Javascript library to include on the website, what am I missing? Or is this just Facebook not scraping the site correctly?
I seriously doubt there's anything wrong with Facebook.
Try using this plugin: Easy Facebook Share Thumbnails
Related
I have done several searches trying to find a solution with no luck. I'm hoping someone here can help.
For a while I was having a problem with my links on Facebook not showing the thumbnail or the description to my blog posts. They just showed a standard description and always linked to my home page. I was able to fix that issue by changing the metadata to the following:
<meta property="og:type" content="article" />
<meta property="og:url" content="<?= "http://www.calsots.com".$_SERVER['REQUEST_URI']; ?>" />
<meta property="og:title" content="<?= urldecode($_GET['title']) ?>" />
<meta property="og:description" content="<?= urldecode($_GET['description']) ?>" />
<meta property="og:image" content="<?= $_GET['image'] ?>" />
Now, I'm having an issue with G+. When I post a link the thumbnail doesn't show and there is no description. Any thoughts on how to fix this? I do have additional metadata for G+.
<meta itemprop="name" content="">
<meta itemprop="description" content="">
<meta itemprop="image" content="">
I have tried changing the content to calls, direct descriptions, I've left it blank and I even removed it but nothing is working.
The markup for the Google+ fragment you've provided isn't a full schema.org microdata set. Although it provides the data, you haven't shown if the page itself is setup correctly to indicate the itemscope and itemtype. You should also avoid the meta tags themselves, if possible, instead indicating the itemprop attribute on existing page elements.
See http://support.google.com/webmasters/bin/answer.py?hl=en&answer=176035 for more information about microdata in general, http://schema.org/docs/gs.html#microdata_how for details about how to markup your page with microdata, and https://www.google.com/webmasters/tools/richsnippets for the structured data testing tool, which can help determine how Google sees your page.
This is the url that I want the user to be able to share:
http://dealsfortherich.com/product/6379316
So my application (PHP) constructs this URL:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316
If you check out that link, you will see that the product number has been truncated.
Sharer.php is ignoring the number after the slash (%2F)
If I make that number alpha-number, it works:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316X
or
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2FX6379316
or
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F637X9316
Adding the trailing slash doesn't help:
https://www.facebook.com/sharer/sharer.php?u=http%3A%2F%2Fdealsfortherich.com%2Fproduct%2F6379316%2F
Obviously, I can write a condition in my application to handle a url like:
http://dealsfortherich.com/product/6379316X
But then I have duplicated content as far as search engines are concerned.
Should I just give up and do it without using sharer.php?
Figured it out!
The problem was that facebook was not scraping the page:
http://dealsfortherich.com/product/6379316
The facebook object debugger was showing that the scraper was seeing a canonical name of:
http://dealsfortherich.com/product/
This was happening even though I issued:
remove_action('wp_head', 'rel_canonical');
before calling wordpress' get_header() (which in turn calls wp_head()), which should have been removing the wrong canonical link.
The problem was that the filter fb_meta_tags (from a plug-in) was adding a bunch of OG tags before the OG tags that I thought I was setting!
Sure enough, one of the tags beting set was:
<meta property="http://ogp.me/ns#url" content="http://dealsfortherich.com/product/" />
This is how I solved it, in my php, before get_header() is called:
add_filter( 'fb_meta_tags', 'remove_og_tags' );
function remove_og_tags( $meta_tags )
{
$meta_tags['http://ogp.me/ns/fb#app_id'] = null;
$meta_tags['http://ogp.me/ns#type'] = null;
$meta_tags['http://ogp.me/ns#title'] = null;
$meta_tags['http://ogp.me/ns#image'] = null;
$meta_tags['http://ogp.me/ns#description'] = null;
$meta_tags['http://ogp.me/ns#url'] = null;
return $meta_tags;
}
That prevented the wrong OG tags from getting added before I added mine:
<link rel="canonical" href="<?php echo $page_path; ?>"/>
<meta property="fb:app_id" content="xxxxxxxxxxxxx" />
<meta property="og:type" content="product" />
<meta property="og:title" content="<?php echo $the_title; ?>" />
<meta property="og:image" content="<?php echo $image_url; ?>" />
<meta property="og:description" content="<?php echo $tweet_text.$the_title; ?>" />
<meta property="http://ogp.me/ns#url" content="<?php echo $page_path; ?>" />
Everything is now working beautifully.
when i use comment facebook plugin, then i'm comment in my site page. in my facebook timeline, i see
picture, title, url site, and description.
How to hide that's url site on facebook timeline ?
i'm not wrote <meta property="og:site_name" content=""/> there.
my code show below:
<meta property="og:title" content="<?php echo trim($title); ?>"/>
<meta property="og:description" content="<?php echo $desc;?>" />
<meta property="og:image" content="<?php echo $url_pic; ?>"/>
thanks
you can ommit the description but for users safety I dont think you can hide the sites url. it will allways be parsed from the page plugin is in.
You cannot hide the Site URL when sharing links on Facebook. It's a security feature so users know what domain they will be visiting.
could someone help me with my problem? I would like to change facebook meta tags according to actual page. I tried something like that but it doesn't works...
<head>
<script type="text/javascript">
window.document.write('<meta property="og:title" content="actual page title"/>');
</script>
<meta property="og:image" content="http://foto.mrsoft.cz/main.php?g2_view=core.DownloadItem&g2_itemId=10843&g2_serialNumber=2"/>
</head>
Thanks.
Enable PHP for your server and capture your page's title into a variable like $actual_page_title.
Then echo that using a PHP statement:
<meta property="og:title" content="<?php echo $actual_page_title; ?>" />
I'm having a problem that I can't seem to figure out, though I'm not sure if I'm on the right track. Can anyone please advise?
I've just created a wordpress website, that post's will be shared on facebook.
I'm using featured images and I would like my featured image facebook thumbnail to be used.
It seems when I post a link to facebook, facebook just picks up images on the page and you can choose a thumbnail.
I'm not really up for that because the images are landscape and don't look good. So I started looking into meta tag with the open graph property to see if I could dynamically populate the content that facebook captures when posting a link to the wall.
This is what I tried...
<meta name="description" content="" />
<meta name="author" content="" />
<meta charset="utf-8" />
<meta property="fb:app_id" content="0000000000000000" />
<?php if ( is_single() || is_page() ) { ?>
<meta property="og:title" content="<?php echo get_the_title(); ?>" />
<meta property="og:type" content="article" />
<meta property="og:url" content="<?php echo get_permalink(); ?>" />
<meta property="og:image" content="<?php $fbthumb = wp_get_attachment_image_src( get_post_thumbnail_id( $post->ID ), 'facebook-thumb' ); echo $fbthumb[0]; ?>" />
<meta property="og:site_name" content="myblog.co.uk"/>
<meta property="og:description" content="<?php echo get_the_excerpt(); ?>" />
<?php } ?>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
But all of this is ignored!!!
Can anyone help me understand how to control the content facebook draws in via a link being posted to a wall. I would appreciated your help very much.
Thanks
I had this problem the other day. Facebook wants og:images to be larger than 200px in both directions, or it will ignore them. I found I got the best result when I used wp_get_attachment_image_src($img.ID, 'large')
Have you tried looking at your site with the Facebook Debugger to see what it has to say about your site? https://developers.facebook.com/tools/debug