จัดเตรียมรูปภาพสำหรับการแชร์ลิงก์ WhatsApp

เราจะรวมรูปภาพในเว็บไซต์ของเราเพื่อแสดงใน WhatsApp เมื่อเราแชร์ลิงก์เช่นนี้ได้อย่างไร?

2563 มาตรฐาน

ใช้เวลาไม่กี่ขั้นตอนในการรับตัวอย่างที่สมบูรณ์แบบสำหรับ WhatsApp, Twitter, Facebook และไอคอนคั่นหน้าสำหรับพีซีและอุปกรณ์มือถือ ถ้าคุณชอบอ่านไปที่ogp.me - แต่ให้แน่ใจว่าได้อ่านขั้นตอนที่ 1 - 6 ในคำตอบนี้เพื่อรับตัวอย่าง WhatsApp ที่ดีที่สุด

โปรดทราบ:แอพหรือเว็บไซต์บางแห่งใช้แคชหรือเก็บตัวอย่างเว็บไซต์ไว้ในฐานข้อมูล ซึ่งหมายความว่าเมื่อคุณทดสอบลิงก์ของคุณใน 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: ชื่อ

สูงสุด 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: รูปภาพ

รูปภาพ (JPG หรือ PNG) ที่มีขนาดน้อยกว่า 300KB และขนาดต่ำสุด 300 x 200 ^*

<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: พิมพ์

เพื่อให้วัตถุของคุณถูกนำเสนอภายในกราฟคุณต้องระบุประเภทของวัตถุ นี่คือรายการของประเภททั่วโลกที่มีอยู่: http://ogp.me/#types คุณสามารถระบุประเภทของคุณเอง

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

ขั้นตอนที่ 8: og: locale

สถานที่ของทรัพยากร คุณยังสามารถใช้ og: locale: ทางเลือกหากคุณมีการแปลภาษาอื่น ๆ

หากคุณไม่ระบุ 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: Twitter

สำหรับการสนับสนุนที่ดีที่สุดทวิตเตอร์อ่านนี้

ขั้นตอนที่ 10: Facebook

สำหรับการสนับสนุนที่ดีที่สุด Facebook อ่านนี้

ขั้นตอนที่ 11: favicon

สำหรับการสนับสนุน favicon ที่ดีที่สุดสำหรับเบราว์เซอร์และอุปกรณ์ทั้งหมดอ่านนี้

โบนัสขั้นตอนที่ 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 ตัวอักษร

คำอธิบาย Meta: อธิบายเว็บเพจของคุณสูงสุด 155 ตัวอักษร

og: หัวเรื่อง: สูงสุด 35 ตัวอักษร

og: url: ลิงก์แบบเต็มไปยังที่อยู่เว็บเพจของคุณ

og: คำอธิบาย: สูงสุด 65 ตัวอักษร

og: รูปภาพ: รูปภาพ (JPG หรือ PNG) ขนาดน้อยกว่า 300KB และแนะนำขนาดขั้นต่ำ 300 x 200 พิกเซล

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 บางชนิดไม่รู้ว่าใช้เวลานานเท่าใด

หากต้องการตรวจสอบว่าผมได้แทรกแท็กที่ถูกต้องผมก็พยายาม URL ที่แตกต่างกันตัวอย่างเช่น: http://domain.comแทนhttp://www.domain.com

หวังว่านี่จะช่วยคนอื่นได้

หลังจากทำงานใน bugg แล้วพบว่าใน IOS องค์ประกอบใน HEAD อาจหยุดการค้นหา WhatsApp ของ og: image / og: description / name = description ดังนั้นก่อนอื่นให้วางพวกเขาไว้เหนือสิ่งอื่นใด

มันใช้งานไม่ได้

<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

หากคุณทำงานกับบอต Messenger หรือแอพ FB อื่น ๆ คุณอาจต้องใช้คุณสมบัติ fb: app_id เพื่อให้รูปภาพลิงค์ทำงานใน Whatsapp เพิ่มเติมได้ที่เว็บไซต์ผู้พัฒนาเว็บมาสเตอร์ของ Facebook https://developers.facebook.com/docs/sharing/webmasters

ฉันมีปัญหาเดียวกันนี่คือการแก้ไข

มันควรจะปรากฏขึ้นหากคุณเพิ่มเมตา og: ภาพ

ปัญหาคือ whatsapp จะไม่แสดงภาพหากคุณพิมพ์โดยไม่มี http: // และลงท้ายด้วย / ตัวอย่างเช่นมันจะแสดงภาพและคำอธิบายหากคุณพิมพ์http://google.com/แต่ไม่ใช่ google.com

หวังว่าจะช่วยใครซักคน

ฉันต้องการเพิ่มคำตอบให้กับหัวข้อนี้เพื่อระบุเฉพาะหัวข้อด้านบนที่ช่วยฉันแก้ปัญหาและลำดับที่พวกเขาสามารถติดตามเพื่อทำความเข้าใจสาเหตุของปัญหาและแก้ไขได้ทันที:

ผมสามารถที่จะได้รับของฉันแสดงตัวอย่างที่อุดมไปด้วยขณะที่การแบ่งปันการเชื่อมโยงบนสื่อสังคมที่มีนี้การแก้ปัญหา

ฉันทำตามตัวเลือกต่าง ๆ ในชุดข้อความนี้และด้านล่างนี้ใกล้เคียงกับคำตอบที่ถูกและพวกเขาทั้งหมดมีส่วนทำให้ผลลัพธ์สุดท้าย:

1. แท็กที่ต้องการ (แท็กหลักเพื่อมุ่งเน้น - og: ภาพ)
2. พารามิเตอร์รูปภาพ
3. เครื่องมือที่จะช่วยได้อย่างแน่นอน
4. วิธีการกำหนดเส้นทางภาพอย่างถูกต้อง
5. สาเหตุและวิธีการแก้ไข

หวังว่าจะช่วยให้ใครบางคนประหยัดเวลาในการเลื่อนดูและค้นหาชุดคำตอบที่เหมาะสมและความพยายามที่จำเป็นสำหรับการทดลองและข้อผิดพลาดทั้งหมด

ฉันพยายามแนะนำหลายข้อภายใต้หัวข้อนี้และจากการค้นหาภายนอกของฉัน แต่มันก็เป็นปัญหาอื่นสำหรับฉัน คำแนะนำเฉพาะของฉันในการใช้ภาพที่ระบุโดยแท็กog: รูปภาพถูกแทนที่ด้วยแท็กกราฟแบบเปิดที่จัดทำโดยปลั๊กอิน Jetpack คุณสามารถหาคำตอบรายละเอียดของฉันที่นี่ อย่างไรก็ตามฉันคิดว่ามันคุ้มค่าที่จะเพิ่มขั้นตอนโดยย่อในกระทู้ที่ติดตามมากขึ้นนี้ หวังว่านี่จะช่วยใครซักคน

ตัวแก้ไขการแชร์ Facebookช่วยให้ฉันระบุสาเหตุที่แท้จริงและจากนั้นฉันทำตามขั้นตอนเหล่านี้:

1. แก้ไขข้อบกพร่องเว็บไซต์ของคุณโดยใช้ดีบักเกอร์ด้านบน เพียงพิมพ์ URL และ hit debug สิ่งนี้จะให้รายการคำเตือนแก่คุณและเมื่อคุณเลื่อนลงไปที่ส่วนของแท็กกราฟที่เปิดอยู่คุณจะสามารถเห็นค่าที่ดึงมาจากเว็บไซต์ของคุณ สิ่งที่ต้องมุ่งเน้นคือแท็กog: image
2. เลื่อนลงไปที่ลิงก์ "ดูสิ่งที่มีดโกนของเราเห็นสำหรับ URL ของคุณ"และค้นหาog:แท็กรูปภาพเพื่อค้นหาตัวร้ายในเรื่องราวของคุณ
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 และขนาด <300 KB และโปรดปฏิบัติตามคำแนะนำเหล่านี้หากคำแนะนำทั่วไปนั้นไม่ได้ผลสำหรับคุณเพราะเป็นไปได้มากว่าปัญหาของคุณคล้ายกับของฉัน นอกจากนี้บางครั้งโซลูชันที่ง่ายที่สุดอาจเพียงแค่ลบปลั๊กอิน (หากคุณยืนยันว่าคุณสามารถทำได้โดยไม่ต้องใช้ปลั๊กอิน)

ในตอนท้ายคุณควรเห็นบางสิ่งเช่น -

หวังว่านี่จะช่วยได้

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: รูปภาพจะถูกดึงอย่างรวดเร็วแทนที่จะเป็นแบบอะซิงโครนัส

ขอแนะนำ PNG สำหรับรูปแบบภาพ แนะนำอย่างน้อย 600x600 พิกเซล

หากคุณต้องการให้รูปภาพติดกับ url จากเว็บไซต์ของคุณที่มีคนแบ่งปันใน WhatsApp คุณจะต้องวางเมตาแท็กลงในหน้าเว็บที่ URL เชื่อมโยงไปถึงเช่นนี้

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

มีปัญหาเดียวกันเพิ่ม og: อิมเมจและมันไม่ทำงานในขณะที่ URL ลงท้ายด้วยเครื่องหมายสแลช (/) หลังจากลบเครื่องหมายทับออกจาก URL - รูปภาพถูกโหลด .. ข้อผิดพลาดที่น่าสนใจ ...

การดำเนินการต่อไปนี้ช่วยในกรณีของฉัน

วางภาพภายใต้โฮสต์เดียวกัน

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

ส่งภาพที่จำเป็นไปยัง WhatsApp โดยเฉพาะโดยการตรวจสอบตัวแทนผู้ใช้ของตนโดยนำสตริงย่อยตัวอย่าง

WhatsApp/2.18.380 A

รอสองสามวินาทีก่อนกดปุ่มส่งจริง WhatsApp จะมีเวลาดึงภาพและคำอธิบายจาก og metadata

แม้หลังจากพยายามเหล่านี้ ภาพเว็บไซต์ของฉันถูกดึงมาบางครั้งและบางครั้งก็ไม่ หลังจากตรวจสอบกับhttps://developers.facebook.com/tools/debug/sharing

ตระหนักว่ากรอบ django ของฉัน (หลาม) กำลังแสดงเส้นทางภาพค่อนข้าง ฉันต้องทำการเปลี่ยนแปลงเส้นทางของภาพด้วย URL แบบเต็ม (รวมถึง http: //) จากนั้นมันก็เริ่มทำงาน

ข้อมูลที่เป็นประโยชน์เพิ่มเติม:

คุณสามารถระบุ og: รูปภาพ, whatsapp จะใช้อันสุดท้าย วิธีนี้จะช่วยแก้ไขปัญหาที่เกิดขึ้นเช่น facebook ต้องการอัตราส่วน 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/