วิธีใช้เมตาแท็ก 'og' (Open Graph) สำหรับการแชร์บน Facebook

118

Facebook ดึงรูปภาพทั้งหมดจากไซต์ของฉัน

ฉันต้องการแบ่งปันเพียงภาพเดียวที่อยู่ในหน้านั้น

ฉันได้ยินเกี่ยวกับogเมตาแท็ก แต่ฉันไม่รู้ว่าจะใส่อย่างไร

facebook-opengraph meta

— Vignesh Babu นพ
แหล่งที่มา

คำตอบ:

355

ใช้:

<!-- For Google -->
<meta name="description" content="" />
<meta name="keywords" content="" />

<meta name="author" content="" />
<meta name="copyright" content="" />
<meta name="application-name" content="" />

<!-- For Facebook -->
<meta property="og:title" content="" />
<meta property="og:type" content="article" />
<meta property="og:image" content="" />
<meta property="og:url" content="" />
<meta property="og:description" content="" />

<!-- For Twitter -->
<meta name="twitter:card" content="summary" />
<meta name="twitter:title" content="" />
<meta name="twitter:description" content="" />
<meta name="twitter:image" content="" />

เติมเนื้อหา = "... " ตามเนื้อหาของเพจของคุณ

สำหรับข้อมูลเพิ่มเติมโปรดเยี่ยมชม18 Meta Tags ทุกหน้าเว็บควรจะมีในปี 2013

— CarlosPinedaT
แหล่งที่มา

คุณทราบหรือไม่ว่าauthorแท็กควรมีชื่อผู้เขียนหรือลิงก์ไปยัง URL โปรไฟล์

— เลื่อน

ฉันคิดว่าทั้งสองอย่างเป็นไปได้ หากคุณต้องการรูปโปรไฟล์ที่ด้านซ้ายของโพสต์ที่หน้าค้นหาของ Google คุณควรระบุลิงก์ไปยังโปรไฟล์ google + ของคุณ

— jurihandl

เมตาแท็กauthorหมายถึงผู้เขียนเว็บไซต์หรือผู้เขียนบทความปัจจุบัน (ตัวอย่างการใช้งานในบทความบล็อก)?

— LuiGi

นี่คือการประหารชีวิตที่ดีหรือไม่? Google / Facebook / Twitter จะไม่พบข้อผิดพลาดหรือไม่

— Jeromie Devera

1) Facebook จะอ่านแท็ก <meta name = "author"> และแสดงในหน้าตัวอย่างเมื่อมีคนแชร์เพจ 2) ขณะนี้ Facebook รองรับ <meta property = "article: author"> แล้ว (ดูรายละเอียดที่giannopoulos.net/ 2015/06/20 / … ) และจะแสดงลิงก์ไปยังโปรไฟล์ Facebook ของคุณ (หากคุณใส่ลิงก์ไปในบทความ: ผู้เขียน) 3) ขณะนี้ Google ค้นหาข้อมูลที่สมบูรณ์ในรูปแบบที่เรียกว่า "Rich Snippets" ( Developers.google.com/structured-data )

— MarkG

Facebook ใช้สิ่งที่เรียกว่าOpen Graph Protocolเพื่อตัดสินใจว่าจะแสดงสิ่งใดเมื่อคุณแชร์ลิงก์ OGP จะดูเพจของคุณและพยายามตัดสินใจว่าจะแสดงเนื้อหาใด เราสามารถยืมมือและบอก Facebook ได้ว่าจะเอาอะไรจากเพจของเรา

วิธีที่เราทำคือการใช้og:metaแท็ก

แท็กมีลักษณะดังนี้ -

  <meta property="og:title" content="Stuffed Cookies" />
  <meta property="og:image" content="http://fbwerks.com:8000/zhen/cookie.jpg" />
  <meta property="og:description" content="The Turducken of Cookies" />
  <meta property="og:url" content="http://fbwerks.com:8000/zhen/cookie.html">

คุณจะต้องวางเมตาแท็กเหล่านี้หรือที่คล้ายกันใน<head>ไฟล์ HTML ของคุณ อย่าลืมแทนที่ค่าของคุณเอง!

สำหรับข้อมูลเพิ่มเติมคุณสามารถอ่านทั้งหมดเกี่ยวกับวิธีที่ Facebook ใช้เมตาแท็กเหล่านี้ได้ในเอกสารประกอบ นี่คือหนึ่งในบทเรียนจากที่นั่น - https://developers.facebook.com/docs/opengraph/tutorial/

Facebook มอบเครื่องมือเล็ก ๆ น้อย ๆ ที่จะช่วยเราในการจัดการกับเมตาแท็กเหล่านี้ - คุณสามารถใช้Debuggerเพื่อดูว่า Facebook มองเห็น URL ของคุณได้อย่างไรและยังบอกคุณได้ว่ามีปัญหาหรือไม่

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

— Lix
แหล่งที่มา

ฉันเห็นแท็ก html ในคำอธิบายของฉันคุณรู้วิธีแก้ไขปัญหานี้หรือไม่

— Neil

ฉันสร้างเครื่องมือสำหรับการสร้างเมตา มันกำหนดค่ารายการล่วงหน้าสำหรับ Facebook, Google+ และ Twitter และคุณสามารถใช้ได้ฟรีที่นี่: http://www.groovymeta.com

เพื่อตอบคำถามอีกเล็กน้อยOGแท็ก (Open Graph) จะทำงานคล้ายกับเมตาแท็กและควรวางไว้ในส่วน HEAD ของไฟล์ HTML ของคุณ ดูแนวทางปฏิบัติที่ดีที่สุดของ Facebookสำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีใช้แท็ก OG อย่างมีประสิทธิภาพ

— หลุยส์ออตโต้
แหล่งที่มา

ขอบคุณ @Mogsdad ฉันได้ขยายคำตอบตามนั้น

— Louis Otto

ลิงค์เสียน่าเสียดาย!

— Vincent Sels