이 질문을 따르려고 시도했습니다. 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에서 시도하고 있습니다.
content="./images/logo.png"?
답변:
난 당신이 추가 할 필요가 보라 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" />올바른 방향으로 안내해야합니다.
itemprop="image". 오류 메시지 :Cannot GET /logos/logo_512.png
property="og:image:secure_url"대신 사용해야 합니다.property="og:image"
나는 같은 문제가 있었고 문제는 그림의 크기였습니다. Whatsapp은 크기가 300KB보다 큰 사진을 지원하지 않습니다.
따라서 Whatsapp에 이미지를 표시하는 가장 중요한 속성은 다음과 같습니다.
<meta property="og:image" content="url_image">
표시 할 이미지 의 크기는 300KB 미만이어야합니다.
itemprop="image"도 og:image:secure_url특성을.
나도 그 문제에 직면 해 드디어 해결했다
<meta property="og:image" itemprop="image" content="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 미리보기 링크가 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>
이 도움을 바랍니다. 감사.
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>
whatsapp 데이터 및 캐시를 지우거나 다른 whatsapp을 사용하십시오!
Android Phone : Go to SETTINGS > APPS > Application List > WhatsApp > Storage and Clear Data.
조심해 ! 이 작업 전에 메시지를 백업하십시오.
그런 다음 결과 : 데이터를 지우고 WhatsApp을 캐시하기 전후
https://link.com/?_=92375293579
추가 유용한 정보 :
여러 og : images를 제공 할 수 있으며 whatsapp은 마지막 이미지를 사용합니다. 이것은 예를 들어 facebook이 1.91 : 1 비율과 whatsapp 1 : 1을 원하는 문제에 도움이 될 것입니다.
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>
여전히이 문제가있는 모든 사람들에게 게시 된 솔루션 중 어느 것도 해결되지 않았습니다.
비슷한 문제가 있습니다. 다른 모든 공유 대화 상자에서 이미지가 올바르게 표시되었습니다. Facebook 디버거에 og : image 태그가 올바로 있더라도 WhatsApp 만 이미지를 표시 할 수 없습니다.
나를 위해 일한 솔루션 : 저는 firebase를 사용하고 있습니다. 저장소에 업로드 된 콘텐츠의 경우 미디어 토큰이 포함 된 고유 한 다운로드 URL을 얻습니다. 다음과 같은 것 :
https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/ ? alt = media & token = YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY
og : image 메타 태그에이 URL을 사용했습니다. Facebook 등에서 작동했지만 WhatsApp이이 URL에서 이미지를 다운로드 할 수없는 것 같습니다. 대신 프로젝트 디렉토리에 이미지를 포함하고 og : image 태그에이 링크를 사용해야합니다. 이제 WhatsApp에서도 제대로 작동합니다.
이전 (WhatsApp에서 작동하지 않지만 페이스 북 등)
<meta property="og:image" itemprop="image" content="https://firebasestorage.googleapis.com/v0/b/XXXX.XXXXXXX.com/your_image?alt=media&token=YYYYYYYY-YYYYYYYYYY-YYYYYYYYYYYYY">
이후 (현재 WhatsApp을 포함하여 테스트 된 모든 공유 대화 상자에서 작동)
<meta property="og:image" itemprop="image" content="https://domain_name/path_to_image">
당신 중 일부를 도울 수 있기를 바랍니다 :)
여기에 완벽한 세부 솔루션을 문서화했습니다. https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html 완벽한 미리보기를 얻으려면 7 단계를 수행해야합니다.
제목 : 최대 65 자까지 웹 페이지에 키워드 리치 제목을 추가합니다.
메타 설명 : 웹 페이지를 최대 155 자로 설명합니다.
og : title : 최대 35 자.
og : url : 웹 페이지 주소에 대한 전체 링크입니다.
og : description : 최대 65 자.
og : image : 이미지 (JPG 또는 PNG) 크기는 300KB 미만, 최소 크기는 300 x 200 픽셀이 좋습니다.
favicon : 32 x 32 픽셀 크기의 작은 아이콘입니다.
위 페이지에는 필수 사양, 글자 수 제한 및 샘플 태그가 있습니다. 만족 스러우면 찬성 투표를하세요.
이 도움이되기를 바랍니다.
<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">
동일한 도메인에서 호스팅되어야하는 imgURL을 기록해 두십시오. 그렇지 않으면 whatsapp에 표시되지 않습니다. 아마존에서 URL을로드하려고했는데 이미지 미리보기가 작동하지 않습니다.
시작 부분에 "http : //"가있는 메시지 만 입력하면됩니다. 예 : http://www.google.com 은 미리보기 이미지를 표시하지만 www.google.com은 없습니다.
오픈 그래프 데이터 :
<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"/>
오직이 3 개 태그가 필요한 것 같다 ( 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" />
나를 위해 가장 쉬운 실험 방법은 다음 단계에 따라 CodeSandbox를 사용하는 것입니다.
index.html파일 에서 적절하게 메타 태그를 수정하십시오.ctrl+s앱을 포크하고 고유 한 URL을 생성 하는 파일 ( )을 저장합니다.WhatsApp은 그것에 민감하기 때문에 항상 따옴표와 닫는 따옴표가 있는지 확인하십시오. 위의 예에는에 대한 닫는 따옴표가 없습니다 og:description.
<meta property=og:title content="Immaculate 4 Bed Townhouse Victory">입니다.. 이어야합니다 <meta property="og:title" content="Immaculate 4 Bed Townhouse Victory">. HTML 플러그인과 함께 Webpack을 사용하는 경우minify.removeAttributeQuotesfalse
<head>섹션을 바닐라 앱에 복사하기 만하면 됩니다. 웹 사이트의 원시 html을 얻으려면 "페이지 소스보기"옵션을 사용하십시오 (Chrome에서는 CTRL + U).
여전히 이것을 경험하는 사람에게는 Amazon S3에서 제공 되는 이미지 가 WhatsApp 모바일 앱에서 작동하지 않는다는 것을 발견 했습니다 (Android와 iOS 모두 가능하지만 Mac 데스크톱 앱은 괜찮음). 그것은 우리의 AWS 설정이 원인이 매우 가능성이 있지만, 나는뿐만 아니라 다른 사이트에서 패턴 (예를 들어, 발견 이 하나 가와 og:image도메인 같은 타격을 https://s3.amazonaws.com).
내가 시도한 다른 플랫폼에는 문제가 없었으며 WhatsApp 모바일 앱만 있습니다. 내가 지적하자마자<meta property="og:image" content="https://some-non-aws-location" />Google 드라이브 파일 (물론 공개적으로 공유 됨)과 같은 다른 공개 URL을 제대로 작동했습니다.
또한 사용자 지정 도메인을 사용하여 AWS에서 호스팅 및 배포되는 리포지토리에서 이미지 커밋을 시도했지만 작동하지 않았습니다. 따라서 AWS가 여전히 범인 인 것 같습니다. 이것이 누군가를 돕기를 바랍니다!
이 모든 팁 후에도 썸네일이 여전히 표시되지 않으면 다음을 시도하십시오.
내 문제는 프로덕션을 위해 빌드 할 때 og 속성의 큰 따옴표가 제거되었다는 것입니다 (npm run build). Minify 모듈이 그렇게했습니다.
따라서 해결책은이 제거를 취소하고 removeAttributeQuotes 속성을 false로 설정하는 것입니다.
minify: {
...
removeAttributeQuotes: false,
...
}
제 개발 환경에서 "webpack.prod.conf.js"파일에 설정했습니다. 동등한 파일에서 설정하십시오.
다시 빌드하면 이제 작동합니다.
여기에있는 답변의 모든 지침을 따랐지만 여전히 작동하지 못했습니다. WhatsApp이 이미지를 표시하려면 확장 프로그램이 필요한 것 같습니다.
따라서 jpeg를 가리키는 태그의 경우 :
<meta property="og:image" itemprop="image" content="https://example.com/someimageid"/>
확장을 허용하고 다음을 사용하도록 API를 변경하십시오.
<meta property="og:image" itemprop="image" content="https://example.com/someimageid.jpeg"/>
그리고 그것은 작동하는 것 같습니다 ...
같은 문제가 있었는데, 마침내 몇 가지 시도 후에 작동했습니다. 다음은 미리보기를 사용하기 위해 웹 페이지에서 사용한 8 개의 html 태그입니다.
에 <head>태그 :
<meta property="og:title" content="ABC Blabla 2020 Friday" />
<meta property="og:url" content="https://bla123.neocities.org/mp/friday.html" />
<meta property="og:description" content="Photo Album">
<meta property="og:image" itemprop="image" content="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG"/>
<meta property="og:type" content="article" />
<meta property="og:locale" content="en_GB" />
에 <body>태그 :
<link itemprop="thumbnailUrl" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
<span itemprop="thumbnail" itemscope itemtype="http://schema.org/ImageObject">
<link itemprop="url" href="https://bla123.neocities.org/mp/images/thumbs/IMG_327.JPG">
</span>
이 8 개의 태그 (머리에 6 개, 몸에 2 개)가 완벽하게 작동했습니다.
팁 :
1. 디렉토리 형식 대신 정확한 이미지 위치 URL을 사용하십시오. 즉 images / OG_thumb.jpg를 사용하지 마십시오.
2. 대소 문자 구분 파일 확장자 : 호스팅 제공 업체의 이미지 확장자 이름이 ".JPG"인 경우 ".jpg"또는 ".jpeg '를 사용하지 마십시오. 호스팅 제공 업체 및 브라우저 조합에 따라 오류가있을 수도 있고 없을 수도 있음을 확인했습니다. 발생하므로 안전을 위해 파일 확장자의 대소 문자를 일치시키는 것이 더 쉽습니다.
3. WhatsApp 메시지에 썸네일 미리보기가 여전히 표시되지 않으면 위 단계를 수행 한 후 :
ㅏ. 모바일 앱을 강제 종료하고 (Android에서 시도) 다시 시도하십시오.
b. 온라인 도구를 사용하여 OG 태그를 미리 봅니다. 예 : https://searchenginereports.net/open-graph-checker
씨. 모바일 브라우저에서 OG thumb에 직접 링크를 붙여넣고 브라우저를 4 ~ 5 회 새로 고칩니다. 예 : https://bla123neocities.org/nmp/images/thumbs/IMG_327.JPG
2020 년 11 월 :
경험했듯이 이러한 메타 태그는 필수이며 Whatsapp의 공유 링크에 표시되는 내용에 영향을줍니다 WhatsApp-thumbnail.
<head>
<meta content='myTitle' property='og:title'/>
<meta content="myDescription" property="og:Description"/>
<meta property="og:type" content= "website" />
<meta property="og:image" itemprop="image primaryImageOfPage" content="https://i.ibb.co/1GRpwND/600px-Approve-icon-svg.png" />
</head>
그리고 내부 <body> :
<a href="https://wa.me/?text=https://myaddress.blogspot.com/2020/11/try-16.html" target="_blank" rel="nofollow">Hello whatsApp</a>
더 많은 설명 :
1- 당신이 <meta content='example.com/page1' property='og:url'/>참조하고 내부 본문 <a href="https://wa.me/?text=example.com/page2" >Hello whatsApp</a>, og:image및 og:description페이지 를 가지고 있다고 가정 하십시오.example.com/page2 당신의 몸 (어쩌면 명백한)에 링크를 언급 WHATSAPP에 렌더링 줘야 해.
2 때 add/change같은 열려있는 그래프 태그 og:description, 다시 당신을 클릭 <a></a>하면 변경하지 않는 한 변경되지 않습니다 당신이 또는 WhatsApp에 참조 페이지 / 몸에 태그를 href="I am a new URL"당신의<a></a> 태그 또는 WhatsApp에의 캐시 지우기!
Png/jpg3-300kb 미만이고 모두 300 * 300 픽셀보다 큰 이미지를 시도 했으며 이미지 콘텐츠는 https 또는 httpURL 이었습니다 . 위의 코드는 둘 다 지원합니다.og:image:secure_url ).
4- og내용 을 추가 / 변경할 때마다 WhatsApp에 썸네일을 표시하려면 변경 사항이 첫 번째 시도에 영향을주지 않습니다 !! 두 번째 시도에서 성공했습니다. 아주 이상한 !
이 솔루션은 저에게 효과적입니다.
<meta property="og:title" content="Testing Title" />
<meta
property="og:description"
content="This is best way to view your Time Table & Join Meetings"
/>
<meta
property="og:image"
itemprop="image"
content="//upload.wikimedia.org/wikipedia/commons/d/d4/JPEG_example_image_decompressed.jpg"
/>
<meta property="og:url" content="https://google.com/" />
<meta property="og:type" content="website" />
<meta property="og:image:type" content="image/jpeg" />
codesandbox.io에서 테스트
이미지 URL에서 " http"또는 " https"을 (를) 제거하여 한 가지 어리석은 작은 일이 마술을했습니다.
이미지 URL이 예 : https://test.com/img.jpegto//test.com/img.jpeg
<meta property="og:image" itemprop="image" content="//test.com/img.jpg"/>