Open Graph Protocol هو معيار ويب تم تطويره في الأصل بواسطة Facebook والذي يحول أي صفحة ويب إلى كائن رسومي مع العنوان والوصف والصورة وما إلى ذلك. على الرغم من عدم وجود علاقة مباشرة بين العلامات الوصفية لـ OG وتصنيفات تحسين محركات البحث (SEO) ، إلا أنها لا تزال تؤدي إلى زيادة حركة المرور إلى صفحة الويب الخاصة بك بجعلها "أكثر جاذبية" في الشبكات الاجتماعية (Facebook و Twitter و Linkedin ، إلخ).
مثال على رابط مشترك في Twitter يحتوي على "og: image" و "og: title".
إضافة علامات التعريف OG (وليس فقط) إلى تطبيق React
دون مزيد من الاستحقاق ، دعنا
/public/index.html إلى
/public/index.html الذي تم إنشاؤه حديثًا باستخدام علامات
create-react-app وعلامات OG الوصفية إلى /
/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>
العلامات الديناميكية
الآن ، ماذا لو احتجت إلى إنشاء علامات ديناميكية لكل صفحة؟ هذا سهل!
سوف نستخدم
React Helmet . لذلك دعونا ننشئ مكونًا منفصلاً لإدارة رأس المستند ، والذي سيعين ديناميكيًا العنوان والوصف والصورة للصفحة.
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" } />