اکتشاف اجتماعی

با افزودن چند خط کد به هر صفحه، می‌توانید بر نحوه نمایش سایتتان هنگام هم‌رسانی ازطریق رسانه‌های اجتماعی تأثیر بگذارید. این کار می‌تواند با ارائه پیش‌نمایش‌هایی با اطلاعات غنی‌تر از آنچه درغیراین‌صورت دردسترس خواهد بود، به جذب افراد بیشتر به سایتتان کمک کند.

Eiji Kitamura

با افزودن چند خط کد به هر صفحه، می‌توانید بر نحوه نمایش سایتتان هنگام هم‌رسانی ازطریق رسانه‌های اجتماعی تأثیر بگذارید. این کار می‌تواند با ارائه پیش‌نمایش‌هایی با اطلاعات غنی‌تر از آنچه درغیراین‌صورت دردسترس خواهد بود، به جذب افراد بیشتر به سایت شما کمک کند.

خلاصه

  • از ریزداده‌های schema.org برای ارائه عنوان صفحه، شرح، و تصویری برای Google+‎ استفاده کنید.
  • از «پروتکل نمودار باز» (OGP) برای ارائه عنوان صفحه، شرح، و تصویر برای Facebook استفاده کنید.
  • از «کارت‌های توییتر» برای ارائه عنوان صفحه، شرح، تصویر، و شناسه توییتر برای توییتر استفاده کنید.

با افزودن چند خط کد به هر صفحه، می‌توانید بر نحوه نمایش سایتتان هنگام هم‌رسانی ازطریق رسانه‌های اجتماعی تأثیر بگذارید. این کار می‌تواند با ارائه پیش‌نمایش‌هایی با اطلاعات غنی‌تر از آنچه درغیراین‌صورت دردسترس خواهد بود، به افزایش تعامل کمک کند. بدون آن، سایت‌های اجتماعی فقط اطلاعات پایه را بدون تصویر یا اطلاعات مفید دیگر ارائه می‌دهند.

به‌نظرتان کدام‌یک احتمال بیشتری دارد که کلیک شود؟ افراد جذب تصاویر می‌شوند و وقتی پیش‌نمایش اولیه را می‌بینند، اطمینان بیشتری دارند که از آنچه پیدا می‌کنند خوششان خواهد آمد.

با نشانه‌گذاری مناسب: عنوان صحیح، شرح کوتاه، و تصویر گنجانده شده است. افزودن این موارد می‌تواند به افزایش تعامل کمک کند.
با نشانه‌گذاری مناسب: عنوان صحیح، شرح کوتاه، و تصویر گنجانده شده است. افزودن این موارد می‌تواند به افزایش تعامل کمک کند.
بدون نشانه‌گذاری مناسب، فقط عنوان صفحه گنجانده می‌شود.
بدون نشانه‌گذاری مناسب، فقط عنوان صفحه گنجانده می‌شود.

وقتی فردی در یک شبکه اجتماعی می‌خواهد وب‌سایت شما را با دوستانش هم‌رسانی کند، احتمالاً یادداشت‌هایی اضافه می‌کند که توضیح می‌دهد چقدر عالی است و آن را هم‌رسانی می‌کند. اما توصیف وب‌سایت معمولاً دشوار است و ممکن است از دیدگاه مالک صفحه، نکته اصلی را ازقلم بیندازد. برخی‌از سرویس‌ها تعداد نویسه‌هایی را که کاربران می‌توانند در یادداشت قرار دهند محدود می‌کنند.

با افزودن فراداده مناسب به صفحه‌هایتان، می‌توانید با ارائه عنوان، شرح، و تصویر جذاب، فرایند هم‌رسانی را برای کاربران ساده کنید. این یعنی لازم نیست وقت (یا نویسه‌های) ارزشمند خود را صرف توصیف پیوند کنند.

استفاده از schema.org + ریزداده برای ارائه قطعه‌های غنی در +Google

خزنده‌ها از روش‌های زیادی برای تجزیه صفحه و درک محتوای آن استفاده می‌کنند. بااستفاده از ریز داده و واژگان 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>

درحالی‌که بیشتر فراداده‌ها در بخش head صفحه وب جاسازی شده‌اند، ریزداده‌ها در جایی قرار دارند که بافت وجود دارد.

برای تعریف کردن دامنه ریزداده، itemscope را اضافه کنید

با افزودن itemscope، می‌توانید برچسب را به‌عنوان بلوکی از محتوا درباره موردی خاص مشخص کنید.

برای تعریف نوع وب‌سایتتان، itemtype را اضافه کنید

بااستفاده از مشخصه itemtype همراه با itemscope می‌توانید نوع مورد را مشخص کنید. مقدار itemtype را می‌توان براساس نوع محتوای صفحه وب شما تعیین کرد. باید بتوانید یک مورد مرتبط را در این صفحه پیدا کنید.

itemprop را اضافه کنید تا هر مورد را بااستفاده از واژگان schema.org توصیف کنید

itemprop ویژگی‌های itemtype را در محدوده تعریف می‌کند. برای ارائه فراداده به سایت‌های اجتماعی، مقادیر معمول itemprop عبارتند از name، description، و image.

اعتبارسنجی قطعه‌های غنی

برای اعتبارسنجی قطعه‌های غنی در Google+‎، می‌توانید از ابزارهایی مانند موارد زیر استفاده کنید:

ابزار آزمایش داده‌های ساختاریافته

استفاده از پروتکل نمودار باز (OGP) برای ارائه قطعه‌های غنی در Facebook

پروتکل نمودار باز (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">

وقتی این فراداده در بخش head صفحه‌تان گنجانده شود، اطلاعات غنی گزیده را هنگام هم‌رسانی صفحه ارائه می‌دهد.

استفاده از برچسب‌های جای نام og: meta برای توصیف فراداده

برچسب meta از مشخصه property و مشخصه content تشکیل شده است. مشخصات و محتوا ممکن است مقادیر زیر را داشته باشند:

دارایی محتوا
og:title عنوان صفحه وب.
og:description شرح صفحه وب.
og:url نشانی وب متعارف صفحه وب.
og:image نشانی وب تصویر پیوست‌شده به پست هم‌رسانی‌شده.
og:type رشته‌ای که نوع صفحه وب را نشان می‌دهد. می‌توانید در اینجا موردی را که برای صفحه وب شما مناسب است پیدا کنید.

این متا تگ‌ها اطلاعات معنایی را به خزنده‌های سایت‌های اجتماعی، مانند Facebook، ارائه می‌دهند.

بیشتر بدانید

برای کسب اطلاعات بیشتر درباره چیزهایی که می‌توانید به پست در Facebook پیوست کنید، به سایت رسمی Open Graph Protocol مراجعه کنید.

اعتبارسنجی قطعه‌های غنی

برای اعتبارسنجی نشان‌گذاری‌تان در Facebook، می‌توانید از ابزارهایی مثل موارد زیر استفاده کنید:

استفاده از کارت‌های Twitter برای ارائه قطعه‌های غنی در Twitter

کارت‌های Twitter افزونه‌ای برای پروتکل Open Graph قابل‌اجرا برای 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 این اطلاعات را در پست هم‌رسانی‌شده جاسازی می‌کند تا افراد بتوانند به‌راحتی با مالک صفحه تعامل برقرار کنند.

کارت X.

بیشتر بدانید

برای کسب اطلاعات بیشتر درباره «کارت‌های Twitter»، به این سایت مراجعه کنید:

اعتبارسنجی قطعه‌های غنی

برای اعتبارسنجی نشان‌گذاری‌تان، Twitter این موارد را ارائه می‌دهد:

روال مطلوب

با توجه به هر سه گزینه، بهترین کاری که می‌توانید انجام دهید این است که همه آن‌ها را در صفحه وب خود بگنجانید. مثالی در اینجا ارائه شده است:

<!-- 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>

توجه داشته باشید که ریزداده و OGP در برخی نشان‌گذاری‌ها مشترک هستند:

  • itemscope در برچسب head قرار دارد
  • title و description بین ریزداده و OGP هم‌رسانی شده‌اند
  • ‫itemprop="image" به‌جای استفاده مجدد از برچسب meta با property="og:image"، از برچسب link با مشخصه href استفاده می‌کند

درنهایت، حتماً پیش‌از انتشار، اعتبار صفحه وب خود را در هر سایت اجتماعی بررسی کنید تا مطمئن شوید به‌درستی نمایش داده می‌شود.