بهینه‌سازی اپلیکیشن در vue.js

این روزها بحث‌های زیادی در سئو وجود دارد. بعضی از مردم فکر می‌کنند که SPAها  (Apps Single Page)  از نظر سئو مناسب هستند، در حالی که خیلی از افراد چنین نظری ندارند.

در این مقاله سعی خواهیم کرد توضیح دهیم که چگونه مسائل مربوط به سئو را حل ‌کنیم و وب سایت شما برای ایندکس شدن توسط گوگل آماده می‌شود و گوگل تشخیص می‌دهد که آیا وب سایت شما یک SPA است یا خیر و شاید برخی نکات را نیز ارائه دهیم، بنابراین شما می‌توانید برای شروع یک پروژه جدید تصمیمی جدی بگیرید.

هدف ما این نیست که به معنی کلمه seo بپردازیم و بگوییم که سئو چه کاری را انجام می‌دهد. فقط در این حد بگوییم که seo مخفف  Search Engine Optimizationو  روند متاثر از بازدید آنلاین از یک وب سایت در یک موتور جستجو است.

 در عمل، مجموعه‌ای از قوانین و بهترین شیوه‌های نوشتن وب سایت‌هاست که در نهایت روی بازدید وب سایت شما در موتورهای جستجو تاثیر می‌گذارد. 

برخی از این شیوه‌ها این روزها عبارتند از: سرعت لود صفحه، متا تگ‌ها، قالب مطالب مربوطه در برچسب‌های HTML مناسب، لینک‌های مناسب در صفحات وب شما، داشتن https، ساخت وب سایت برای موبایل و ... 

خیلی از جنبه‌هایی که بر SEO تاثیر می‌گذارند، بدون در نظر گرفتن تکنولوژی یا پشتوانه تکنیکی که شما انتخاب می‌کنید، به غیر از متا تگ‌ها در بالای HTML شما قرار می‌گیرند. در این مقاله، ما بیشتر بر روی متا تگ‌ها تمرکز می‌کنیم، زیرا آن‌ها بخش مهمی از سئو را در بر می‌گیرند.

قبل از پرداختن به موضوعات فنی، ما 2 راه برای ساخت برنامه‌های وب با Vue.js را مقایسه خواهیم کرد.

SPA (Single Page Apps)

در دنیای Vue.js، این روش، اغلب راه پیش فرضی برای ساخت برنامه‌های وب است. Vue CLI 3 و برخی از قالب‌های قدیمی پیکربندی‌های رسمی  وب سایت هستند. SPA  به این معنی است که برنامه وب شما به طور کامل در سمت مشتری ساخته شده است. شما فایل‌های vue را می‌نویسید، آن‌ها به جاوااسکریپت تبدیل می‌شوند و این جاوااسکریپت برای نشان دادن نهاییhtml  استفاده می‌شود.

SSR (Server Side Rendered)

Vue.js فریمورکی برای ایجاد برنامه‌های سمت سرویس گیرنده است. به طور پیش فرض، قطعات Vue تولید و دستکاری DOM در مرورگر را به عنوان خروجی انجام می‌دهند. با این حال، این امکان وجود دارد که اجزای یکسان را در رشته‌های HTML در سرور، مستقیما به مرورگر بفرستند و در نهایت «نشانه گذاری استاتیک» را به یک برنامه کاملا تعاملی در سرویس گیرنده « hydrate » دهند.

SPA + Pre-render

همچنین لازم به ذکر است که پلاگین‌های پیش رندری مانند این یا حتی خدمات آنلاین اختصاص داده شده برای آن وجود دارد. پیش رندر کمک می‌کند تا توانایی شاخص SPA خود را با بارگذاری وب سایت خود و ارائه نشانه گذاری نهایی HTML برای هر مسیر افزایش دهید. SPA + Pre-render چیزی بین یک SPA ساده و یک SSR است. شما تمام مزایای یک SPA  بعلاوه برخی از مزایای SEO از SSR را دریافت می‌کنید. با این حال، برای تعداد زیادی از صفحات و محتوای پویا، SSR مقیاس پذیرتر و ساده‌تر است.

مزایای SPA

• راه اندازی آن آسان است و معمولا بیشتر فریمورک‌ها از جمله Vue.js دارای قالب پیش فرض یا CLI برای آن هستند.
• مدیریت آن راحت‌تر است و همه چیز طرف کلاینت انجام می‌شود. شما برای ایجاد این کار نیاز زیادی به دانش بک-اند ندارید.
• توسعه آن راحت‌تر است و SPA‌ها در انتهای تصاویر HTML، JS و CSS ساده هستند. شما می‌توانید آن‌ها را در هر سرویس میزبانی که ارزان یا حتی رایگان هستند اعمال کنید.

معایب SPA

• شما فقط یک صفحه HTML دارید و حتی اگر مسیرهای متعددی داشته باشید، به یک فایل متنی متصل می‌شوید. این بدان معناست که شما نمی توانید برای هر صفحه به طور متفاوتی کاری انجام دهید.
• اگر به خوبی بهینه نباشد، کند می‌شود و اگر  به این موضوع توجه نکنید، با مشکل بزرگی در این بسته نرم افزاری روبرو می‌شوید. حتی اگر بتوانید آن را کنترل کنید، در نهایت هنوز هم ممکن است برخی از مسائل مربوط به عملکرد در دستگاه‌های تلفن همراه آسیب ببینند، چرا که همه کدهای جاوااسکریپت باید تجزیه و تحلیل، ارزیابی و در دستگاه تلفن همراه تبدیل به HTML شوند. در دستگاه‌های ضعیف، این مسائل می‌تواند تاثیر بسیار بزرگ‌تری داشته باشد.

مزایای SSR

• SEO با SSR مشکلی ندارد. هر مسیر جدید یک فایل متنی جدید است و می‌توانید متا تگ‌های خود را پیکربندی کنید اما برای هر صفحه‌ای که شما می‌خواهید.
• می‌تواند عملکرد بهتری را نسبت به دستگاه‌های کندتر داشته باشد. تمام نشانه‌گذاری‌ها در سرور ارائه می‌شود و به این معنی است که دستگاه درخواست‌های صفحه و همه htmlها رندر می‌کند و نیازی به انجام کار اضافی مثل SPA نیست.
• قوانینی را اجرا می‌کند که در نهایت به شما در ایجاد وب سایتی بهتر و کارآمدتر کمک می‌کند.

معایب SSR

• SSR پیچیده‌تر است. معمولا نیاز به پیکربندی بیشتری دارد، مخصوصا اگر می‌خواهید یک فریمورک جاوااسکریپت را در آن جاسازی کنید.
• توسعه آن سخت‌تر است، حتما نیاز به یک سرور دارید که HTML خود را ارائه دهید و دیگر نمی‌توانید به میزبانی استاتیک تکیه کنید.
• نیاز به دانش بیشتری برای توسعه دارد. شما باید کمی بک-اند بلد باشید تا خودتان آن را بسازید.

کدام یک را انتخاب کنیم؟

اگر یک وبسایت دولتی داشته باشید،وبسایتی دارید که از لحاظ صفحات استاتیک است (محتوای صفحات پویا نیست) و با SPA و یک افزونه یا سرویس پیش نمایشگر می‌توانید کار خود را پیش ببرید و مدیریت، استقرار و نگهداری آن نیز آسان‌تر است.

 از سوی دیگر، اگر شما یک فروشگاه آنلاین داشته باشید، وب سایتی با تعداد زیادی صفحات یا محتوای پویای برای هر صفحه دارید و همه صفحات را برای نمایش در Google نیاز دارید پس قطعا باید از SSR استفاده کنید.

چطور؟

قبل از اینکه به چگونگی اضافه کردن موارد سئو برای هر قسمت بپردازیم، اجازه دهید از طریق برخی از برچسب‌های مهم که در هر یک از صفحات، شما به آن نیاز دارید، پیش برویم.

تگ  <title>به عنوان، "عنوان" برگه در مرورگر ظاهر خواهد شد. این تگ را داخل تگ <head> صفحه HTML خود قرار دهید.

<meta name="description" content="Your content">

این تگ، شرح وب سایت یا صفحه خاص شما خواهد بود. این محتوا توسط موتورهای جستجو استفاده می‌شود و معمولا تحت عنوان توضیحات وب سایت شما در جستجو نمایش داده می‌شود. این را نیز می‌توان برای جستجوی خود استفاده کرد، بنابراین مطمئن شوید که توضیحات مربوطه را در آن قرار دهید.

<meta name="author" content="Author”>

این تگ نویسنده سایت را تعیین می‌کند.

<link rel="icon" href="iconPath">

این تگ فاویکون شما خواهد بود. بعد از درج در وب سایت، این نماد در برگه مرورگر شما نمایش داده می‌شود. اطمینان حاصل کنید که آیکون واضح، قابل فهم و مرتبطی داشته باشید.

<link rel="canonical" href="url">

این تگ زمانی استفاده می‌شود که شما قصد دارید از یک پست در سایت‌های دیگر استفاده کنید. با استفاده از این تگ می‌توانید به موتورهای جستجو بفهمانید که منبع اصلی کدام سایت است و آن را حفظ کنید.

چگونه تغییرات SPA را در Vue CLI 3 انجام دهیم؟

• به فایل public/index.html بروید و برچسب‌های مناسب را اضافه کنید.
• شما می‌توانید از یک پلاگین pre-render استفاده کنید تا به طور مستقیم به خزنده‌های HTML مربوطه بپردازید تا اینکه یک body خالی داشته باشید.  برای انجام این کار باید قطعه کد زیر را در فایل vue.config.js قرار دهید.

const path = require('path') const PrerenderSPAPlugin = 
require('prerender-spa-plugin')
module.exports = {
 configureWebpack: {
  plugins: [
    new PrerenderSPAPlugin({
      staticDir: path.join(__dirname, 'dist'),
      // Required - Routes to render.
      routes: [ '/', '/about', '/some/deep/nested/route' ],
    })
  ]
 }
}

نتیجه 

ساخت یک وب سایت خوب، قابل اجرا و قابل دسترس فقط بخشی از ایجاد یک وب سایت خوب است. داشتن یک سئو خوب بخش مهم دیگری است. اطمینان حاصل کنید که از ابتدای کار تصمیمات درستی را گرفته‌اید و وب سایت خود را بهینه‌سازی کنید.

منبع