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...">
Related
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 am using Open Graph meta tags in my HTML code but I am not sure about its(og:image) property with following content:
This are my codes:
<meta property="og:title" content="Donya Internatioanl group"//>
<meta property="og:url" content="https://dig.af/" />
<meta property="og:image" content="~/Images/myImage.jpg" />
<meta property="og:type" content="website" />
<meta property="og:description" content="Some description about this image" />
<meta property="og:locale" content="fa_GB" />
<meta property="og:site_name" content="DIG" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
Please help me whether this link to image is correct or no:
<meta property="og:image" content="~/Images/myImage.jpg" />
specially its content, or I have to write it like This:
<meta property="og:image" content="https://mywebsite.net/assets/opengraph/theogimage.jpg"/>
You have to use the full path, so:
<meta property="og:image" content="https://mywebsite.net/blah/image.jpg/>
would be the correct way. The content has to refer to an URL that Facebook can access and download your image from.
Image meta data is getting a "was not a valid URL." error
Here is the code:
<meta property="og:title" content="The Separation Club">
<meta property="og:description" content="Your separation journey begins here.">
<!-- <meta property="og:image" content="http://www.theseparationclub.com/images/elisabeth-option1.jpg"> -->
<meta property="og:url" content="https://theseparationclub.com">
<meta property="og:image:url" content="{% static 'https://www.theseparationclub.com/images/elisabeth-option1-crop.jpg' %}"/>
<meta property="og:image:secure_url" content="{% static 'https://www.theseparationclub.com/images/elisabeth-option1-crop.jpg' %}"/>
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="600"/>
<meta property="og:image:height" content="600"/>
The url will open the image in a browser so it is valid. Any idea why this might not be working?
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.
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="...">