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!
Related
I'm wanting to put my OpenGraph properties into a shared view to be used across multiple pages however Facebooks sharing debugger is giving me back errors despite following the open graph documentation.
The Code
<head>
<meta property="og:image" content="www.myimage.co.uk/images/image.png"/>
<meta property="og:title" content="#ViewBag.Title">
<meta property="og:site_name" content="...">
<meta property="og:url" content="www.myimage.co.uk/">
<meta property="og:description" content="...">
<meta property="og:type" content="website">
</head>
Facebook debugger
When I submit my url into the debugger and press debug, and even scrape again to make sure it's giving me back this error:
Inferred Property
The 'og:image' property should be explicitly provided, even if a value can be inferred from other tags.
I've also inspected my webpage in the browser and the code is exactly as stated above. Is there something obvious that I'm missing?
Edit:
Using the 'scraped url' option on Facebook's debugger, it shows that the meta tag's aren't being picked up by Facebook's scraper - is there a way of ensuring that this data is picked up by a scraper?
From time to time Twitter Card Validator shows an error for twitter:image:src - Failed to get a proxied URL for the image.
Domain is approved, robotx.txt is present in web root. Twitterbot successfully retrieves robots.txt, web page and image, but image is not shown in the Twitter Card.
Source page: http://www.bluefountainmedia.com/blog/how-to-create-great-content-for-your-business-blog/
Twit: https://twitter.com/mstzfort/status/363004775891087361
Metatags:
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="#BFMWeb">
<meta name="twitter:url" content="http://www.bluefountainmedia.com/blog/how-to-create-great-content-for-your-business-blog/" />
<meta name="twitter:title" content="How to Create Great Content for your Business Blog">
<meta name="twitter:description" content="In case you hadn’t already noticed, 2013 is all about content. Check out 7 content Ideas (+1 bonus) to help come up with great content for your business blog.">
<meta name="twitter:image:src" content="http://www.bluefountainmedia.com/blog/wp-content/uploads/2013/06/Business-Blog-Content-197x110.jpg">
So, the question - how to show images in twitter cards?
Is it posible to avoid screen rotation on web mobile with the viewport meta property? Our website should only be viewed in portrait mode always.
<meta name="viewport" content="width=device-width" />
Thanks.
No, this is totally dependent on your user agent and the platform on which it is runnung.
But you can make sure that they wouldn't mess in your page, if it is written in the head section properly.
<meta name="viewport" content="initial-scale=1.0,user-scalable=no,maximum-scale=1,width=device-width" />
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
When I want to share a site on facebook and want to add a custom image it doesn't work. It always gives the same image (one that is somewhere on the web page).
This is the code I've used:
<html>
<head>
<meta property="og:title" content="Title" />
<meta property="og:type" content="website" />
<meta property="og:url" content="http://www.the-website.com" />
<meta property="og:image" content="http://url-to-image.com" />
<meta property="og:site_name" content="The content" />
</head>
<body>
<h1> Facebook Like </h1>
<iframe src="http://www.facebook.com/plugins/like.php?href=http%3A%2F%2Fwww.the-website.com%2F&send=false&layout=button_count&width=450&show_faces=true&action=like&colorscheme=light&font&height=21" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:450px; height:21px;" allowTransparency="true"></iframe>
</body>
</html>
If you try running the page through Facebook linter - http://developers.facebook.com/tools/lint/ - it may show up some issue.
Did you read it ? http://developers.facebook.com/docs/reference/plugins/like/
There is a "code generator" which would do all coding for you. Try it, then copy&paste the code...
As for your code:
- in this case - to have a like on a page - there is no meta needed (your example's meta are not needed).
- you have probably something wrong inside src tag: my guess is to REMOVE the "font&" part, but this might be wrong...
In any case... just use the link I provided...
I had the same problem. What I did was, I just removed the entire line " <meta property="og:image" content="xxxxxxx" /> " . This will push the facebook crawler to scan for every images in the page. Now place the image you want to add somewhere in the page with width=1 and height=1. Users won't recognise this in your page. But this image will be scanned by the crawler and you can select it to show it on our page. This worked for me. I don't know whether it will work for you or not.
NB: This is just a workaround, not a good solution