I'm trying to show a thumbnail when a link to my site is shared on Facebook but it's not working properly. I have tried using the Facebook object debugger and I get the following warnings:
The og:url property should be explicitly provided, even if a value can be inferred from other tags.
The og:title property should be explicitly provided, even if a value can be inferred from other tags.
These are the meta tags I'm using:
<meta property="fb:app_id" content="227018187387679" />
<meta property="og:locale" content="en_US" />
<meta property="og:title" content="Tree Removal Gone Wrong" />
<meta property="og:type" content="video.other" />
<meta property="og:url" content="http://www.asopao.com/video/2611" />
<meta property="og:image" content="http://www.asopao.com/media/videos/tmb/2611/1.jpg" />
The URL is http://asopao.com/video/2611/tree-removal-gone-wrong
What am I doing wrong?
According to the linter:
http://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fasopao.com%2Fvideo%2F2611%2Ftree-removal-gone-wrong
You're missing those tags.
Here's exactly what your server is sending to facebook:
http://developers.facebook.com/tools/debug/og/echo?q=http%3A%2F%2Fasopao.com%2Fvideo%2F2611%2Ftree-removal-gone-wrong
These are the only meta tags you're sending.
<meta charset="utf-8" />
<meta name="robots" content="noodp, noydir" />
<meta name="description" content=" Facebook is a social utility that connects people with friends and others who work, study and live around them. People use Facebook to keep up with friends, upload an unlimited number of photos, post links and videos, and learn more about the people they meet." />
Related
I have all my metadata in my NextJS app, they are put on the root page, so the metatada appear well on my view source's page. But my Facebook open graph seems to don't reach them for an unknown reason to me.
Here my ReactJS:
<Head>
<title> Test 02 </title>
<meta property="og:title" content="An awesome endless memories's title" />
<meta property="og:url" content="somepath/digital-marketing/website-digital-gq" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:site_name" content="IMDb" />
<meta property="og:locale" content="en_US" />
<meta property="og:locale:alternate" content="en_GB" />
<meta property="og:locale:alternate" content="cn_CN" />
<meta property="og:image" content={localImage} />
<meta property="og:image:width" content="1600" />
<meta property="og:image:height" content="800" />
</Head>
Facebook's Sharing Debugger returns me
Inferred Property The 'og:image' property should be explicitly
provided, even if a value can be inferred from other tags. Missing
Properties The following required properties are missing: og:url,
og:type, og:title, og:image, og:description, fb:app_id
Could Not Connect To Server Check that the webserver is running, and that there
are no firewalls blocking Facebook's crawlers.
Curl Error Curl error: 56 (RECV_ERROR)
Honestly, I don't have even the beginning of a clue on this story, really, if someone has any hint, would be great,
thanks
Answer - thanks to the hints in the comments.
when you use some URI for your Facebook Open Graph, be sure to target a vali URL, seems to be exclusively the root page of your component in case of NextJS, other languages/libraries/framework could probably follow a similar pattern.
You can set it directly in the facebook sharing link in your code as following:
https://www.facebook.com/sharer/sharer.php?u=[your_operational_url]
you are not obliged to encode the URL if I trust the result of my tests. So just the text of your URL should be enought.
Good builds.
I'm building an image on the fly to attach to page to be shared on facebook. Everything seems to be going great until it hits the share dialog. Facebook doesn't seem to be scraping, because the image isn't showing up. If I refresh that dialog page, it does load the image (having crawled it from the first go?).
I've read several pages that say I need only specify og:image:width and og:image:height to allow for immediate rendering, but that doesn’t seem to be working. Here are my meta tags:
<meta property="fb:app_id" content="###"/>
<meta property="og:type" content="website" />
<meta property="og:url" content="###" />
<meta property="og:title" content="My Page Title" />
<meta property="og:description" content="My Page Description" />
<meta property="og:image" content="http://the-domain/the-image.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta property="og:image:type" content="image/jpeg" />
Am I missing something here?
For these kinds of issues, I recommend checking out the debugging tool that Facebook provides. It's great for quick identification of show stopping errors like you're receiving.
https://developers.facebook.com/tools/debug/
Just a couple of things to keep in mind, sometimes the image or page will time out if Facebook finds that it's taking longer than 1s to fetch the data. I've also found issues with my own implementations if the og:url is different than the page you're expecting Facebook to fetch. The two values must match, because ultimately it's the og:url value that facebook is trying to scrape.
I am trying to create meta tags for Facebook sharing option with the open graph protocol. I have different tags like in the following snippet:
<meta property="og:type" content="business.business" />
<meta property="og:url" content="http://www.mywebsite.com/journal" />
<meta property="og:image" content="http://mywebsite.com/images/stories/beautifulimagelikeyou.jpg" />
<meta property="og:site_name" content="My website" />
<meta property="og:description" content="Description of my wonderful page" />
I am looking for a meta tag to add the scheduled date of an event (e.g. a concert) and there seem to be nothing other than xxx:release-time or xxx:published-time (checked on the documenation) and ideally I am looking to add something like
<meta property="og:date" content="2016-06-06" />
or
<meta property="event:date" content="2016-06-06" />
has anyone ever used this kind of tag? because both og docs and facebook docs do not seem to include this kind of tag, and I don't know how to go about it. thank you.
Hi I'm having trouble in showing the image when sharing a link thru Facebook.
Here are my meta tags:
<meta property="og:image" content="http://stmaws.s3.amazonaws.com/thumbs/<?php echo $meta_thumbnail; ?>.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="300" />
<meta property="og:image:height" content="300" />
<meta property="og:title" content="Check out what I made on Muserk.com" />
<meta property="og:site_name" content="Check out what I made on Muserk.com" />
<meta property="og:description" content="Muserk.com gives you the ability to legally add music to your videos and share them with the world!" />
<meta property="og:url" content="http://<?php echo $_SERVER['SERVER_NAME'] . $_SERVER['REQUEST_URI']; ?>" />
$meta_thumbnail could be something like this: http://stmaws.s3.amazonaws.com/thumbs/53135cb64f26109a448b4ba6.jpg
My thumbnail image is shared to public so I don't think the problem has something to do with privacy/security.
Image size is 32px of width and 26px of height.
Facebook debugger: https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fmuserk.sourcepadstage.com%2Fvideo%2Findex%2F5314f1ba4f261098448b519b
Output from Facebook Debugger:
Scrape Information
Response Code 200
Fetched URL http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
Canonical URL http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
Object Properties
og:url http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b
og:type website
og:title Check out what I made on Muserk.com
og:image <IMAGE HAS BEEN DISPLAYED HERE>
og:description Muserk.com gives you the ability to legally add music to your videos and share them with the world!
og:site_name Check out what I made on Muserk.com
og:updated_time 1393881547
Raw Open Graph Document Information
Meta Tag <meta property="og:image" content="http://stmaws.s3.amazonaws.com/thumbs/53135cb64f26109a448b4ba6.jpg" />
Meta Tag <meta property="og:image:type" content="image/jpeg" />
Meta Tag <meta property="og:image:width" content="300" />
Meta Tag <meta property="og:image:height" content="300" />
Meta Tag <meta property="og:title" content="Check out what I made on Muserk.com" />
Meta Tag <meta property="og:site_name" content="Check out what I made on Muserk.com" />
Meta Tag <meta property="og:description" content="Muserk.com gives you the ability to legally add music to your videos and share them with the world!" />
Meta Tag <meta property="og:url" content="http://muserk.sourcepadstage.com/video/index/5314f1ba4f261098448b519b" />
URLs
Graph API https://graph.facebook.com/642413225848487
Scraped URL See exactly what our scraper sees for your URL
EDITS:
Hi I tried to continue sharing the link and it was displayed:
http://d.pr/i/mu2T
But I wonder why it is not showing while sharing the link: http://d.pr/i/9j3l
Your image is way too small, these are the recommendations:
Minimum 600x315px
Recommended: 1200x630px
Ratio should be 1.91:1
Also, i get an error when i try your Debugger link: "Error parsing input URL, no data was scraped."
Make sure all data is public so Facebook can scrape it.
Im trying to generate fb opengraph meta tags on my site, so that it can be picked up by the facebook scraper, but scraper isnt picking up my data.
Here's a screenshot of my scraper data
And here is the PHP code that I'm inserting into my page to generate the meta tags.
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:og="http://ogp.me/ns#"
xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta property="fb:app_id" content="APP _ID" />
<meta property="og:site_name" content="Moodle Deliverable"/>
<meta property="og:title" content="Communities Discussion Forum!" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://54.201.93.242/moodle" />
<meta property="og:image" content="http://www.india-forums.com/tellybuzz/images/uploads/D38_Vivek-Oberoi_0.jpg" />
<meta property="og:site_name" content="Moodle Deliverable" />
<meta property="fb:admins" content="admin number" />
</head>
</html>
I've used a dummy image link and supplied the rest of the required parameters. But as you can see the scraper says the og:type data is missing/
Can anyone help me with this?
If you want to add some parameters to the object url, please make sure you change the og:url parameter too.
The facebook scraps the og tags from the og:url that you mentioned.