I've been testing the open graph tags for facebook and I can't get my logo to show when I share my website link on facebook.
If I use the lint debugger (https://developers.facebook.com/tools/debug) I get:
**Open Graph Object Properties**
og:url http://www.movimenting.me/
og:type website
og:title http://www.movimenting.me/
og:updated_time 1318267537
**Raw Open Graph Document Information**
Canonical URL http://www.movimenting.me/
Meta Tag <meta property="fb:app_id" content="210576275672723" />
Meta Tag <meta property="og:image" content="http://www.movimenting.me/images/logo2.jpg" />
Meta Tag <meta property="og:title" content="Movimenting.me" />
Meta Tag <meta property="og:type" content="website" />
Meta Tag <meta property="og:url" content="http://www.movimenting.me" />
Meta Tag <meta property="og:site_name" content="Movimenting.me" />
You can see that it gets the og:image on the raw part, but doesnt on the object properties..
Why is this? I always specify the same URL and opengraph.in gets the right tags..
thanks in advance.
everything comes out clean now on lint:
https://developers.facebook.com/tools/debug/og/object?q=http%3A%2F%2Fwww.movimenting.me%2F
image, locale, you name it. no errors or warnings or others.
BUT STILL, when you share the link (www.movimenting.me) on facebook, no image apears.
What can I do now, or what should I look for now?
Oh, btw now i recall: if I remove the og:image tag, it will indeed find 30 images to share, but not the logo. It's so strange, since the logo is the first one..
what now?
thanks in advance
Is there any errors in the debugger? Maybe the app_id doesn't match that domain?
Late reply but I've been having the same problem even though Facebook debug would report no issues and finally fixed it.
Nothing would show up when I had a 50x50px image which Facebook didn't complain about in the debugger. I finally changed the image URL to use a 128x128px one. It worked even though Facebook complained that the image should be at least 200x200px which I then used.
You can see the fix working here. https://www.thesuiteq.com
Related
I am trying to share the product url using facebook sharer and the link is also sharing properly but the problem is that while sharing, it didn't sharing the product image. Its sharing some other random image from the page, I don't understand why its happening. Also, while sharing contents contain the html tags.
Here is my sharer url :
Here is my image while sharing:
enter image description here
I have also added the line in <head></head> i.e.
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
but not useful.
Please help me out, I am poorly trapped in it.
You just need to put the following line
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
And debug in facebook debugger. if it doesn't show the correct image, click Scrape again button.
Also, something is wrong in your og:description. That's why its showing the code
I am trying to leverage the rich text messages with open graph meta tags. So I have included my meta tags in my website head and it passes all of the Facebook debug and iOS API validation tool.
Yet when I text the link to people either on Android or iOS it doesn't often work. It works typically with Facebook messenger
Does anyone know if this is a cell carrier issue or do I have something configured wrong?
<meta property="fb:app_id" content="********" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://dameranchdesigns.com/" />
<meta property="og:title" content="Dame Ranch Designs" />
<meta property="og:description" content="Divinely inspired logo graphics and
website design. A whole new way of being ... on the internet." />
<meta property="og:image"
content="https://dameranchdesigns.com/images/logos/DRDSunLncropped.png" />
Yetter,
A couple of quick things to help you out here:
Apple Support Open Graph for rich SMS messages only since iOS 10+, so make sure that the device you are testing the sent text message to is at least iOS 10 (or higher)
Apple only supports og:title and og:image. It ignores the rest (so in your example above, og:description is completely disregarded. Furthermore, if your og:image is a gif image, Apple doesn't support that.
Your url in the text message needs to be on it's own "word" meaning there needs to be at least a space between it and any other word in the text. Furthermore, and perhaps most importantly, it needs to specify a scheme, so either: http:// or https://.
You can only have one hyperlink to your site with the og:tags. More than one shuts this functionality down.
Lastly, I don't believe Android supports such rich messaging functionality in it's SMSs (at least not with Open Graph) -- at least as far as I know as of this writing (Nov-2017). It would be great if they adopted OG as a standard.
So for example These wouldn't work:
you were invited. You can join on: grapevite.com //no scheme present
you were invited on http://grapevite.com. Care to join? //Link is between text.
Whereas these would work:
you were invited on Grapevite. http://grapevite.com
http://grapevite.com. The world's premier platform for creating, sharing and joining experiences
Reference Reading:
Some sites like these would provide you with some insight as to the above: https://uplandsoftware.com/mobile-messaging/resources/blog/what-ios-10-means-for-mobile-messaging/
https://www.tatango.com/blog/ios-10-what-sms-marketers-need-to-know-and-do/
A bit of an update for anyone dealing with this mid-2019. I was dealing with this today. I was trying to specify a certain thumbnail to be shown in the rich message preview across Facebook messenger, iOS messages and android messages.
Using actual code from the website I was working on. Be sure to replace content with your own.
These 4 tags made it work for me on Facebook messenger and iOS messages:
<meta property="og:title" content="Software to manage leasing and rental applications" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://geteagle.com.au/products/leasing-tools/" />
<meta property="og:image" itemprop="image" content="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg" />
For some reason, android messages refused to show the thumbnail I specified. I did a lot of research and tried everything I could find in this other question: Showing Thumbnail for link in WhatsApp || og:image meta-tag doesn't work
My tags bloated to 9 (8 meta, 1 link), but it was actually the link tag that made it work in android messages:
<link itemprop="thumbnailUrl" href="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg">
I'm not sure if the other tags are needed in addition to the link tag to make it work on android messages, but here is the full block if you want to try:
<meta property="og:title" content="Software to manage leasing and rental applications" />
<meta property=”og:description” content="Eagle offers a suite of of leasing tools and application management features to power-up your rental team!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://geteagle.com.au/products/leasing-tools/" />
<meta property="og:image" itemprop="image" content="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg" />
<meta property="og:image:secure_url" itemprop="image" content="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg" />
<meta property="og:image:width" content="1000" />
<meta property="og:image:height" content="500" />
<link itemprop="thumbnailUrl" href="https://geteagle.com.au/site/templates/images/logo-og-white-big.jpg">
Many thanks to this particular answer from the question mentioned above that resolved my frustrating situation.
Hope this helps. Good luck!
Running a URL through the Pinterest URL Debugger, and it appears to be caching have old data. Is there a way to force a refresh similar to Facebook's debugger?
I would attempt to clear your browser cache (I'm assuming it's ran in browser).
Maybe it's also using an old cookie, so log out, clear your browser cache/history, then close and open it again. You could also try a different browser to access it.
You could also try changing some old data to see if there is a pinterest db process that's using old data, and an update might refresh it.
Otherwise, you may want to reach out to pinterest support.
OK so it turns out that it was NOT holding on to old information, but rather I was using the incorrect tags for price and currency.
should be og:price:amount and og:price:currency
full documentation for the product type of rich pins: https://developers.pinterest.com/docs/rich-pins/products/
from above, minimum requirements:
<meta property="og:title" content="Name of your product" />
<meta property="og:type" content="product" />
<meta property="og:price:amount" content="1.00" />
<meta property="og:price:currency" content="USD" />
I've read many tutorials, and edited the page correctly.I have all the meta tags that are needed to provide the right image to be picked after a like.
I also ran my site through the debug site, and there it shows the right texts and images. Only not when i try to like it, then i keep getting the wrong thumbnail.
How come?
http://www.verkeersschooltilburg.nl/proeflesfacebook/
<meta property="og:title" content="Gratis proefles!"/>
For right thumbnail to display, when you hit "Like" you must use:
<meta property="og:image" content="http://www.yourdomain.com/yourimage.jpg" />
Maybe it won't work instantly because of cache, try to clear browser cache and wait couple of moments..
I code a news PHP script. End of each news I have a Facebook share button. The problem is I can't display thumbnail images with Facebook share.
I tried Meta OG
<link rel="image_src" href="" />
element without any success. Interesting thing is, some of the domains which is using my news PHP Script, has no problem with it but some has.
Domain without any problems:
http://www.yenialanya.com/manset/vergi-denetmenine-itiraz.htm (please check the bottom of the news)
Domains with problems:
http://www.usakhabermerkezi.com/egitim-ogretim/usak-universitesi-rektorluk-secimleri-sonuclandi-iste-secim-sonuclari.htm
http://www.demokrathaber.net/dunya/dunyanin-ekseni-kaydi.htm
http://www.tebilisim.com/v4/siyaset/benzin-zamlardan-bizde-hosnut-degiliz.htm
I also tried addThis and it didn't solve the problem.
All of the domain names above are using the same system. I thought it might be because of the system so I tried clean HTML page:
http://www.phpsistem.com/fb/
As you can see in the last example, I used 2 different kind of sharing options. First with popup. I sent all parameters over URL but some domains display images, some don't. I also added addThis option.
I also thought about .htaccess and cleaned everything in it since I thought .htaccess might block something. I took every step very carefully which I could think of.
This issue started to be annoying, I would be glad if anyone could help me out.
Use Open Graph protocol
<meta property="og:title" content="The Rock"/>
<meta property="og:type" content="movie"/>
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/"/>
<meta property="og:image" content="http://ia.media-imdb.com/rock.jpg"/>
<meta property="og:site_name" content="IMDb"/>
<meta property="fb:admins" content="USER_ID"/>
<meta property="og:description"
content="A group of U.S. Marines, under command of
a renegade general, take over Alcatraz and
threaten San Francisco Bay with biological
weapons."/>
To test each links use URL Linter
Look at this forum, most of them will ask same questions, why OG image is not working on like button. It's a bug maybe? Bug 16580
Are you using a public server or a local one? Facebook share doesn't show pictures if the URLs are coming from localhost.
Facebook seems to want images that are at least 200px in both directions, whether supplied in the OG metadata, or just embedded on the page. They have updated their URL linter to show this error for the OG metadata recently. I can't find sources now, but I thought they used to have a maximum pixel dimension of less than 200px previously...
Also, I've seen problems displaying thumbnail images for Chrome on OS X, where on Windows browsers there is no problem. Really strange.
Go to http://developers.facebook.com/tools/debug and fill in your url
If the Responscode is 503 then your website is not accessible. It could be that your website is under construction…