सामाजिक खोज

हर पेज पर कोड की कुछ लाइनें जोड़कर, यह तय किया जा सकता है कि सोशल मीडिया पर शेयर किए जाने पर आपकी साइट कैसी दिखे. इससे आपकी साइट पर ज़्यादा लोग आ सकते हैं. ऐसा इसलिए, क्योंकि इससे लोगों को ज़्यादा जानकारी वाले झलक दिखती है.

Eiji Kitamura

हर पेज पर कोड की कुछ लाइनें जोड़कर, यह तय किया जा सकता है कि सोशल मीडिया पर शेयर किए जाने पर आपकी साइट कैसी दिखे. इससे आपकी साइट पर ज़्यादा लोग आ सकते हैं. ऐसा इसलिए, क्योंकि इससे लोगों को ज़्यादा जानकारी वाली झलक मिलती है.

खास जानकारी

  • Google+ के लिए पेज का टाइटल, ब्यौरा, और इमेज उपलब्ध कराने के लिए, schema.org माइक्रोडेटा का इस्तेमाल करें.
  • Facebook के लिए पेज का टाइटल, ब्यौरा, और इमेज देने के लिए, ओपन ग्राफ़ प्रोटोकॉल (ओजीपी) का इस्तेमाल करें.
  • Twitter पर पेज का टाइटल, ब्यौरा, इमेज, और Twitter आईडी देने के लिए, Twitter कार्ड का इस्तेमाल करें.

हर पेज पर कोड की कुछ लाइनें जोड़कर, यह तय किया जा सकता है कि सोशल मीडिया पर शेयर किए जाने पर आपकी साइट कैसी दिखे. इससे, उपयोगकर्ताओं को ज़्यादा जानकारी वाली झलकियां मिलती हैं. इससे, उपयोगकर्ताओं की दिलचस्पी बढ़ सकती है. इसके बिना, सोशल साइटें सिर्फ़ बुनियादी जानकारी उपलब्ध कराएंगी. इनमें इमेज या अन्य मददगार जानकारी शामिल नहीं होगी.

आपको क्या लगता है कि इनमें से किस पर क्लिक किए जाने की संभावना ज़्यादा है? लोग इमेज की तरफ़ आकर्षित होते हैं. साथ ही, जब उन्हें किसी प्रॉडक्ट की झलक पहले ही मिल जाती है, तो उन्हें ज़्यादा भरोसा होता है कि उन्हें वह प्रॉडक्ट पसंद आएगा.

सही मार्कअप के साथ: सही टाइटल, छोटा ब्यौरा, और एक इमेज शामिल की गई है. इन आइटम को जोड़ने से, यूज़र ऐक्टिविटी बढ़ाने में मदद मिल सकती है.
सही मार्कअप के साथ: सही टाइटल, कम शब्दों में ब्यौरा, और एक इमेज शामिल की गई है. इन आइटम को जोड़ने से, यूज़र ऐक्टिविटी बढ़ाने में मदद मिल सकती है.
सही मार्कअप के बिना, सिर्फ़ पेज का टाइटल शामिल किया जाता है.
सही मार्कअप के बिना, सिर्फ़ पेज का टाइटल शामिल किया जाता है.

जब कोई व्यक्ति किसी सोशल नेटवर्क पर अपने दोस्तों के साथ आपकी वेबसाइट शेयर करना चाहता है, तो वह शायद कुछ नोट जोड़कर बताएगा कि यह कितनी शानदार है. इसके बाद, वह इसे शेयर करेगा. हालांकि, किसी वेबसाइट के बारे में बताना मुश्किल हो सकता है. साथ ही, ऐसा हो सकता है कि पेज के मालिक के नज़रिए से, वेबसाइट के बारे में बताने का मकसद पूरा न हो. कुछ सेवाओं में, नोट में वर्णों की संख्या सीमित होती है.

अपने पेजों में सही मेटाडेटा जोड़कर, उपयोगकर्ताओं के लिए कॉन्टेंट शेयर करने की प्रोसेस को आसान बनाया जा सकता है. इसके लिए, टाइटल, ब्यौरा, और आकर्षक इमेज उपलब्ध कराएं. इसका मतलब है कि उन्हें लिंक के बारे में बताने के लिए, अपना कीमती समय या वर्ण खर्च करने की ज़रूरत नहीं है.

Google+ पर रिच स्निपेट उपलब्ध कराने के लिए, schema.org + माइक्रोडेटा का इस्तेमाल करना

क्रॉलर, किसी पेज को पार्स करने और उसके कॉन्टेंट को समझने के लिए कई तरीके इस्तेमाल करते हैं. माइक्रोडेटा और 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 जोड़ें

itemscope जोड़कर, टैग को किसी खास आइटम के बारे में कॉन्टेंट के ब्लॉक के तौर पर तय किया जा सकता है.

अपनी वेबसाइट का टाइप तय करने के लिए, itemtype जोड़ें

itemtype एट्रिब्यूट के साथ itemscope का इस्तेमाल करके, आइटम का टाइप बताया जा सकता है. itemtype की वैल्यू, आपके वेब पेज पर मौजूद कॉन्टेंट के टाइप के हिसाब से तय की जा सकती है. आपको इस पेज पर, अपने काम का कोई न कोई विकल्प मिल जाएगा.

schema.org की शब्दावली का इस्तेमाल करके, हर आइटम के बारे में बताने के लिए itemprop जोड़ें

itemprop, स्कोप में itemtype के लिए प्रॉपर्टी तय करता है. सोशल साइटों को मेटाडेटा देने के लिए, itemprop की सामान्य वैल्यू name, description, और image होती हैं.

रिच स्निपेट की पुष्टि करना

Google+ पर रिच स्निपेट की पुष्टि करने के लिए, इन टूल का इस्तेमाल किया जा सकता है:

स्ट्रक्चर्ड डेटा टेस्टिंग टूल

Facebook पर रिच स्निपेट उपलब्ध कराने के लिए, ओपन ग्राफ़ प्रोटोकॉल (ओजीपी) का इस्तेमाल करना

ओपन ग्राफ़ प्रोटोकॉल (ओजीपी), 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 वेब पेज का कैननिकल यूआरएल.
og:image शेयर की गई पोस्ट में अटैच की गई इमेज का यूआरएल.
og:type वह स्ट्रिंग जिससे वेब पेज के टाइप का पता चलता है. अपने वेब पेज के लिए सही फ़ॉन्ट यहां ढूंढा जा सकता है.

ये मेटा टैग, Facebook जैसी सोशल साइटों के क्रॉलर को सिमैंटिक जानकारी देते हैं.

ज़्यादा जानें

Facebook पर पोस्ट में अटैच की जा सकने वाली चीज़ों के बारे में ज़्यादा जानने के लिए, Open Graph Protocol की आधिकारिक साइट पर जाएं.

रिच स्निपेट की पुष्टि करना

Facebook पर अपने मार्कअप की पुष्टि करने के लिए, इन टूल का इस्तेमाल किया जा सकता है:

Twitter पर रिच स्निपेट उपलब्ध कराने के लिए, Twitter कार्ड इस्तेमाल करना

Twitter कार्ड, Twitter के लिए लागू होने वाले Open Graph प्रोटोकॉल का एक एक्सटेंशन है. इनकी मदद से, ट्वीट में इमेज और वीडियो जैसे मीडिया अटैचमेंट जोड़े जा सकते हैं. साथ ही, अपने वेब पेज का लिंक भी जोड़ा जा सकता है. सही मेटाडेटा जोड़ने पर, आपके पेज के लिंक वाले ट्वीट में एक कार्ड जुड़ जाएगा. इसमें वह ज़्यादा जानकारी शामिल होगी जो आपने जोड़ी है.

मेटाडेटा के बारे में बताने के लिए, twitter: नेमस्पेस वाले मेटा टैग इस्तेमाल करना

Twitter कार्ड का इस्तेमाल करने के लिए, आपके डोमेन को मंज़ूरी मिलना ज़रूरी है. साथ ही, उसमें एक ऐसा मेटा टैग होना चाहिए जिसमें property एट्रिब्यूट के बजाय, twitter:card को name एट्रिब्यूट के तौर पर इस्तेमाल किया गया हो.

यहां एक उदाहरण दिया गया है:

<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 ये सुविधाएं देता है:

सबसे सही तरीका

इन तीनों विकल्पों को ध्यान में रखते हुए, सबसे अच्छा यह होगा कि आप अपने वेब पेज में इन सभी को शामिल करें. यहां एक उदाहरण दिया गया है:

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

ध्यान दें कि माइक्रोडेटा और ओजीपी कुछ मार्कअप शेयर करते हैं:

  • itemscope, head टैग में मौजूद है
  • title और description को माइक्रोडेटा और ओजीपी के बीच शेयर किया जाता है
  • itemprop="image", property="og:image" के साथ meta टैग का फिर से इस्तेमाल करने के बजाय, href एट्रिब्यूट के साथ link टैग का इस्तेमाल कर रहा है

आखिर में, पक्का करें कि आपका वेब पेज हर सोशल साइट पर उम्मीद के मुताबिक दिख रहा हो. इसके बाद ही, उसे पब्लिश करें.