[html] WhatsApp 링크 공유를위한 이미지 제공
이와 같은 링크를 공유 할 때 WhatsApp에 표시 할 웹 사이트에 이미지를 어떻게 포함시킬 수 있습니까?
답변
2020 표준
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">* @RichDeBourke는 이것을 나에게 언급했지만 WhatsApp은 최대 이미지 크기 (파일 크기뿐만 아니라 크기)를 늘 렸습니다. 몇 가지 테스트를 수행했습니다. 모든 장치에서 항상 일관되게 작동하지는 않습니다. 2.x Mb 이미지를 테스트했는데 9/10 번 작동하는 것 같습니다. <300KB가 가장 안전한 방법이지만 18-02-2020 현재 큰 이미지를 사용하는 것이 좋습니다. 그래도 파일 크기를 2MB 이하로 유지하는 것이 좋습니다. TinyPNG 또는 다른 이미지 압축 알고리즘을통해 이미지를 처리 하십시오.
위 단계를 완료하면 WhatsApp에서 미리보기를 볼 수 있습니다! 그러나 위 의 “주의하십시오” 섹션에 유의하십시오 .
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."/> 이미지는 .png 형식 및 600x600px 크기 여야하고 ‘logo-yoursite.png’라는 이름을 가져야합니다 (한 번만 작동했을 경우)
웹 사이트에 whatsapp에 대한 링크를 삽입하는 것을 잊지 마십시오 :
<a href='whatsapp://send?text=Text to send withe message: http://www.yoursite.com'>whatsApp</a>이렇게하면 잘 끝납니다!
답변
여기 완벽한 상세한 솔루션을 문서화 – https://amprandom.blogspot.com/2016/12/blogger-whatsapp-rich-link-preview.html을
완벽하게 미리보기를 얻기 위해 수행해야 할 일곱 단계가 있습니다.
제목 : 최대 65 자로 키워드가 풍부한 제목을 웹 페이지에 추가하십시오.
메타 설명 : 최대 155 자의 웹 페이지를 설명하십시오.
og : title : 최대 35 자
og : url : 웹 페이지 주소에 대한 전체 링크.
og : description : 최대 65 자입니다.
og : image : 크기가 300KB 미만이고 최소 크기가 300 x 200 픽셀 인 이미지 (JPG 또는 PNG)가 권장됩니다.
favicon : 32 x 32 픽셀 크기의 작은 아이콘.
위 페이지에는 필요한 사양, 문자 제한 및 샘플 태그가 있습니다. 만족 스러우면 공감하십시오.
답변
<meta property="og:image" content="image.png" />위의 어딘가에서 제안 된 것처럼 간단한 것이 저에게 효과적이지 않다는 사실에 주목하고 싶습니다 (사실 실제로 몇 주 동안 반복되었습니다). 작동하는 것은 절대 URL입니다.
<meta property="og:image" content="https://domainname.com/image.png" />
또는 슬래시로 시작합니다 (이미지가 루트 디렉토리에있는 경우).
<meta property="og:image" content="/image.png" />
(이 내용을 의견으로 추가했지만 아직 허용되지 않습니다. 진행자가 더 적절한 경우 자유롭게이 항목을 이동하십시오.)
답변
나는 이것을 직접 시도하고 있었고 올바른 메타 태그를 모두 추가했다.
<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" />그러나 WhatsApp 내 링크를 공유 할 때 이미지를 볼 수 없었습니다.
WhatsApp은 이미지와 URL 정보를 캐시하는 데 시간이 오래 걸린다는 것을 알았습니다.
올바른 태그를 삽입했는지 확인하기 위해 http://www.domain.com 대신 http://domain.com 과 같은 다른 URL을 시도했습니다 . .
잘하면 이것은 다른 사람에게 도움이됩니다.
답변
bugg에서 작업 한 후 IOS 에서 HEAD의 요소가 og : image / og : description / name = description 의 WhatsApp 검색을 중지 할 수 있음을 발견했습니다 . 그래서 상단에 넣어 먼저하려고 다른 모든 것들의.
작동하지 않습니다
<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>이 일:
<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>