villabell.blogg.se - Current media meta message

#CURRENT MEDIA META MESSAGE FULL#
#CURRENT MEDIA META MESSAGE CODE#
#CURRENT MEDIA META MESSAGE DOWNLOAD#

use full path, relative path won't work.Facebook’s privacy settings are confusing.

og:image domain should match with your website's domain, you cannot use image link of another website.

In my case page url was but my og:url was

Make sure page url is equal to what you are passing in og:url.

If your website is https make sure your image url should also have https.

Width of the image should be 600px maximum, it's fine if height is less than 600px but maximum it should be 600px.

Image should be less than 200kb in size.

It's fine if you don't include og:image:width and og:image:height meta tags. Your above example does not have a closing quote for your og:description.

Just be sure to ALWAYS have quotes and closing quotes because WhatsApp is sensitive to that. This discards the "previous cached preview" Modify the url - add a single character at the end of the url.Paste that url in WhatsApp to see the preview (you don't even need to send a message).Save the file ( ctrl+s) which would fork the app and generate its own unique url.Modify your meta tags accordingly in the index.html file.The easiest way to experiment for me was with CodeSandbox following these steps: Only these 3 tags seem to be required ( og:title, twitter:description, rel="icon"):

#CURRENT MEDIA META MESSAGE CODE#

eg Īs I experienced, these meta tags are required and effect on what you see on shared link in Whatsapp and WhatsApp-thumbnail : ġ- Suppose you have and inside body you refer to Hello whatsApp, the og:image and og:description of page /page2 wil be rendered on whatsApp as you referred on your link in body (maybe obvious).Ģ-When you add/change any open graph tags such as og:description, and again you click your tag on your page/body, what you see on WhatsApp doesn't change unless you change the href="I am a new URL" of your tag or clear cache of WhatsApp !!ģ-I tried Png/jpg images, all less than 300 kb in size and all bigger than 300*300 in pixels, and image content was a https or a http url, the above code supports both of them ( No need to og:image:secure_url).Ĥ-Each time you add/change og contents, to have a thumbnail on WhatsApp, the changes doesn't affect on first try !! and successful on second try. In mobile browser paste direct link to the OG thumb and refresh the browser 4-5 times.

Force stop the mobile app ( I tried in Android) and try againī.Use online tool to preview the OG tag eg I used : Ĭ. I observed that based on hosting provider and browser combination error may or may not occur, so to be safe its easier to just match the case of file extension.ģ.After doing above steps if the thumbnail preview is still not showing up in WhatsApp message then:Ī. don't use images/OG_thumb.jpgĢ.Case sensitive file extension: If the image extension name on your hosting provider is ".JPG" then do not use ".jpg" or ".jpeg'. These 8 tags ( 6 in head, 2 in body) worked perfectly.ġ.Use the exact image location URL instead of directory format i.e. Here are the 8 html tags that I used on my web page to get the preview working : Had the same issue, I finally got it working after some trying. Now it works properly in WhatsApp too.īefore (not working in WhatsApp, but facebook etc.) Īfter (now working in all shared dialogs tested, including WhatsApp) Instead you need to include the image in your project directory and use this link for the og:image tag.

#CURRENT MEDIA META MESSAGE DOWNLOAD#

It worked for Facebook etc., but it seems like WhatsApp couldnt download the image from this URL. I used this URL in the og:image meta tag. For uploaded content in their storage, you get a unique Download URL with a media token. Only WhatsApp couldnt display the image, even though the facebook debugger has the og:image tag correctly. The image was showing correctly in all other share dialogs. No need to clear cache, and NO NEED TO CLEAR DATA.įor all still having this problem and as for me none of the posted solutions worked out. Here is my solution: Ĭopy the above, paste in head area of website.ĬLOSE your Whatsapp app, re-open, THEN test. You also need to specify og:type as it is one of the four base required parameters.Īfter spending months trying to figure this out, I finally solved the issue. If you are going to specify an image by a HTTP-Secure link, you need to use og:image:secure_url instead of og:image. If you can see all your tags there, then the sites/apps where your tags are not showing properly might have different requirements for Open Graph tags. You can debug/verify Open Graph meta tags from the Facebook Debugger You can see these meta tags in action on for example Google Maps.Īfter you have changed your meta tags, you might need to wait a while for possible caches to update. I belive you need to add itemprop to the og:image meta tag, have the image size set to 256x256 and also it would not harm to add the site_name, type and updated_time properties either :)