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

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

Eiji Kitamura

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

สรุป

• ใช้ Microdata ของ schema.org เพื่อระบุชื่อหน้า คำอธิบาย และรูปภาพสำหรับ Google+
• ใช้ Open Graph Protocol (OGP) เพื่อระบุชื่อหน้า คำอธิบาย และรูปภาพสำหรับ Facebook
• ใช้ Twitter Cards เพื่อระบุชื่อหน้าเว็บ คำอธิบาย รูปภาพ และรหัส 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>

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

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

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

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

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

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

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

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

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

• เครื่องมือทดสอบ Structured Data - Search Console

ใช้ Open Graph Protocol (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: namespaced meta เพื่ออธิบายข้อมูลเมตา

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

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

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

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

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

• ogp.me

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

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

• Debugger

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

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

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

หากต้องการให้ Twitter Card ทำงาน โดเมนของคุณต้องได้รับอนุมัติและต้องมีเมตาแท็กที่มี 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 Cards ได้ที่

• เว็บไซต์ของนักพัฒนาซอฟต์แวร์ 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"

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