How to insert site preview image for Facebook AND WhatsApp simultaneously? - html

I know how to use Open Graph meta tags in head of HTML. Example:
<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image:secure_url" content="https://sitename.com/img/tutorial.png"/>
But if a type of preview image is good for WhatsApp, it's not good for Facebook! So how should you set meta tags for different platforms at the same time? Thanks

You can specify two (or more) Open Graph images, the first, a rectangular image for FB and the second, a square image for WhatsApp.
<meta property="og:type" content="website">
<meta property="og:url" content="https://sitename.com/">
<meta property="og:title" content="My blog"/>
<meta property="og:description" content="Tutorial..."/>
<meta property="og:image" content="https://sitename.com/img/tutorial_1200-600.png"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>
<meta property="og:image" content="https://sitename.com/img/tutorial_400-400.png"/>
<meta property="og:image:width" content="400"/>
<meta property="og:image:height" content="400"/>
WhatsApp uses the last image.

Related

Why is this Meta Embed Image not showing?

Why is this Meta Embed Image not showing when sharing the site link? It used to work but suddenly stopped for some reason
<meta property="og:title" content="Site List">
<meta property="og:description" content="Something">
<meta property="og:type" content="website">
<meta name="og:image" itemprop="image" content="https://spiritaxolotl.github.io/images/faces/spax/Smirk.png">

open graph og: tags with url as meta or link

Using the open graphs usualy looks like
<meta property="og:title" content="title">
<meta property="og:site_name" content="sitename">
<meta property="og:url" content="https://example.com/de/">
<meta property="og:description" content="site description">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.png">
Note: The language of the site is set with /de/ or /en/ and so on.
Now, the structured data linter tells me
"#de not compatible with range (ogc:url)"
Searching for a solution brought me this git:
[https://github.com/structured-data/linter/issues/49][1]
There its the solution to use <link /> with attribute href="https://..." instead of <meta /> with attribute content="https://..." for URLs.
I've done that, code now looks like this:
<meta property="og:title" content="title">
<meta property="og:site_name" content="sitename">
<link property="og:url" href="https://example.com/de/">
<meta property="og:description" content="site description">
<meta property="og:type" content="website">
<meta property="og:image" content="https://example.com/image.png">
And now the linter tells me
"class ogc:url: No class definition found"
... i'm a bit confused :-P
[1]: https://github.com/structured-data/linter/issues/49

How to get link card using meta

I have a web site with a few pages and for example if I want to share with somebody one of my link and send it via whatsapp, I need to see logo and some text in my message. [as it on this image]
How can I do that?
I just have found this sample:
<link rel="shortcut icon" href="img/img.svg">
<link rel="apple-touch-icon image_src" href="img/img.svg">
<meta name="twitter:title" property="og:title" itemprop="name" content="Link to source">
<meta name="twitter:description" property="og:description" itemprop="description" content="Mycontent">
You have to add some meta tags.
<meta property="og:site_name" content="Your site name">
<meta property="og:title" content="Page title" />
<meta property="og:description" content="Page description" />
<meta property="og:image" itemprop="image" content="your_page_image.png">
<meta property="og:type" content="website" />
You can try your code with : https://cards-dev.twitter.com/validator
<head>
<meta property="og:type" content="website">
<meta property="og:url" content="https://stackoverflow.com/questions/54984552/how-to-get-link-to-source-using-htm-css">
<meta property="og:site_name" content="Stack Overflow">
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://cdn.sstatic.net/Sites/stackoverflow/img/apple-touch-icon#2.png?v=73d79a89bded">
<meta name="twitter:card" content="summary">
<meta name="twitter:domain" content="stackoverflow.com">
<meta name="twitter:title" property="og:title" itemprop="name" content="How to get link to source using htm css">
<meta name="twitter:description" property="og:description" itemprop="description" content="I have a web site with a few pages and for example if I want to share with somebody one of my link and send it via whatsapp, I need to see logo and some text in my message. [as it on this image] H...">

facebook og:video not working

I have .mp4, and am trying to post using meta tags for content of post.
The Facebook Debugger agrees I have the following..
<meta property="og:type" content="video.other">
<meta property="og:title" content="This is the title for a test post">
<meta property="fb:app_id" content="<app_id>">
<meta property="og:description" content="Test">
<meta property="og:video" content="https://<url_for_mp4>">
<meta property="og:video:secure_url" content="https://<url_for_mp4>">
<meta property="og:video:type" content="video/mp4">
<meta property="og:video:width" content="1200">
<meta property="og:video:height" content="630">
When rendering this Facebook just shows the title & description
Any help appreciated.

Image is not showing up in Whatsapp link

I want to display the image when I paste the link of webpage to whatsapp. But somehow it's not showing up there. I've been able to show the description but image is not showing till yet. I have tried all the snippets on so but couldn't be succeeded somehow. Any help will be appreciated. Thanks.
Code:
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Title</title>
<meta name="description" content="description of my website">
<meta property="og:title" content="title of my page heading" />
<meta property="og:url" content="http://www.example.com/example.php" />
<meta property="og:description" content="desc">
<meta property="og:image" itemprop="image" content="http://urlOfmyimage.jpg">
<meta itemprop="width" content="256">
<meta itemprop="height" content="256">
<meta property="og:type" content="article" />
thanks to your question, I did some research and solved it.
you need an image less than 50 or 100 kb.
<meta property="og:type" content="...">
<meta property="og:url" content="...">
<meta property="og:title" content="...">
<meta property="og:image" content="...jpg">
<meta property="og:description" content="...">
<meta property="og:site_name" content="...">