سه راه حل برای بهبود سئو در فلاتر

سلام به همه فلاتری‌های عزیز، امروز میخوام در مورد بهبود سئو در وب اپلیکیشن‌های فلاتری واستون بنویسم. راستش اینکه بشه با فلاتر وبسایت طراحی کنی واسم شگفت انگیز بود، اما بعد از کمی جستجو و مطالعه فهمیدم اوپس، ای دل غافل، فلاتر سئو درست درمونی نداره (یعنی اصلا نداره). کلی غمگین شدم، آخه خیلی از وبسایت‌هایی که طراحی میکنم بر پایه محتوا هستن و نیاز به سئو دارن، واسه همین بیخیال این کار شدم. اما بعد از مدتی تصمیم گرفتم یه تلاش کوچیکی برای حل این مشکل کنم، آخه واقعا حیفه که پروژه فلاتر رو واسه Android و IOS خروجی بگیری اما واسه وب نگیری.

در طول این جستجو به نتایج و راه حل‌هایی رسیدم که در این پست واستون میگم. خب مرثیه سرایی بسه، بریم سراغ درس و مشق‌مون.

با نام و یاد خدا شروع می کنیم:

در فلاتر شما میتونید وب اپلیکیشن‌های سینگل پیج (PWA) خیلی خفن بنویسید. اما pwa ها مشکل سئو دارن، در فریم ورک های جاوااسکریپتی مثل ریکت و ویو و ... چندین راه حل رو طراحی کردن که بتونن این مشکل وب اپ‌ها رو برطرف کنن، مثلاً ssr یا مدیریت هدر با dom.

من هم از همین راه حل‌های جاوااسکریپتی (قطعا بغیر از ssr, چون فلاتر نمیتونه ssr رو پشتیبانی کنه) استفاده کردم تا بتونم مشکل خودم در فلاتر رو برطرف کنم (نه اونقدر خوب ولی قابل قبول).

راه حل‌های من:

بخش اول: مدیریت روت‌ها

اول از همه باید مثل هر وبسایت معمولی دیگه‌ای شما هم روت‌های مشخص برای صفحات وبسایتتون داشته باشید. برای این کار فلاتر راه‌حل‌های زیادی رو مشخص کرده که پیشنهاد محبوب من استفاده از پکیج auto route هستش. شما با این پکیج میتونید به خوبی برای پروژتون روت‌های استاتیک و داینامیک مشخص کنید و اون‌ها رو به راحتی مدیریت کنید. برای مثال بعد از استفاده این پکیج روت‌های شما به شکل زیر میشن.

https://example.com/#/

https://example.com/#/posts

https://example.com/#/posts/:id

https://example.com/#/posts/:slug

https://example.com/#/about

بخش دوم: مدیریت مربع (#)

یکی از مشکلات اساسی روت‌های بالا وجود مربع (#) در روت‌ها هستش. تا وقتی این مربع وجود داره گوگل و بقیه موتورهای جستجو وبسایت شما رو pwa میبینن و تمام صفحات وبسایت شما رو یک صفحه تلقی می‌کنند (این خیلی بده). پس اینجا باید بریم به جنگ مربع. شما با نصب پکیج url strategy و کانفیگ ساده اون، به راحتی از غول این مرحله هم عبور می کنید. حالا باید مربع از ساختار روت‌های شما حذف شده باشه و روت های شما شبیه مثال زیر باشه:

https://example.com/

https://example.com/posts

https://example.com/posts/:id

حالا وبسایت شما صفحات متفاوت داره و گوگل و بقیه بچه های سئو (دیگر موتورهای جستجو) هم اینو میفهمن.

بخش سوم: مدیریت تگ هد head

شما باید کاری کنید که با باز شدن هر صفحه جدید دیتای مربوط به اون در تگ head ما لود بشه. برای مثال تگ عنوان (title) یا متاتگ توضیح (description) یا تگ کلمات کلیدی (keywords) و هر تگ دیگه ای که دوست دارید رو متناسب با هر روت (صفحه) تغییر بدید.

ابتدا میریم سراغ عنوان صفحه. برای تغییر عنوان هر صفحه میتونید با قرار دادن کد زیر در هر صفحه عنوان اون رو تغییر بدید.

.....

@override
Widget build(BuildContext context) {

SystemChrome.setApplicationSwitcherDescription(
ApplicationSwitcherDescription(   
label: &quotعنوان صفحه - نام وبسایت&quot,  
 primaryColor: Theme.of(context).primaryColor.value, // This line is required 
));

....

شما میتونید مثل من من قطعه کد بالا رو به عنوان یک متد هلپر (Helper) ایجاد کنید و اون رو در ابتدای هر صفحه قرار بدید. مثل کد زیر

....

@override Widget build(BuildContext context) {
Helper.setPageTitle(&quotعنوان صفحه - نام وبسایت&quot, context);

....

بعد از عنوان نوبت تگ های دیگه میشه. برای این کار باید با استفاده از DOM به تگ های مورد نظر در head دسترسی پیدا کنیم و مقدار اون ها رو متناسب با هر صفحه تغییر بدیم. برای این کار مشابه کد زیر برای تگ توضیح (description) عمل می کنیم.

.....

setDescription(){
  MetaElement metaElement = (document.querySelector(&quotmeta[name='description']&quot) ??
      document.createElement('meta')) as MetaElement;
  metaElement.setAttribute(&quotname&quot, &quotdescription&quot);
  metaElement.setAttribute(&quotcontent&quot, &quotاین یک مقدار توضیح است&quot);
}


@override
Widget build(BuildContext context) {

  Helper.setPageTitle(pageTitle, context);
  
  setDescription();

....

حالا اگر روی صفحه وبسایت خودتون inspect بگیرید و تگ های درون head رو بررسی کنید می بینید که تگ title و متا تگ description مقدار دلخواه شما رو گرفته. با توجه به قطعه کد بالا می تونید برای باقی تگ های درون head مقدار دلخواه رو قرار بدید. نا گفته نمونه که برای تگ title هم میتونید از همین روش هم استفاده کنید.

خب به آخر مطلب رسیدیم. همونطور که می دونید سئو در فلاتر به صورت کامل پشتیبانی نمیشه و نباید انتظار داشته باشیم که این مورد به فلاتر اضافه بشه, چون مسیر فلاتر کاملا متفاوت هست. اما با راه کارهای بالا میتونید محتوای هر صفحه رو برای موتورهای جستجو مشخص کنید و تا حد معقولی به سئوی وبسایت فلاتری خودتون کمک کرده باشید.

امیدوارم که از این مقاله راضی بوده باشید و من تونسته باشم به شما کمکی کرده باشم. موفق و پایدار باشید.