react seo مشاكل عند مشاركة الروابط

عبد النور محمد · 30 أغسطس 2021

مرحبا قمت بأنهاء مشروع react وقمت باستضافته وكل شيء يعمل دون مشاكل باستثناء مشاركة صفحات الموقع لا تظهر معلومات الخاصة بالصفحات مثلا صفحة الكتاب الواحد لدي أضفت فيها المعلومات بمكتيه helmet

  <Helmet>
                <title>{data.title}</title>
                <meta name="title" content={data.title} />
                {/* <meta name="description" content={data.description} /> */}

                <meta property="og:title" content={data.title} />
                <meta
                  property="og:url"
                  content={`....${data.id}`}
                />
                <meta property="og:type" content="book" />
                {/* <meta property="og:description" content={data.description} /> */}
                <meta
                  property="og:image"
                  content={`${process.env.REACT_APP_STORAGE}/${data.cover}`}
                />
              </Helmet>

المشكلة ان المعلومات تظهر تظهر في ادوات المطور element لكن لا تظهر في page source وعند مشاركة الصفحة في وسائل التواصل الاجتماعي لا تظهر مغلومات ال meta فما المشكلة

Salah Eddin Beriani2 · 31 أغسطس 2021

هذا من الأسباب التي أدت لظهور شيء مثل nextjs واذا أردت كل ميزات ال seo فيمكنك أن تحول التطبيق الى nextjs وستتمتع هناك بكل ميزات ال seo اذا كان هذا يعتبر خيار مكلفا لك فيمكنك استخدام الخيار الثاني وهو انشاء custom server و عمل الserver side rendering بنفسك و ايتاح react app عن طريق server ةهذا مثال ملائم جدا في حالتك

أولا ضع placeholders في index.html داخل مجلد public

 <head>
    ...
    <meta name="description" content="__META_DESCRIPTION__"/>
    <meta name="og:title" content="__META_OG_TITLE__"/>
    <meta name="og:description" content="__META_OG_DESCRIPTION__"/>
    <meta name="og:image" content="__META_OG_IMAGE__"/>
    ...
  </head>

ثم ستملأ ال placeholders في ال custom server وهكذا حلت مشكلتك كليا

const path = require('path');
const fs = require("fs"); 

const app = express();

const PORT = process.env.PORT || 3000;
const indexPath  = path.resolve(__dirname, '..', 'build', 'index.html');

// ايتاح المصادر الثابتة 
app.use(express.static(
    path.resolve(__dirname, '..', 'build'),
    { maxAge: '30d' },
));

app.get('/*', (req, res, next) => {
    fs.readFile(indexPath, 'utf8', (err, htmlData) => {
        if (err) {
            console.error('Error during file reading', err);
            return res.status(404).end()
        }
        // المعرف من الرابط مثلا
        const postId = req.query.id;
        const post = axios(....postId);//هذا لجلب المعلومات 
        if(!post) return res.status(404).send("Post not found");

        // inject meta tags
        htmlData = htmlData.replace(
            "<title>React App</title>",
            `<title>${post.title}</title>`
        )
        .replace('__META_OG_TITLE__', post.title)
        .replace('__META_OG_DESCRIPTION__', post.description)
        .replace('__META_DESCRIPTION__', post.description)
        .replace('__META_OG_IMAGE__', post.thumbnail)
        return res.send(htmlData);
    });
});
// listening...
app.listen(PORT, (error) => {
    if (error) {
        return console.log('Error during app startup', error);
    }
    console.log("listening on " + PORT + "...");
});

شرف الدين حفني · 30 أغسطس 2021

ذلك طبيعي لأن react تعمل في الواجهة الأمامية, حتى يظهر الكود في الpage source يجب أن تقم بعمل server side rendering وذلك من خلال عدة تقنيات اشهرهم next.js

ولكن لا تقلق فإن المعلومات تظهر لدى جوجل,ولكنها لا تظهر لدى باقي زواحف الإنترنت (web crawler)

Hassan Hedr · 30 أغسطس 2021

عند طلب العميل للصفحة بانك سترسل له صفحة HTML فارغة خالية من المحتوى (تقريبا)، ومرتبط بها الشيفرة التي طورتها باستخدام React.
عند جلب هذه الشيفرة وتشغيلها داخل المتصفح يقوم React بملئ محتويات الصفحة ويتولى تحديثها
هذا ما يدعى ب "التصيير بطرف العميل - Client side rendering"

محركات البحث عند وصولها لموقعك لن تقوم بتشغيل javascript اي ستتلقى الصفحة فارغة فقط، أي معلومات وصفية تريدها ان تظهر لمحركات البحث يجب تعديل ملف index.html داخل مجلد public وتضيف كافة المعلومات (ستكون معلومات مشتركة بين كل الصفحات)
الحل هو تصيير الصفحة على الخادم (اطار العمل NextJS يستخدم ذلك) ومن ثم ارسالها لزاحف محرك البحث عن طريق ما يسمى "التصيير بطرف الخادم - Server side rending"

Helmet يساعدك فقط على اضافة وتغيير محتويات العنصر head خلال عمل مكتبة React سواء على الخادم أو بطرف العميل

react seo مشاكل عند مشاركة الروابط

السؤال

عبد النور محمد

3 أجوبة على هذا السؤال

Recommended Posts

Salah Eddin Beriani2

شرف الدين حفني

Hassan Hedr

انضم إلى النقاش

إعلانات

تابعنا على

الرئيسية

تابعنا

دروس ومقالات

أسئلة وأجوبة

كتب

دورات

بطاقات هدية