ผลกระทบของโปรโตคอล Open Graph ต่อ SEO

ผลกระทบของโปรโตคอล Open Graph ต่อ SEO
David Kaufmann
บทเรียน SEO
3 min read

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

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

เราจะบอกคุณทุกเรื่อง!

แท็ก Open Graph คืออะไร?

meta tags หรือโปรโตคอล Open Graph ถูกสร้างโดย Facebook และอนุญาตให้เว็บเพจใดๆ แสดงด้วยรูปแบบที่อุดมสมบูรณ์บนโซเชียลเน็ตเวิร์ก แท็ก HTML เหล่านี้จะทำหน้าที่แสดงเนื้อหา (ชื่อ คำอธิบาย รูปภาพหน้า ฯลฯ) ของหน้าที่แชร์บนโซเชียลเน็ตเวิร์ก หากแท็กเหล่านี้ไม่มีหรือไม่ระบุ ข้อมูลจะแสดงแบบสุ่ม โดยเลือกรูปภาพสุ่ม ชื่อหรือคำอธิบายที่ไม่บรรยาย...

ใช้สำหรับอะไร?

แท็กเหล่านี้รู้จักกันในชื่อ social tags และมีความสำคัญมากในการบรรลุการจัดอันดับในทุกโซเชียลเน็ตเวิร์ก ขึ้นอยู่กับว่าโซเชียลเน็ตเวิร์กไหน จะง่ายกว่าหรือยากกว่า แต่การจัดอันดับบนโซเชียลเน็ตเวิร์กมีอยู่จริง

โปรโตคอล Open Graph เริ่มแรกใช้บน Facebook และปัจจุบันยังได้รับการยอมรับบน LinkedIn ในทางกลับกัน แท็กของ Twitter เป็นเฉพาะของโซเชียลเน็ตเวิร์กนั้น

แท็กมีดังนี้:

og:title:

"Title" รับผิดชอบในการบอกเครื่องมือค้นหาว่าหน้าเกี่ยวกับอะไร ดังนั้นต้องชัดเจน กระชับ และไม่ซ้ำในแต่ละหน้า ความยาวสูงสุดคือ 67 ตัวอักษร

ตัวอย่าง:

<meta property="og:title" content="แท็ก Open Graph คืออะไร?"/>

og:description

"Meta description" จะเป็นสิ่งที่บรรยายและให้ข้อมูลเกี่ยวกับหน้าเว็บอย่างละเอียดยิ่งขึ้น ไม่ควรเกิน 155 ตัวอักษรและสามารถมีวลีหรือ CTA ที่กระตุ้นให้ผู้ใช้คลิกผลลัพธ์ ควรไม่ซ้ำสำหรับแต่ละหน้า

ตัวอย่าง:

<meta property="og:description" content="คุณรู้หรือไม่ว่าผู้ใช้เห็นเว็บไซต์ของคุณอย่างไรเมื่อพวกเขาแชร์บนโปรไฟล์โซเชียล? แท็ก Open Graph จะรับผิดชอบในการแสดงข้อมูลทั้งหมด"/>

og:url:

URL ของหน้าเว็บถูกแสดง และสามารถแสดงแบบย่อ พยายามใช้แท็กนี้ด้วย URL ที่สะอาดที่สุดเท่าที่จะทำได้และไม่ซ้ำในแต่ละหน้า

ตัวอย่าง:

<meta property="og:url" content="/blog/open-graph" />

og:image

คุณต้องระบุ URL รูปภาพเพื่อให้แสดงในแต่ละหน้า นี่เป็นแน่นอนหนึ่งในแท็กที่ถูกมองข้ามมากที่สุดและสำคัญที่สุด Google Discover, Google News, Facebook, Twitter, LinkedIn... ทั้งหมดจะเลือกรูปภาพนี้เป็นเหยื่อล่อสำหรับผู้ใช้ และหากมีคุณภาพดี คุณจะได้รับผู้เข้าชมจำนวนมาก มิฉะนั้น หากปล่อยช่องว่าง รูปของผู้เขียนอาจแสดง ช่องว่าง... คุณเลือกว่าอันไหนดีกว่า! ;)

ตัวอย่าง:

<meta property="og:image" content="/blog/images/open-graph.jpg" />

og:video

ในกรณีที่คุณมีวิดีโอบนหน้าเว็บ คุณต้องระบุโดยใช้แท็กนี้ ซึ่งช่วยอำนวยความสะดวกในการตีความ

<meta property="og:video" content="http://example.com/bond/trailer.swf" />

og:type

แท็กนี้ระบุว่าเนื้อหาของคุณประกอบด้วยอะไร ไม่ว่าจะเป็นบทความ วิดีโอ บทความบล็อก... ขึ้นอยู่กับประเภท คุณสามารถกำหนดคุณสมบัติที่แตกต่างกัน

ตัวอย่าง:

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

og:site_name

ด้วยมันคุณสามารถระบุเว็บไซต์ของคุณเพื่อแสดงแบรนด์

<meta property="og:site_name" content="SEO Alive" />

ประเภทของ social meta tags ที่มีอยู่

ในปัจจุบัน แท็กที่ Facebook สร้างถูกใช้บนโซเชียลเน็ตเวิร์กอื่น เช่น LinkedIn Twitter ใช้สิ่งที่เรียกว่า Twitter Cards ด้วยแท็กเหล่านี้คุณมีสามตัวเลือก:

  • "Photo" สำหรับรูปภาพ

  • "Player" สำหรับวิดีโอ และ

  • "Summary" สำหรับทุกอย่างอื่น

ในกรณีนี้ เช่นเดียวกับการ์ด Open Graph หากไม่ปรับให้เหมาะสม เนื้อหาเริ่มต้นและไม่ปรับจะแสดง

เครื่องมือทดสอบแท็ก

การวิเคราะห์ว่าหน้าเว็บปรากฏอย่างไรเมื่อผู้ใช้แชร์บนโซเชียลเน็ตเวิร์กจะมีความสำคัญหากเราต้องการให้ทุกอย่างทำงานถูกต้อง

Twitter Card Validator

เครื่องมือตรวจสอบของ Twitter คือ Twitter Card Validator ก่อนเผยแพร่อะไร หากต้องการตรวจสอบให้แน่ใจว่าทุกอย่างแสดงอย่างถูกต้อง อย่าลังเลที่จะป้อน URL ที่คุณต้องการแชร์ มันยังมีประโยชน์มากหากคุณอัปเดตรูปภาพของหน้าและ feed ยังแสดงรูปเก่า การวิเคราะห์ใหม่จะทำหน้าที่เป็น "การล้าง cache"

Twitter Card Validator
Twitter Card Validator

Facebook Debugger

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

Facebook Debugger
Facebook Debugger

Google Structured Data Testing Tool

Google ยังให้บริการเครื่องมือทดสอบข้อมูลที่มีโครงสร้างเรียกว่า Google Structured Data Testing Tool. มีประโยชน์มากในการตรวจสอบประเภทของ markup ที่ Google เลือกจากหน้า markup ได้รับการยอมรับจากเครื่องมือค้นหา ซึ่งช่วยทำให้เว็บไซต์ "semantic" โดยแนะนำ Schema microdata เฉพาะสำหรับแต่ละกรณี

Google Structured Data Testing Tool
Google Structured Data Testing Tool

Rich Pins Validator

Pinterest ก็ไม่อยู่เบื้องหลังและนำตัวตรวจสอบ pin ของมันมา หรือที่เรียกว่า Rich Pins Validator. มันทำงานเหมือนกับตัวตรวจสอบของ Twitter: ต้องผ่านกระบวนการอนุมัติเพื่อให้ได้ฟังก์ชันการทำงาน Rich Pin และตรวจสอบ data markup พร้อมกัน

Rich Pins Validator
Rich Pins Validator

ปรับแท็กเหล่านี้ใน WordPress อย่างไร?

อย่างที่คุณรู้ หนึ่งในข้อได้เปรียบที่ยอดเยี่ยมที่ WordPress มอบให้คือความยืดหยุ่นและชุมชนขนาดใหญ่ ดังนั้นกระบวนการเช่นการแนะนำแท็ก open-graph เข้ากับหน้าและบทความของเราใช้เวลาเพียงไม่กี่วินาทีด้วย plugins

มีหลายวิธีในการบรรลุ ในกรณีของเรา เราเชื่อว่าวิธีที่ง่ายที่สุดคือทำผ่าน SEO Rank Math plugin

บทความแนะนำ > บทเรียน SEO เชิงลึกเกี่ยวกับ Rank Math

สิ่งที่คุณต้องทำคือไปที่ส่วน SEO ของหน้าหรือบทความที่เป็นปัญหา คลิกที่แท็บ "Social" และที่นั่นเราจะเห็นตัวเลือกในการกำหนดค่ารูปภาพ ในหลายกรณี หากเราอัปโหลดรูปภาพเด่น มันจะเลือกโดยตรง

Open Graph Rank Math
Open Graph Rank Math

เคล็ดลับและการปรับปรุง

ด้านล่างคุณสามารถดูเคล็ดลับบางอย่างจากประสบการณ์ที่ใช้ได้ผลสำหรับเราในการบรรลุผลลัพธ์ที่ดีมาก

ปรับรูปภาพให้เหมาะสม

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

แต่ละแพลตฟอร์มมีมาตรฐานบางอย่าง สิ่งที่ดีที่สุดคือเลือกภาพขนาดใหญ่ที่สามารถพอดีกับแต่ละโซเชียลเน็ตเวิร์ก

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

  • Twitter: 120x120px สำหรับขนาดเล็กและ 4096x4096px สำหรับขนาดใหญ่

  • Facebook: เล็กที่สุด 200px และใหญ่ที่สุด 1200px

ใช้ Open Graph เสมอ

เนื่องจากเป็นรูปแบบที่รู้จักกันดีอยู่แล้ว แพลตฟอร์มอื่นๆ สามารถใช้ได้ แนะนำให้ใช้เทมเพลตโค้ดเพื่อแทรก social tags คุณสามารถดูข้อมูลทั้งหมดในคู่มือต่อไปนี้

คู่มือแนะนำ -> Meta Tags ใน SEO

ทดสอบและทดลอง

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

บทสรุป

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

จำไว้ด้วยว่าสัญญาณโซเชียล นั่นคือ การเข้าชมที่มาจากโซเชียลเน็ตเวิร์ก สามารถส่งผลกระทบเชิงบวกต่อกลยุทธ์ SEO ดังนั้นทุกคลิกจากโซเชียลมีเดียมีค่าเท่ากับน้ำหนักทองคำ!

มีคำถามหรือข้อเสนอแนะหรือไม่? เรายินดีช่วย!

อ้างอิง:

  • https://ogp.me/ - เว็บไซต์ทางการของโปรโตคอล Open Graph

โดย: David Kaufmann

David Kaufmann

ในช่วง 10+ ปีที่ผ่านมา ผมหมกมุ่นกับ SEO อย่างสมบูรณ์ — และพูดตรง ๆ ก็ไม่อยากให้เป็นแบบอื่น

อาชีพของผมก้าวขึ้นไปอีกระดับเมื่อทำงานเป็นผู้เชี่ยวชาญ SEO อาวุโสที่ Chess.com — หนึ่งใน 100 เว็บไซต์ที่มีผู้เข้าชมมากที่สุดในอินเทอร์เน็ต การทำงานในระดับนี้สอนสิ่งที่ไม่มีหลักสูตรหรือประกาศนียบัตรใดสอนได้

จากประสบการณ์นี้ ผมก่อตั้ง SEO Alive — เอเจนซีสำหรับแบรนด์ที่จริงจังกับการเติบโตแบบออร์แกนิก และเพราะหาเครื่องมือที่จัดการทั้งโลกคลาสสิกและยุค AI ได้ดีไม่ได้ ผมจึงสร้าง SEOcrawl ขึ้น หากคุณกำลังมองหาพาร์ตเนอร์ SEO มากประสบการณ์ที่รักสาขานี้ — ยินดีพูดคุยครับ!

→ อ่านบทความทั้งหมดของ David
บทความเพิ่มเติม: David Kaufmann

ค้นพบเนื้อหาเพิ่มเติมของผู้เขียนคนนี้