सामाजिक खोज

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

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 जोड़ें

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

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

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

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

Google+ पर रिच स्निपेट सत्यापित करने के लिए, आप इन टूल का उपयोग कर सकते हैं:

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

Facebook पर रिच स्निपेट देने के लिए, ओपन ग्राफ़ प्रोटोकॉल (OGP) का इस्तेमाल करना

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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