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 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">
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
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...">
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.
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="...">