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>

항상 https://developers.facebook.com/tools/debug/sharing을 살펴 보는 것이 좋습니다.Facebook은 종종 정책, 규정 준수 및 API를 변경하므로 속성을 확인 을 .

메신저 봇 또는 다른 FB 앱으로 작업하는 경우 링크 이미지가 Whatsapp에서 작동하려면 fb : app_id 속성이 필요할 수 있습니다. Facebook 개발자 웹 마스터 사이트에서 자세히 알아보십시오. https://developers.facebook.com/docs/sharing/webmasters

나는 같은 문제가 있었다.

메타 og : image를 추가하면 표시됩니다

문제는 http : //없이 입력하면 whatsapp에 이미지가 표시되지 않고 /로 끝나는 것입니다. 예를 들어 http://google.com/ 을 입력하면 이미지와 설명이 표시됩니다. 하고 google.com 하지 않으면

그것이 누군가를 돕기를 바랍니다.

이 스레드에 대한 답변을 추가하여 위의 스레드 중 어느 것이 문제를 해결하는 데 도움이되었는지와 근본 원인을 올바르게 이해하고 한 번에 모두 해결하기 위해 수행 할 수있는 순서를 언급하고 싶습니다.

이 솔루션 으로 소셜 미디어의 링크를 공유하면서 풍부한 미리보기 를 얻을 수있었습니다 .

나는이 스레드에서 다양한 옵션을 따랐으며 아래는 정답에 가장 가깝고 모두 최종 결과에 기여했습니다.

1. 필요한 태그 (주요 태그-og : image)
2. 이미지 매개 변수
3. 확실히 도움이 될 도구
4. 이미지 경로를 올바르게 지정하는 방법
5. 근본 원인과 해결책

이를 통해 누군가가 스크롤하여 올바른 답을 찾는 데 필요한 시간과 모든 시행 착오에 필요한 노력을 절약 할 수 있기를 바랍니다.

이 스레드와 외부 검색에서 몇 가지 제안을 시도했지만 다른 문제였습니다. og : image로 표시된 이미지를 사용하는 나의 구체적인 지시 태그로 는 Jetpack 플러그인에서 제공하는 열린 그래프 태그로 대체되었습니다. 내 자세한 답변을 여기에서 찾을 수 있습니다. . 그러나이 후속 스레드에 대한 단계를 간단히 추가 할 가치가 있다고 생각했습니다. 이것이 누군가를 돕기를 바랍니다.

페이스 북 공유 디버거 나 근본 원인을 파악하고 거기에서, 나는 다음 단계를 따라 도움 :

1. 위의 디버거를 사용하여 웹 사이트를 디버깅하십시오. URL을 입력하고 디버그를 누르십시오. 경고 목록이 표시되고 열려있는 그래프 태그 섹션으로 스크롤하면 웹 사이트에 대해 가져 오는 값을 볼 수 있습니다. 집중해야 할 것은 og : image 태그입니다.
2. "스크래퍼가 귀하의 URL에 대해 정확히 무엇을 보는지" 링크 로 아래로 스크롤 하여 og : image 태그를 검색 하여 스토리에서 악당을 찾으십시오.
3. 이제 단순히 발생하는 재정의를 제거하는 수단을 선택하십시오. 필자의 경우 다음 기능이 유용하다는 것을 알았습니다. Jetpack이 사용할 이미지를 결정할 수 없을 때마다 사용되는 기본 이미지를 변경합니다.

Jetpack이 사용할 이미지를 결정할 수 없을 때마다 사용되는 기본 이미지를 변경합니다

function custom_jetpack_default_image() {
    return 'YOUR_IMAGE_URL';
}
add_filter( 'jetpack_open_graph_image_default', 'custom_jetpack_default_image' );

최소 300px x 200px 및 크기 <300KB와 같은 이미지 매개 변수를 권장합니다. 이러한 일반적인 지침이 효과가없는 경우이 지침을 따르십시오. 문제가 내 것과 유사 할 가능성이 큽니다. 또한 때로는 가장 간단한 해결책은 플러그인을 제거하는 것일 수도 있습니다 (플러그없이 수행 할 수 있음을 확인한 경우).

결국 당신은 다음과 같은 것을 볼 수 있어야합니다-

도움이 되었기를 바랍니다.

NS

WhatsApp 이미지 미리보기를 얻으려면 다음 태그가 필요합니다.

<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" />

Facebook 문서에서 알 수 있듯이 og : image 크기를 지정하면 비동기 적으로 그렇지 않고 빠르게 가져옵니다.

이미지 형식에는 PNG가 권장됩니다. 600x600 픽셀 이상이 권장됩니다.

WhatsApp에서 누군가가 공유 한 웹 사이트의 URL 옆에 그림을 표시하려면 다음과 같이 URL이 연결된 페이지에 메타 태그를 넣어야합니다.

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

같은 문제가 있었고 og : image를 추가했으며 URL이 슬래시 기호 (/)로 끝나는 동안 작동하지 않았습니다. URL에서 슬래시를 제거한 후 이미지가로드됩니다. 재미있는 버그 ...

다음과 같은 조치가 도움이되었습니다.

언더 화상 퍼팅 같은 호스트 .

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

구체적으로 선도 문자열에 의해 그 사용자 에이전트를 검출함으로써 또는 WhatsApp에 필요한 화상을 통과 예

WhatsApp/2.18.380 A

실제로 보내기 버튼을 누르기 전에 몇 초 동안 기다리 므로 WhatsApp은 og 메타 데이터에서 이미지와 설명을 검색 할 시간이 있습니다.

이 시도 후에도. 내 웹 사이트 이미지를 여러 번 가져 왔으며 때로는 가져 오지 못했습니다. https://developers.facebook.com/tools/debug/sharing으로 확인한 후

내 장고 (파이썬) 프레임 워크가 이미지 경로를 상대적으로 렌더링한다는 것을 깨달았습니다. 전체 URL로 이미지의 경로를 변경해야했습니다. (http : // 포함). 그런 다음 일을 시작했다

추가 유용한 정보 :

여러 개의 og : image를 제공 ​​할 수 있으며 whatsapp는 마지막 이미지를 사용합니다. 이것은 페이스 북이 1.91 : 1 비율과 whatsapp 1 : 1을 원하는 문제에 도움이 될 것입니다

<meta property="og:image" content="https://www.link.com/facebook.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />


<meta property="og:image" content="https://www.link.com/whatsapp.png" />
<meta property="og:image:type" content="image/png" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="400" />

https://roei.stream/2018/11/18/ideal-open-graph-image-size-for-whatsapp-link-share/

https://css-tricks.com/essential-meta-tags-social-media/