📡 🗾 📙 ओपन ग्राफ़ के बारे में मत भूलना 🍏 👰 📧

ओपन ग्राफ प्रोटोकॉल एक वेब मानक है जो मूल रूप से फेसबुक द्वारा विकसित किया गया है जो किसी भी वेबपेज को शीर्षक, विवरण, छवि और इसी तरह एक ग्राफ ऑब्जेक्ट में बदल देता है। भले ही ओजी मेटा टैग और बेहतर एसईओ रैंकिंग के बीच कोई सीधा संबंध नहीं है, फिर भी यह सामाजिक नेटवर्क (फेसबुक, ट्विटर, लिंक्डइन, आदि) में इसे और अधिक "आकर्षक" बनाकर आपके वेबपेज पर अधिक ट्रैफिक चलाता है।

ट्विटर में साझा किए गए लिंक का एक उदाहरण जिसमें "ओग: इमेज" और "ओग: टाइटल" है।

अपने रिएक्ट ऐप में OG (और न केवल) मेटा टैग जोड़ना

बिना किसी कारण के चलो नव-निर्मित रिएक्ट ऐप में जम्प करें create-react-app और ओजी मेटा टैग के साथ /public/index.html पर /public/index.html । यह कुछ इस तरह दिखना चाहिए:

 <!DOCTYPE html> <html> <head> <meta charSet="utf-8"/> <meta http-equiv="x-ua-compatible" content="ie=edge"/> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/> <link rel="alternate" type="application/rss+xml" href="/rss.xml"/> <title>Awesome App</title> <meta property="og:title" content="Awesome app - the best app ever" /> <meta property="og:type" content="website" /> <meta property="og:image" content="https://picsum.photos/id/52/1200/600" /> <meta property="og:description" content="Describe stuff here." /> <meta property="og:url" content="yourawesomeapp.com" /> </head> <body> <noscript>This app works best with JavaScript enabled.</noscript> <div id="root"></div> </body> </html>

गतिशील टैग

अब, क्या होगा अगर मुझे हर पृष्ठ के लिए गतिशील रूप से टैग बनाने की आवश्यकता है? यह आसान है!

हम रिएक्ट हेलमेट का उपयोग करेंगे। तो चलो दस्तावेज़ हेड प्रबंधन के लिए एक अलग घटक बनाते हैं, जो गतिशील रूप से पृष्ठ के लिए शीर्षक, विवरण, छवि सेट करेगा।

 import React from 'react'; import Helmet from 'react-helmet'; function SEO({ pageProps }) { return ( <Helmet> <title>{pageProps.title}</title> <meta property="og:title" content={pageProps.title} /> <meta property="og:image" content={pageProps.thumbnail} /> <meta property="og:url" content={pageProps.url} /> </Helmet> ) } export default SEO;

हम अपने मेटा टैग सेट करना चाहते हैं, हम बस एसईओ घटकों को आवश्यक तर्कों की तरह माउंट करेंगे

 <SEO pageProps={ title: "Yet another page", thumbnail="https://picsum.photos/id/52/1200/600", url="yetanotherawesomeapp.com" } />

ओपन ग्राफ़ के बारे में मत भूलना

अपने रिएक्ट ऐप में OG (और न केवल) मेटा टैग जोड़ना

गतिशील टैग

More articles: