WhatsApp 링크 공유를위한 이미지 제공

WhatsApp 링크 공유를위한 이미지 제공

---

이와 같은 링크를 공유 할 때 WhatsApp에 표시 할 웹 사이트에 이미지를 어떻게 포함시킬 수 있습니까?

---

2019 년 표준

PC 및 모바일 장치의 WhatsApp, Twitter, Facebook 및 책갈피 아이콘에 대한 완벽한 미리보기를 얻으려면 몇 가지 단계가 필요합니다. 읽는 것을 좋아한다면 ogp.me 로 가십시오 . 그러나 최고의 WhatsApp 미리보기를 얻으려면이 답변의 1-6 단계를 읽으십시오.

참고 : 일부 앱 또는 웹 사이트는 캐시를 사용하거나 심지어 웹 사이트 미리보기를 데이터베이스에 저장합니다. 이는 예를 들어 WhatsApp 또는 Facebook에서 링크를 테스트 할 때 가장 큰 차이는 없을 것입니다. 다른 링크 (다른 페이지)를 사용하면 트릭을 수행합니다. 그러나 해당 링크를 한 번 사용하면이 "주의하시기 바랍니다" 섹션이 다시 시작됩니다.

---

1 단계 : 제목

최대 65 자

<title>your keyword rich title of the website and/or webpage</title>

---

2 단계 : 설명

최대 155 자

<meta name="description" content="description of your website/webpage, make sure you use keywords!">

---

3 단계 : og : title

최대 35 자

<meta property="og:title" content="short title of your website/webpage" />

---

4 단계 : og : url

현재 웹 페이지 주소에 대한 전체 링크

<meta property="og:url" content="https://www.example.com/webpage/" />

---

5 단계 : og : 설명

최대 65 자

<meta property="og:description" content="description of your website/webpage">

---

6 단계 : og : image

크기가 300KB 미만이고 최소 크기가 300 x 200 인 이미지 (JPG 또는 PNG)

<meta property="og:image" content="//cdn.example.com/uploads/images/webpage_300x200.png">

위 단계를 완료하면 WhatsApp에서 미리보기를 볼 수 있습니다! 의주의 "plase 노트" 하지만, 섹션.

---

7 단계 : og : type

그래프 내에서 객체를 나타내려면 유형을 지정해야합니다. 여기에 사용할 수있는 글로벌 유형의 목록은 다음과 같습니다 http://ogp.me/#types . 자신의 유형을 지정할 수도 있습니다.

<meta property="og:type" content="article" />

---

8 단계 : og : locale

자원의 로케일. 다른 언어로 번역 할 수있는 경우 og : locale : alternate를 사용할 수도 있습니다.

og : locale을 지정하지 않으면 기본값은 en_US입니다.

<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />

---

9 단계 : 트위터

최고의 트위터 지원을 위해 이것을 읽으십시오 .

---

10 단계 : Facebook

최고의 페이스 북의 지원을 읽고 이 .

---

11 단계 : 파비콘

모든 브라우저 및 장치에 대한 최상의 즐겨 찾기 아이콘 지원을 보려면 이 내용을 읽으십시오 .

---

보너스 단계 12 : 비디오 / 오디오

오디오 / 비디오를 공유 할 수도 있습니다. 예를 들어 Facebook과 Twitter는 비디오를 매우 잘 공유합니다. ogp.me를 읽으 십시오 .

---

나는 같은 문제가 있었고 문제는 그림의 크기였습니다. Whatsapp는 300KB보다 큰 사진을 지원하지 않습니다.

Whatsapp에 이미지를 표시하는 가장 중요한 속성은 다음과 같습니다.

<meta property="og:image" content="url_image">

표시 할 이미지 의 크기는 300KB보다 작아야합니다 .

문제가 지속되면 이 비슷한 질문에 대한 답변도 읽으십시오

---

whatsapp에는 화이트리스트가 없다고 생각합니다. 나에게 맞는 솔루션을 찾았습니다. 다음과 같이하십시오. 메타 태그 3 개 삽입 :

<meta property="og:image" content="http://yourimage_with_complete_URL.png"/>  
<meta property="og:title" content="Your Title"/>  
<meta property="og:description" content="Your description."/>  

Your image must be in .png format and 600x600px dimension and must be named 'logo-yoursite.png' (once it worked for me JUST LIKE THAT)

Dont forget to insert the link to whatsapp in your website:

<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>

Do this and you'll be well done!

---

I documented the perfect detailed solution here - https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html There are seven steps to be done to get the perfect preview.

Title : Add Keyword rich title to your webpage with maximum of 65 characters.

Meta Description : Describe your web page in a maximum of 155 characters.

og:title : Maximum 35 characters.

og:url : Full link to your webpage address.

og:description : Maximum 65 characters.

og:image : Image(JPG or PNG) of size less than 300KB and minimum dimension of 300 x 200 pixel is advised.

favicon : A small icon of dimensions 32 x 32 pixels.

In the above page, you have the required specifications, the character limit and sample tags. Do upvote once you find it satisfactory.

---

I've been trying to do this myself as well and I've added all the right meta tags :

<meta property="og:image" itemprop="image" content="image_url" />
<meta property="og:image:url" itemprop="image" content="image_url" />
<meta property="og:image:type" content="image/png" />

but yet could not see the image when sharing my link within WhatsApp.

I've discovered that WhatsApp also does some kind of caching of the image and the url info, dont know for how long.

To check that I've inserted the correct tags, I just tried different url, for example : http://domain.com instead of http://www.domain.com .

hopefully this helps to someone else.

---

After working in a bugg, found out that in IOS, elements in HEAD might stop the WhatsApp search of the og:image /og:description / name=description. So try first to put them on top of everything else.

This doesn't work

<head>
    <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>

    <meta property="og:description" content="description" />
    <meta property="og:image" content="http://cdn.some.com/random.jpg" />
</head>

This work:

    <head>
        <meta property="og:description" content="description" />
        <meta property="og:image" content="http://cdn.some.com/random.jpg" />

        <div id='hidden' style='display:none;'><img src="http://cdn.some.com/random.jpg"></div>
    </head>

---

I'd recommend always have a look at https://developers.facebook.com/tools/debug/sharing to validate your properties as Facebook often changes it's policies, compliances and API.

If you work with Messenger bots or other FB apps, you may need the property fb:app_id for link images to work in Whatsapp. More at Facebook developers webmasters site. https://developers.facebook.com/docs/sharing/webmasters

---

I had the same problem, here is to solve.

It should be show up if you add meta og:image

The problem is whatsapp would not show image if you type without http:// and end with / For example, it show up image and description if you type http://google.com/ but not with google.com

Hope it helps someone.

---

If you want to have a picture next to an url from your website someone shared on WhatsApp, you have to put a metatag on the page where the URL links to, like this:

<meta property="og:image" content="http://unrestrictedstock.com/wp-content/uploads/Unrestricted-Stock-Small.png"/>

---

Had same issue, added og:image and it didn't work while the url end with slash sign (/). After removing the slash from the URL - the image get loaded.. Interesting bug...

---

Following actions helped in my case.

Putting image under the same host.

<meta property="og:url" content="https://www.same-host.com/whatsapp-image.png" />

Passing needed image to WhatsApp specifically by detecting its user agent by leading substring, example

WhatsApp/2.18.380 A

Waiting few seconds before actually pushing send button, so WhatsApp will have time to retrieve image and description from og metadata.

---

Even after these tries. My website images were fetched some times and sometimes not. After validating with https://developers.facebook.com/tools/debug/sharing

realised that my django (python) framework is rendering the image path relatively. I had to make changes to the path of the image with full url. (including http://). then it started working

---

You need the following tags to get a WhatsApp image preview:

<meta property="og:title" content="Website name" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://url.com/" />
<meta property="og:description" content="Website description" />
<meta property="og:image" content="image.png" />
<meta property="og:image:width" content="600" />
<meta property="og:image:height" content="600" />

As Facebook docs says, if you specify the og:image size it will be fetched fastly instead of asynchronously otherwise.

PNG is recommended for image format. 600x600 pixels at least is recommended.

참고 URL : https://stackoverflow.com/questions/19778620/provide-an-image-for-whatsapp-link-sharing