WhatsApp에서 링크의 썸네일 표시 || og : 이미지 메타 태그가 작동하지 않음
이 질문을 따르려고 시도했습니다 : whatsapp 링크 공유를위한 사진 제공
기본 Facebook 메타 태그를 사용하여 간단한 HTML 웹 페이지를 만들었습니다.
<!--FACEBOOK-->
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas />
<meta property="og:image" content="http://pollosweb.wesped.es/programa_pollos/play.png" />
Facebook linter가 올바르게 유효성을 검사하고 Facebook에서는 완벽하게 표시되지만 WhatsApp으로 공유하려고하면 이미지가 표시되지 않습니다.
Android의 WhatsApp에서 시도하고 있습니다.
난 당신이 추가 할 필요가 보라 itemprop받는 og:image메타 태그에 이미지 크기가 설정되어 256x256있으며 그것은을 추가 해가되지 것 site_name, type그리고 updated_time두 속성 :
<meta property="og:site_name" content="San Roque 2014 Pollos">
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta property="og:description" content="Programa de fiestas" />
<meta property="og:image" itemprop="image" content="http://pollosweb.wesped.es/programa_pollos/play.png">
<meta property="og:type" content="website" />
<meta property="og:updated_time" content="1440432930" />
예를 들어 Google지도 에서 이러한 메타 태그가 작동중인 것을 볼 수 있습니다 .
메타 태그를 변경 한 후 가능한 캐시가 업데이트 될 때까지 잠시 기다려야 할 수 있습니다.
Facebook 디버거 에서 오픈 그래프 메타 태그를 디버그 / 확인할
수 있습니다. 모든 태그가 표시되면 태그가 제대로 표시되지 않는 사이트 / 앱에 오픈 그래프 태그에 대한 요구 사항이 다를 수 있습니다.
편집 : 링크
로 이미지를 지정 HTTP-Secure하려면 og:image:secure_url대신 을 사용해야 합니다 og:image.
EDIT2 : 네 가지 기본 필수 매개 변수 중 하나이므로
지정해야합니다 og:type.
<meta property="og:type" content="website" />올바른 방향으로 안내해야합니다.
나는 같은 문제가 있었고 문제는 사진의 크기였습니다. Whatsapp은 크기가 300KB보다 큰 사진을 지원하지 않습니다.
따라서 Whatsapp에 이미지를 표시하는 가장 중요한 속성은 다음과 같습니다.
<meta property="og:image" content="url_image">
표시 할 이미지 의 크기는 300KB 미만이어야합니다.
여기에서 해결책을 찾았습니다. Whatsapp 미리보기 링크가 3 월 16 일에 게시되었습니다.
그리고 스크린 샷 전후에
두 종류의 코드가 있습니다. 첫 번째 메타 og : <head> 내부 이미지
<meta property="og:image" content="url_image">
<body> 내부 schema.org의 미리보기 이미지 스키마
<link itemprop="thumbnailUrl" href="url_image">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="url_image">
</span>
이 도움을 바랍니다. 감사.
나도 그 문제에 직면 해 마침내 해결해
<meta property="og:image" itemprop="image" content="http://yourdomain.com/yourfolder/imagename.png" />
내 이미지 속성
- 치수 : 300X200
- 크기 : <300KB
- URL : http://yourdomain.com/yourfolder/imagename.png
이미지 이름에 공백이 없는지 확인하고 두 단어가 있으면 밑줄 기호를 사용하십시오.
이 문제를 해결하기 위해 몇 달을 보낸 후 마침내 문제를 해결했습니다. 내 해결책은 다음과 같습니다.
<!-- MS, fb & Whatsapp -->
<!-- MS Tile - for Microsoft apps-->
<meta name="msapplication-TileImage" content="http://www.example.com/image01.jpg">
<!-- fb & Whatsapp -->
<!-- Site Name, Title, and Description to be displayed -->
<meta property="og:site_name" content="The Rock Photo Studio">
<meta property="og:title" content="The Rock Photo Studio in Florida">
<meta property="og:description" content="The best photo studio for your events">
<!-- Image to display -->
<!-- Replace «example.com/image01.jpg» with your own -->
<meta property="og:image" content="http://www.example.com/image01.jpg">
<!-- No need to change anything here -->
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg">
<!-- Size of image. Any size up to 300. Anything above 300px will not work in WhatsApp -->
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">
<!-- Website to visit when clicked in fb or WhatsApp-->
<meta property="og:url" content="http://www.example.com">
위의 내용을 복사하여 웹 사이트의 헤드 영역에 붙여 넣습니다. Whatsapp 앱을 닫고 다시 연 다음 테스트하십시오. 캐시를 지울 필요가 없으며 데이터를 지울 필요도 없습니다.
모두에게 축복!
whatsapp 데이터 및 캐시를 지우거나 다른 whatsapp을 사용하십시오!
Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.
조심해 ! 이 작업 전에 메시지를 백업하십시오.
그런 다음 결과 : 데이터를 지우고 WhatsApp을 캐시하기 전후 
나는 whatsapp에서 작업하는 데 필요한 최소 메타 태그 수에 대해 모르고 어딘가에서 이것을 발견했으며 이것은 완벽하게 작동했습니다. 참고 : 이미지 해상도는 256 x 256입니다.
<head>
<meta property="og:site_name" content="sitename" />
<meta property="og:title" content="title">
<meta property="og:description" content="description">
<meta property="og:image" itemprop="image" content="http://www.yoursite.com/yourimage.jpg">
<link itemprop="thumbnailUrl" href="http://www.yoursite.com/yourimage.jpg">
<meta property="og:image:type" content="image/jpeg">
<meta property="og:updated_time" content="updatedtime">
<meta property="og:locale" content="en_GB" />
</head>
<body>
<span itemprop="image" itemscope itemtype="image/jpeg">
<link itemprop="url" href="http://www.yoursite.com/yourimage.jpg">
</span>
</body>
https://stackoverflow.com/a/35785393/1518500에 대한 답장
schema.org의 업데이트 된 버전을 사용해보세요.
<span itemprop="image" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="imgurlHere">
<meta itemprop="width" content="1200">
<meta itemprop="height" content="800">
</span>
또는 Google의 json-ld 형식 사용
<script type="application/ld+json">
{
"@context": "http://schema.org/",
"@type": "ImageObject",
"url": "ImgURLhere",
"height": 800,
"width": 1200
}
</script>
For all still having this problem and as for me none of the posted solutions worked out.
I've had the similar issue. The image was showing correctly in all other share dialogs. Only WhatsApp couldnt display the image, even though the facebook debugger has the og:image tag correctly.
The solution that worked for me: I am using firebase. For uploaded content in their storage, you get a unique Download URL with a media token. Something like:
https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY
I used this URL in the og:image meta tag. It worked for Facebook etc., but it seems like WhatsApp couldnt download the image from this URL. Instead you need to include the image in your project directory and use this link for the og:image tag. Now it works properly in WhatsApp too.
Before (not working in WhatsApp, but facebook etc.)
<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">
After (now working in all shared dialogs tested, including WhatsApp)
<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">
Hope it might help some of you :)
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 hope this help:
<meta property="og:title" content="Title goes here">
<meta property="og:site_name" content="Site name">
<meta property="og:image" content="imageURLShouldBeFromSameDomainName">
<meta property="og:image:width" content="640">
<meta property="og:image:height" content="300">
Take note of the imgURL that should be hosted from same domain, or it will not show up on whatsapp. I tried loading a url from amazon, image preview is not working.
In my case, adding the below meta tag solved the problem. I was using Arabic content and had to add this to make the image appear on WhatsApp:
<meta property='og:locale' content='ar_AR' />
Note: If you are using English content, no need to add this meta tag since English is the default value.
You only need to type the message with "http://" at the start. For example: http://www.google.com shows the thumbnail image, but www.google.com no.
Open Graph data:
<meta property="og:title" content="Title of your website | website.com"/>
<meta property="og:type" content="Most popular business directory of Bangladesh"/>
<meta property="og:url" content="http://www.website.com/"/>
<meta property="og:image" content="http://www.moumaachi.com/images/dhaka-city.jpg"/>
<meta property="og:site_name" content="@website"/>
<meta property="fb:admins" content="Author"/>
<meta property="og:description" content="website.com is your online business directory of Country"/>
Only these 3 tags seem to be required (og:title, twitter:description, rel="icon"):
<meta property="og:title" content="San Roque 2014 Pollos" />
<meta name="twitter:description" property="og:description" itemprop="description" content="Programa de fiestas" />
<link rel="icon" type="image/png" href="https://images.weserv.nl/?url=http://pollosweb.wesped.es/programa_pollos/play.png&w=192&height=192" sizes="192x192" />
Experimenting / playing
The easiest way to experiment for me was with CodeSandbox following these steps:
- Create a Vanilla app with https://codesandbox.io/s/
- Modify your meta tags accordingly in the
index.htmlfile - Save the file (
ctrl+s) which would fork the app and generate its own unique url - Paste that url in WhatsApp to see the preview (you don't even need to send a message)
- Make changes to the meta tags
- URL 수정-URL 끝에 단일 문자를 추가합니다. 그러면 "이전 캐시 된 미리보기"가 삭제됩니다.
견적 필요
WhatsApp은 그것에 민감하기 때문에 항상 따옴표와 닫는 따옴표가 있어야합니다. 위의 예에는에 대한 닫는 따옴표가 없습니다 og:description.
'developer tip' 카테고리의 다른 글
| Composer에서 종속성 업데이트가 그렇게 느린 이유는 무엇입니까? (0) | 2020.11.11 |
|---|---|
| Go를 사용하여 빈 구조체를 JSON으로 마샬링하지 않는 방법은 무엇입니까? (0) | 2020.11.11 |
| NVM을 사용하여 기본 노드 버전을 어떻게 설정할 수 있습니까? (0) | 2020.11.11 |
| 순서를 유지하면서 정렬 된 목록을 데이터베이스에 저장하는 가장 좋은 방법 (0) | 2020.11.11 |
| 내 C # 프로그램의 패널 내에서 다른 응용 프로그램을 어떻게 실행할 수 있습니까? (0) | 2020.11.11 |