क्या आप कभी चाहते हैं कि आपकी Next.js साइट सोशल मीडिया पर साझा किए जाने पर एक समृद्ध वस्तु के रूप में दिखाई दे? यदि ऐसा है, तो आपको ओपन ग्राफ प्रोटोकॉल को लागू करने की आवश्यकता है।

अगला-seo पैकेज आपकी Next.js साइट पर ओपन ग्राफ़ टैग जोड़ना आसान बनाता है। आप तैयार परिणाम पर बेहतर नियंत्रण के लिए अधिक मैनुअल दृष्टिकोण का भी उपयोग कर सकते हैं।

अंत में, आप इस पर विचार करना चाहेंगे कि आपके टैग में वास्तव में कौन सी जानकारी शामिल की जाए।

ओपन ग्राफ क्या है?

ओपन ग्राफ प्रोटोकॉल एक खुला मानक है जो डेवलपर्स को यह नियंत्रित करने की अनुमति देता है कि सोशल मीडिया उनकी सामग्री को कैसे प्रदर्शित करता है। यह मूल रूप से फेसबुक द्वारा विकसित किया गया था लेकिन कई अन्य प्लेटफार्मों ने प्रोटोकॉल को अपनाया है। इनमें ट्विटर, लिंक्डइन और पिंटरेस्ट शामिल हैं।

ओपन ग्राफ़ आपको यह निर्दिष्ट करने देता है कि अन्य साइटों को आपकी सामग्री कैसे प्रदर्शित करनी चाहिए, यह सुनिश्चित करते हुए कि यह अच्छा दिखता है और पढ़ने में आसान है। यह लिंक कैसे प्रस्तुत करता है, इस पर अधिक नियंत्रण की भी अनुमति देता है। इससे क्लिक-थ्रू और अन्य सहभागिता मीट्रिक ट्रैक करना आसान हो जाता है.

ओपन ग्राफ प्रोटोकॉल का उपयोग क्यों करें?

तीन मुख्य क्षेत्र हैं जिनमें ओपन ग्राफ में सुधार होना चाहिए: सोशल मीडिया एंगेजमेंट, एसईओ और वेबसाइट ट्रैफिक।

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

2. एसईओ बढ़ाएँ

ओपन ग्राफ भी मदद कर सकता है अपने एसईओ में सुधार करें. सामग्री के प्रत्येक भाग के लिए शीर्षक, विवरण और छवि निर्दिष्ट करके, आप यह नियंत्रित कर सकते हैं कि यह खोज परिणामों में कैसा दिखाई देता है। यह आपकी वेबसाइट पर क्लिक-थ्रू दर बढ़ाने के साथ-साथ आपकी समग्र रैंकिंग में सुधार करने में मदद कर सकता है।

3. वेबसाइट ट्रैफ़िक बढ़ाएँ

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

4. उपयोगकर्ता अनुभव में सुधार करें

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

Next.js का उपयोग क्यों करें?

Next.js का उपयोग करने के दो मुख्य कारण हैं: प्रदर्शन में सुधार करना और विकास को आसान बनाना।

1. प्रदर्शन सुधारिए

Next.js आपके ऐप को कोड-विभाजन और संसाधनों को प्रीफ़ेच करके प्रदर्शन को बेहतर बनाने में मदद कर सकता है। इससे तेज़ लोड समय और सर्वर लोड कम हो सकता है।

2. विकास को आसान बनाएं

Next.js एक आसान तरीका प्रदान करके विकास को आसान भी बना सकते हैं सर्वर-रेंडर किए गए रिएक्ट ऐप्स बनाएं. यह रिएक्ट ऐप्स को विकसित और परिनियोजित करना तेज़ और आसान बना सकता है।

Next.js में ओपन ग्राफ प्रोटोकॉल को कैसे लागू करें

नेक्स्ट.जेएस में ओपन ग्राफ प्रोटोकॉल को लागू करने के दो तरीके हैं: नेक्स्ट-एसईओ पैकेज का उपयोग करना या कस्टम बनाना _दस्तावेज़.जेएस फ़ाइल।

विधि 1: नेक्स्ट-एसईओ पैकेज का उपयोग करना

नेक्स्ट.जेएस में ओपन ग्राफ प्रोटोकॉल को लागू करने का सबसे आसान तरीका नेक्स्ट-एसईओ पैकेज का उपयोग करना है। यह पैकेज स्वचालित रूप से आपके लिए आवश्यक टैग उत्पन्न करेगा।

अगला-seo पैकेज स्थापित करने के लिए, निम्न आदेश चलाएँ:

NPM इंस्टॉलअगलाएसईओ --सहेजें

पैकेज को स्थापित करने के बाद, आप निम्न कोड को अपने में जोड़कर इसका उपयोग कर सकते हैं index.js फ़ाइल:

आयात {अगला एसईओ} से 'अगला एसईओ';
स्थिरांक डेमोपेज = () => (
<>
<अगला एसईओ
 शीर्षक ="आपका शीर्षक"
 विवरण ="यह एक डेमो विवरण है"
 विहित ="https://www.example.com"
 ओपनग्राफ = {{
 यूआरएल: 'https://www.example.com',
 शीर्षक: 'ग्राफ़ शीर्षक खोलें',
 विवरण: 'ग्राफ़ विवरण खोलें',
 इमेजिस: [
 {
 यूआरएल: 'https://www.example.com/og-image01.jpg',
 चौड़ाई: 800,
 ऊंचाई: 600,
 वैकल्पिक: 'ओग छवि Alt',
 प्रकार: 'छवि/जेपीईजी',
 },
 {
 यूआरएल: 'https://www.example.com/og-image02.jpg',
 चौड़ाई: 900,
 ऊंचाई: 800,
 वैकल्पिक: 'ऑग इमेज ऑल्ट सेकेंड',
 प्रकार: 'छवि/जेपीईजी',
 },
 { यूआरएल: 'HTTPS के://www.example.com/og-image03.jpg' },
 { यूआरएल: 'HTTPS के://www.example.com/og-image04.jpg' },
 ],
 साइट का नाम: 'आपकी साइट का नाम',
 }}
 चहचहाना = {{
 सँभालना: '@सँभालना',
 साइट: '@साइट',
 कार्ड का प्रकार: 'सारांश_बड़ा_छवि',
 }}
 />
<पी>डेमो पेज</पी>
</>
);
निर्यात करनाचूक डेमोपेज;

यह कोड नेक्स्ट-seo पैकेज से NextSeo कॉम्पोनेन्ट को इम्पोर्ट करता है और पेज के लिए टाइटल, डिस्क्रिप्शन और इमेज को निर्दिष्ट करने के लिए इसका उपयोग करता है। यह साइट का नाम और ट्विटर हैंडल भी निर्दिष्ट करता है।

विकास सर्वर शुरू करने के लिए निम्न आदेश चलाएँ:

एनपीएम रन देव

खुला हुआ http://localhost: डेमो पेज देखने के लिए अपने ब्राउज़र में 3000.

विधि 2: कस्टम _document.js फ़ाइल का उपयोग करना

नेक्स्ट.js में ओपन ग्राफ प्रोटोकॉल को लागू करने का दूसरा तरीका एक कस्टम बनाना है _दस्तावेज़.जेएस फ़ाइल। यह फ़ाइल आपको ओपन ग्राफ़ टैग को स्वयं निर्दिष्ट करने की अनुमति देगी और पुन: प्रयोज्य कोड बनाएं सभी पृष्ठों के लिए।

एक कस्टम स्थापित करने के लिए _दस्तावेज़.जेएस फ़ाइल, अपने में एक नई फ़ाइल बनाएँ पृष्ठों निम्नलिखित सामग्री के साथ निर्देशिका:

आयात दस्तावेज़, {एचटीएमएल, हेड, मेन, नेक्स्टस्क्रिप्ट} से 'अगला/दस्तावेज़';
कक्षामेरे दस्तावेज़फैलीदस्तावेज़{
स्थिरअतुल्यकालिक गेटइनिशियलप्रॉप्स (सीटीएक्स) {
स्थिरांक प्रारंभिकप्रॉप्स = इंतजार Document.getInitialProps (ctx);
वापसी {...प्रारंभिकप्रॉप्स};
 }


प्रदान करना() {
वापसी (
<एचटीएमएल>
<सिर>
<मेटा संपत्ति ="ओग: यूआरएल" सामग्री ="https://www.example.com" />
<मेटा संपत्ति ="ओग: शीर्षक" सामग्री ="ग्राफ़ शीर्षक खोलें" />
<मेटा संपत्ति ="ओग: विवरण" सामग्री ="ग्राफ़ विवरण खोलें" />
<मेटा संपत्ति ="ओग: छवि" सामग्री ="https://www.example.com/og-image.jpg" />
<मेटा संपत्ति ="ओग: साइट_नाम" सामग्री ="आपकी साइट का नाम" />
<मेटा नाम ="ट्विटर: कार्ड" सामग्री ="सारांश_बड़ा_छवि" />
<मेटा नाम ="ट्विटर: साइट" सामग्री ="@साइट" />
<मेटा नाम ="ट्विटर: निर्माता" सामग्री ="@सँभालना" />
</Head>
<तन>
<मुख्य />
<नेक्स्टस्क्रिप्ट />
</body>
</Html>
 );
 }
}
निर्यात करनाचूक मेरे दस्तावेज़;

नीचे दी गई सामग्री को अपनी index.js फ़ाइल में जोड़ें:

स्थिरांक डेमोपेज = () => (
<>
<पी>डेमो पेज</पी>
</>
);
निर्यात करनाचूक डेमोपेज;

यह कोड दस्तावेज़ घटक को अगले/दस्तावेज़ से आयात करता है और एक कस्टम बनाता है मेरे दस्तावेज़ अवयव। यह हमारे पेज के शीर्षक, विवरण और छवि के साथ-साथ साइट का नाम और ट्विटर हैंडल निर्दिष्ट करता है।

विकास सर्वर शुरू करने के लिए निम्न आदेश चलाएँ:

एनपीएम रन देव

खुला हुआ http://localhost: डेमो पेज देखने के लिए अपने ब्राउज़र में 3000.

अपनी वेबसाइट पर ओपन ग्राफ़ टैग जोड़ने से आप इस पर अधिक नियंत्रण प्राप्त कर सकते हैं कि यह सोशल मीडिया पोस्ट में कैसे दिखाई देता है और क्लिक-थ्रू दरों को बेहतर बनाने में मदद कर सकता है। आप अपनी वेबसाइट के SERPs में प्रदर्शित होने के तरीके में भी सुधार कर सकते हैं, जिससे अंततः वेबसाइट रैंकिंग में सुधार हो सकता है।

साइट रैंकिंग में सुधार करने के कई अन्य तरीके भी हैं। आपको अपनी वेबसाइट को मोबाइल उपकरणों के लिए अनुकूलित करना चाहिए और कीवर्ड-समृद्ध शीर्षक और विवरण का उपयोग करना चाहिए। लेकिन ओपन ग्राफ़ टैग का उपयोग करना आरंभ करने का एक तेज़ और आसान तरीका है।