سئو در ری اکت با React Helmet ! باگ کتابخانه React Helmet چیست ؟
سئو در ری اکت همیشه یکی از پربرحث ترین چالش های این کتابخونه محبوب بوده ! خیلیا میگن بزرگترین ضعف کتابخونه ی ری اکت سئو نشدن سایت های ری اکتی هست! تو این مقاله میخوایم ببینیم که چالش سئو در React رو چجوری باید به کمک کتابخانه React Helmet حل کنیم 🙂
کتابخانه React Helmet چیست ؟
کتابخانه React Helmet یک کامپوننت بسیار کاربردی هست که به ما در مدیریت تگ head در سند HTML کمک میکنه.
همونطور که میدونیم خزنده ( Crawler ) های موتور های جستجوگر مثل گوگل از طریق تگ header موجود در فایل های HTML میتونن متوجه بشن که ما راجب چه موضوعی صحبت کردیم.
در حقیقت اطلاعات موجود در تگ head مشخص میکنه که صفحه ما درمورد چه موضوعی هست. پس ما باید اطلاعات مورد نیاز Crawler هارو داخل تگ head تمامی صفحاتمون بزاریم تا Crawler ها بدونن صفحه ما در رابطه با چه موضوعی هست.
خود React به ما امکان مدیریت تگ head رو نمیده اما خوشبختانه کتابخونه React Helmet برای مدیریت این چالش به ما کمک بزرگی میکنه 🙂
کتابخانه React Helmet چه کمکی به ما میکنه ؟
کتابخانه React Helmet به ما اجازه میده که title ، Description و meta tag های هر صفحه از وبسایتمون رو بصورت داینامیک تنظیم کنیم.
مدیریت تگ head برای تنظیم title , description و meta tag ها برای وبسایت هایی که صفحات زیادی دارن کار خیلی سختیه! فرض کنید یک سایت فروشگاهی با بیش از 300 محصول داریم!
کتابخانه ری اکت Helmet بسادگی این چالش رو برای ما مدیریت و حل میکنه !
با React Helmet چه کارهایی میشه کرد ؟
- میتونیم تمامی تگ های معتبر رو برای صفحه خودمون تنظیم کنیم مثل title , base , link , meta , noscript , script و style
- میتونیم به body , html و title یک خصوصیت ( attributes ) بدیم
کتابخانه React Helmet چه ویژگی هایی داره ؟
- از Server-Side Rendering ( رندر سمت سرور ) پشتیبانی میکنه.
- تگ های تنظیم شده روی کامپوننت فرزند بواسطه کامپوننت پدر از بین نمیره.
- امکان دمبال کردن تغییرات DOM رو داریم ( DOM Changes Tracking )
در ادامه میریم که این کتابخونه ارزشمند رو نصب کنیم و ازش تو پروژمون استفاده کنیم…
نصب کتابخانه React Helmet
ابتدا باید به کمک دستور زیر این کتابخونه رو نصب کنیم :
npm install react-helmet --save
حالا که ری اکت Helmet رو نصب کردیم، میتونیم این کتابخونه رو در صفحه مدنظرمون import کنیم و تگ های دلخواه خودمون رو داخل head اون صفحه تنظیم کنیم:
import React from "react"
import {Helmet} from "react-helmet"
export const Home = () => {
return (
<div>
<Helmet htmlAttributes>
<html lang="fa" />
<title>فرانت اندی- مرجع تخصصی فرانت اند</title>
<meta name="description" content="آموزش فرانت اند" />
</Helmet>
</div>
);
}
تو خط 8 تیکه کد بالا ، زبان صفحه رو مشخص کردیم ( فارسی )
همچنین در خط 9 و 10 مقادیر title و desription رو مشخص کردیم.
اما مشکل تیکه کد بالا این هست که ما بصورت استاتیک از پکیج React Helmet استفاده کردیم! در ادامه میریم که بصورت داینامیک از React Helmet استفاده کنیم ..
استفاده داینامیک از React Helmet
ما میتونیم برای صفحاتی که استاتیک هستن از روش بالا استفاده کنیم. اما برای صفحاتی که داینامیک هستن ( مثل مقالات ، محصولات و .. ) به دلیل اینکه درموردشون چیزی نمیدونیم، نمیتونیم تگ هاشون رو تنظیم کنیم.
در چنین سناریو هایی، ما باید اطلاعات مورد نیاز تگ head رو از طریق props دریافت کنیم و این اطلاعات داینامیک رو تنظیم کنیم:
import React from "react"
import {Helmet} from "react-helmet"
export const Product = ({title, description, meta = []}) => {
return(
<Helmet
title = {title}
htmlAttributes={{ lang: "fa" }}
meta={[
{
name: `description`,
content: description,
}
]}
/>
)
}
تو تیکه کد بالا ما باید تگ head صفحه محصول خودمون رو بصورت داینامیک تنظیم کنیم. اطلاعات تگ هارو توسط props دریافت کردیم ( بصورت destructure شده )
سپس تو خط 7 تا 14 ، تگ های مورد نظرمون رو بصورت داینامیک تنظیم کردیم تا این صفحه Seo Friendly باشه.
تگ title و description تگ های بسیار مهمی هستن، چراکه توسط خزنده های موتور های جستجوگر بررسی میشن و اعتبار صفحه شمارو تعیین میکنن.
اگه به خط 9 دقت کنید میبینید که یک آرایه داریم که داخلش Object هایی تعریف شده. ما میتونیم تگ های مختلفی رو در قالب Object داخل این آرایه قرار بدیم.
ما میتونیم تگ های OpenGrapgh رو داخل این آرایه قرار بدیم که توسط خزنده های Facebook شناسایی میشن :
meta={[
{
property: "og:url",
content: someUrl
},
{
property: "og:type",
content: someArticle
},
{
property: "og:title",
content: someTitle
},
{
property: "og:description",
content: someDescription
},
{
property: "og:image",
content: someImage
},
{
property: "fb:app_id",
content: someFbAppId
}
]
همچنین میتونیم تگ های Twitter رو هم تعریف کنیم که توسط توییر شناسایی میشن :
meta={[
{
property: "twitter:card",
content: someSummary
},
{
property: "twitter:creator",
content: someAuthorName
},
{
property: "twitter:title",
content: someTitle
},
{
property: "twitter:description",
content: someDescription
},
{
property: "twitter:image",
content: someImage
}
]
مشکل کتابخانه React Helmet چیه ؟
برخلاف همه مقاله هایی که درمورد آموزش کتابخانه React Helmet صحبت میکنن و صرفا به نقات قوتش اشاره میکنن، ما میخوایم به مشکلات خیلی خیلی جدی این کتابخونه هم اشاره کنیم!
این کتابخانه تقریبا منسوخ شده و آخرین بروزرسانی اون مربوط به 3 سال پیشه! پیشنهاد ما در فِرانت اِندی برای مدیریت سئو در ری اکت کتابخانه react-helmet-async هست.
React-Helmet چندین باگ داره از جمله memory leaks !
باتوجه به اینکه توسعه دهنده های اصلی React Helmet سالها این کتابخونه رو بروزرسانی نکردن و هیچ توجهی به باگهای این کتابخونه ندارن و ازش پشتیبانی نمیکنن، در حال حاضر react-helmet-async انتخاب مناسب تری هست..
جمع بندی
React Helmet با هدف مدیریت تگ head در کتابخانه ری اکت معرفی شد. ما میتونیم به کمک این کتابخانه تگ های head خودمون رو بصورت داینامیک مدیریت کنیم.
همچنین ما میتونیم در صفحاتی که Server Side هستن نیز از ری اکت Helmet استفاده کنیم.
به کمک کتابخانه react-helmet میشه تمامی تگ هایی که موتور های جستجوگر نیاز دارن رو تنظیم کنیم و مشکلات سئو در React رو برطرف کنیم.
در واقع react-helmet اپیکیشن مارو Seo Friendly و Social media Friendly میکنه 🙂
کتابخانه React Helmet یک کامپوننت بسیار کاربردی هست که به ما در مدیریت تگ head در سند HTML کمک میکنه. این کتابخانه در پروژه هایی که با کتابخانه ری اکت توسعه دادن شدن، قابل استفادس.
این کتابخانه تقریبا منسوخ شده و آخرین بروزرسانی اون مربوط به 3 سال پیشه! پیشنهاد ما در فِرانت اِندی برای مدیریت سئو در ری اکت کتابخانه react-helmet-async هست.
کتابخانه React-Helmet چندین باگ داره از جمله memory leaks !
همچنین تیم سازنده اون، هیچ پشتیبانی در سالهای اخیر برای این کتابخانه انجام ندادن.
2 دیدگاه
به گفتگوی ما بپیوندید و دیدگاه خود را با ما در میان بگذارید.
واقعا برام مفید بود ممنون .. خیلی سوالا درمورد سئو در ریکت داشتم که به همشون پاسخ دادین.
سلام و درود
زنده باشی محسن جان خوشحالم که این مقاله برات مفید واقع شده.
موفق باشی