I created a web app using flutter and hosted that using firebase. With firebase I got a hosting url as app-name.web.app
SO is there a way to add an image preview whenever I share that url on social media?
In the image below, 1st url doesn't have any preview image, and in the second url we can see the image preview.
I think you mean the <meta property="og:image" content="<URL to your image>"> tag
This tags are used for social media sharing. There are several more.
og:title – Title of the page
og:image – URL to your image --> this is what you want to use
og:type – Type (eg. article)
og:url - URL to this specific page
Have a look at Open Graph protocol
Add the tags you need to your web/index.html.
Related
Issue: LinkedIn does not generate a thumbnail image when sharing a blog post. Here’s an example blog post: https://blog.terkel.io/12-tips-to-improve-underperforming-blog-posts/
We have:
Upgraded to the latest version of the Yoast SEO plugin
Shared the url to Facebook and confirmed that the thumbnail image displays on their platform
Viewed the source code to determine that the og:image appears, and the media file can render
Analyzed the LinkedIn Post Inspector and determined that they are not detecting an image (image not found; same with the publish date field)
Our site has all the required meta tags for sharing on social media; see their recommendation at https://www.linkedin.com/help/linkedin/answer/a521928. So it’s unclear why LinkedIn isn't picking those up.
What solutions would be recommended to get a thumbnail image to be detected and displayed on LinkedIn?
Your og:image is a .webp file. Use a JPEG or PNG; in my experience, LinkedIn doesn't support WEBP images.
I'm using Facebook opengraph API in my html page meta tags.
I've given the url of the image in the og:image property, but when I share the page in FB, it's not showing the image.
But, after the first time, when I share the article again, the image appears.
Can any one explain why it is happening?
When I share the same article in whatsapp it is showing the image for the first time only.
Thanking you in advance.
Facebook has a cache of scraped links, and the first time you're sharing the link, the image isn't available in FB cache.
You can use the FB precaching tool to "force" a first scrape of your page, or you can add og:image meta tags to your page:
<meta property="og:image:width" content="300"/>
<meta property="og:image:height" content="300"/>
Read the link above for more information about FB sharing.
Be sure to check how FB "see" your page using the debugger.
if i share the blog post in facebook it shows the following like image. My blog in wordpress and i also check in the facebook debug mode.
in facebook debug mode it shows the following error
Check you theme header for tag
<meta property="og:image" content="http://../share.jpg" />
If you this tag are missing you should add this and add link to static image or post featured image.
If you find this tag twice, you should remove one. Also this can be fixed by installing Yoast SEO plugin.
I would like to add post's preview image to facebook Open Graph meta tag.
One possible solution is to use data:blog.postImageThumbnailUrl:
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
However, the default post image thumbnail which is created by Blogger is too small (72px × 72px), and it doesn't look really nice when facebook tries to stretch it while creating the post's story based on this image thumbnail (facebook says "all the images referenced by og:image must be at least 200px in both dimensions").
So, the question is:
is there any way to retrieve somehow the image's url from the post's body and insert it into facebook Open Graph meta tag which was mentioned above?
(let's say every post of my blog has image tag inside its body:
http://loveclubhouse.blogspot.com/)
Yes! You can. It's kind of sloppy looking, but functional. Here the og:image property from my blog. As you see it is actually grabbing an image from my Facebook profile:
<meta content='http://sphotos.xx.fbcdn.net/hphotos-ash3/538645_3357819035748_1577184006_2624573_712999292_n.jpg' property='og:image'/>
When you load an image from your photo library in Facebook, you can usually right click on it and select "View Image". When you do that, you'll see the URL to the actual image as it is stored by Facebook. So long as the image is publicly accessible, there won't be any problems.
You can see it in action at my blog if you decide to click Recommend (the current page) or Like (of an individual post). :)
I use facebook share button for every post in my blog.
(http://loveclubhouse.blogspot.com/)
When there was no Open Graph meta tag included in my blog, facebook would retrieve the first picture from the post's page to make a preview story on the sharer's wall for this post.
Once, I added an Open Graph image meta tag to my blog:
<meta expr:content='data:blog.postImageThumbnailUrl' property='og:image'/>
However, the size of postImageThumbnails turned out to be too small, so I decided not to use them anymore and removed the above metnioned Open Graph meta tag from my blog.
The problem is:
Even though I removed all Open Graph meta tags from my blog, facebook still somehow creates preview stories for my posts based on those tiny data:blog.postImageThumbnailUrl and doesn't want anymore to retrieve the first pictures from posts content as it was before I made any changes in my blog.
Try facebook debugger tool, it deletes the cache as well.