การค้นพบบนโซเชียล

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

Eiji Kitamura

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

สรุป

  • ใช้ Microdata ของ schema.org เพื่อระบุชื่อ คำอธิบาย และรูปภาพของหน้าสำหรับ Google+
  • ใช้โปรโตคอล Open Graph (OGP) เพื่อระบุชื่อหน้า คำอธิบาย และรูปภาพสำหรับ Facebook
  • ใช้การ์ด Twitter เพื่อระบุชื่อหน้า คำอธิบาย รูปภาพ และรหัส Twitter สำหรับ Twitter

คุณกำหนดลักษณะที่เว็บไซต์จะปรากฏเมื่อมีการแชร์ผ่านโซเชียลมีเดียได้โดยการเพิ่มโค้ด 2-3 บรรทัดลงในแต่ละหน้า ซึ่งจะช่วยเพิ่มการมีส่วนร่วมโดยการจัดหาตัวอย่างด้วยข้อมูลที่สมบูรณ์ยิ่งขึ้นกว่าที่มี หากไม่มี เว็บไซต์โซเชียลจะแสดงเฉพาะข้อมูลพื้นฐานโดยไม่มีรูปภาพหรือข้อมูลอื่นๆ ที่เป็นประโยชน์

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

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

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

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

ใช้ schema.org + Microdata เพื่อให้ตัวอย่างข้อมูลสื่อสมบูรณ์บน Google+

Crawler ใช้วิธีการหลายวิธีในการแยกวิเคราะห์หน้าเว็บและทำความเข้าใจเนื้อหา การใช้คําศัพท์ Microdata และ schema.org จะช่วยให้เว็บไซต์โซเชียลและเครื่องมือค้นหาเข้าใจเนื้อหาของหน้าเว็บได้ดียิ่งขึ้น

เช่น

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

แม้ว่าข้อมูลเมตาส่วนใหญ่จะฝังอยู่ในส่วนหัวของหน้าเว็บ แต่ Microdata จะยังคงแสดงอยู่ ณ จุดที่มีบริบท

เพิ่ม itemscope เพื่อกำหนดขอบเขตของ Microdata

การเพิ่ม itemscope จะช่วยให้คุณระบุแท็กเป็นบล็อกเนื้อหาเกี่ยวกับรายการหนึ่งๆ ได้

เพิ่ม itemtype เพื่อกําหนดประเภทของเว็บไซต์

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

เพิ่ม itemprop เพื่ออธิบายสินค้าแต่ละรายการโดยใช้คําศัพท์ของ schema.org

itemprop กำหนดพร็อพเพอร์ตี้สำหรับ itemtype ในขอบเขต สำหรับการให้ข้อมูลเมตาแก่เว็บไซต์โซเชียล ค่าทั่วไปของ itemprop คือ name, description และ image

ตรวจสอบตัวอย่างข้อมูลริชมีเดีย

หากต้องการตรวจสอบตัวอย่างข้อมูลริชมีเดียใน Google+ คุณสามารถใช้เครื่องมือต่อไปนี้

เครื่องมือทดสอบข้อมูลที่มีโครงสร้าง

ใช้โปรโตคอล Open Graph (OGP) เพื่อแสดงริชมีเดียใน Facebook

โปรโตคอล Open Graph (OGP) ให้ข้อมูลเมตาที่จำเป็นแก่ Facebook เพื่อให้หน้าเว็บมีฟังก์ชันการทำงานเหมือนกับออบเจ็กต์ Facebook อื่นๆ

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

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

ใช้แท็ก og: meta ที่มีเนมสเปซเพื่ออธิบายข้อมูลเมตา

แท็ก meta ประกอบด้วยแอตทริบิวต์ property และแอตทริบิวต์ content พร็อพเพอร์ตี้และเนื้อหาอาจมีค่าต่อไปนี้

พร็อพเพอร์ตี้ เนื้อหา
og:title ชื่อหน้าเว็บ
og:description คำอธิบายของหน้าเว็บ
og:url Canonical URL ของหน้าเว็บ
og:image URL ของรูปภาพที่แนบมากับโพสต์ที่แชร์
og:type สตริงที่ระบุประเภทของหน้าเว็บ คุณดูรูปแบบที่เหมาะกับหน้าเว็บได้ที่นี่

เมตาแท็กเหล่านี้ให้ข้อมูลเชิงความหมายแก่ Crawler จากเว็บไซต์โซเชียล เช่น Facebook

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับสิ่งที่แนบไปกับโพสต์ใน Facebook ได้ที่เว็บไซต์อย่างเป็นทางการของ Open Graph Protocol

ตรวจสอบตัวอย่างข้อมูลริชมีเดีย

หากต้องการตรวจสอบความถูกต้องของมาร์กอัปใน Facebook คุณสามารถใช้เครื่องมือต่อไปนี้

ใช้การ์ด Twitter เพื่อแสดงตัวอย่างข้อมูลแบบสมบูรณ์บน Twitter

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

ใช้เมตาแท็กเนมสเปซ twitter: เพื่ออธิบายข้อมูลเมตา

หากต้องการให้การ์ด Twitter ทํางาน โดเมนของคุณต้องได้รับอนุมัติและต้องมีแฮชแท็กเมตาที่มี twitter:card เป็นแอตทริบิวต์ name แทนแอตทริบิวต์ property

ต่อไปนี้คือตัวอย่างสั้นๆ

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

การกำหนดรหัส Twitter เป็นค่าของ twitter:site จะทำให้ Twitter ฝังข้อมูลนี้ในโพสต์ที่แชร์เพื่อให้ผู้ใช้มีส่วนร่วมกับเจ้าของหน้าเว็บได้อย่างง่ายดาย

การ์ด Twitter

ดูข้อมูลเพิ่มเติม

ดูข้อมูลเพิ่มเติมเกี่ยวกับการ์ด Twitter ได้ที่

ตรวจสอบตัวอย่างข้อมูลริชมีเดีย

Twitter มีเครื่องมือต่อไปนี้สำหรับตรวจสอบความถูกต้องของมาร์กอัป

แนวทางปฏิบัติแนะนำ

เมื่อพิจารณาทั้ง 3 ตัวเลือกแล้ว สิ่งที่ดีที่สุดที่คุณทำได้คือใส่ทั้ง 3 ตัวเลือกในหน้าเว็บ เช่น

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

โปรดทราบว่า Microdata และ OGP ใช้มาร์กอัปบางอย่างร่วมกัน ดังนี้

  • itemscope อยู่ในแท็ก head
  • title และ description แชร์ระหว่างไมโครดาต้ากับ OGP
  • itemprop="image" ใช้แท็ก link ที่มีแอตทริบิวต์ href แทนที่จะนําแท็ก meta ที่มี property="og:image" มาใช้ซ้ำ

สุดท้าย อย่าลืมตรวจสอบว่าหน้าเว็บปรากฏตามที่คาดไว้ในแต่ละเว็บไซต์โซเชียลก่อนเผยแพร่