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

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

Eiji Kitamura

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

สรุป

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

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

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

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

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

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

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

โปรแกรมรวบรวมข้อมูลใช้วิธีการมากมายในการแยกวิเคราะห์หน้าเว็บและทำความเข้าใจเนื้อหา การใช้ 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 Protocol (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">

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

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

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

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

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

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

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

ตรวจสอบความถูกต้องของตัวอย่างข้อมูลสื่อสมบูรณ์

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

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

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

<!-- 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 มีการแชร์ระหว่าง Microdata และ OGP
  • itemprop="image" ใช้แท็ก link ที่มีแอตทริบิวต์ href แทนการใช้แท็ก meta ซ้ำด้วย property="og:image"

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