بهینه سازی سئو در nuxt.js و ایجاد تگ‌های متا

تگ متا چیست؟

ابتدا بهتر است که به این سؤال پاسخ دهیم که: «تگ متا چیست؟». به زبان ساده و به شکل مختصر باید گفت که تگ‌های متا نیز بخشی از تگ های html هستند که در صفحات وب قرار داده می‌شوند تا اطلاعاتی در مورد محتوای سایت شما در آن صفحه بدهند.

از جمله مهم‌ترین تگ‌های متا (که به آن‌ها متا دیتا نیز گفته می‌شود) تگ title و تگ متای description هستند. البته تگ‌های دیگری نیز در این لیست قرار می‌گیرند. مثلاً تگ متای keywords که امروزه به‌ندرت در صفحات وب به کار گرفته می‌شود.

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

اهمیت تگ‌های meta

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

اوّلین تأثیر بر مخاطب

از آنجایی‌که توضیحات موجود در تگ‌های متا (به‌خصوص تگ meta description) معمولاً در نتایج جستجوی موتورهای جستجو به نمایش درمی‌آیند، اوّلین اثری که شما بر ذهن مخاطب سایت اعمال می‌کنید توسط همین تگ‌ها رخ می‌دهد.

تأثیر روی محتوای تکراری

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

مثلاً صفحات مختلف اگر دارای تگ title یکسان یا مشابه باشند، این حس را در گوگل ایجاد می‌کند که آن‌ها دارای محتوای تکراری هستند. لذا تنها یکی از آن‌ها را انتخاب کرده و از ایندکس کردن سایرین اجتناب می‌کند.

تأثیر روی کلیک و ترافیک سایت

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

بهینه سازی سئو در nuxt.js

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

روش‌های ایجاد تگ متا در nuxt.js

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

استفاده از ویژگی app.head

به‌عنوان اولین روش ایجاد تگ‌های متا در ناکست جی اس، ویژگی app.head را معرفی می‌کنیم. در nuxt.js شما فایلی به نام nuxt.config.ts را در پوشه محل نرم‌افزار خود دارید. در این فایل می‌توانید تنظیمات مختلفی در مورد سایت خود اعمال کنید. درواقع شما این تنظیمات را در قالب اشیاء²objects در جاوا اسکریپت انجام می‌دهید. این اشیاء از قبل توسط سازندگان این فریم‌ورک تعریف شده‌اند. یکی از آن‌ها به‌صورت زیر است.

export default defineNuxtConfig({
  app: {
    head: {
      title: 'My Nuxt app in learnblog', // default fallback title
      htmlAttrs: {
        lang: 'en',
      },
      meta: [
        { name: 'description', content: 'the description for all page in default' },
      ]
    }
  }
})

همان‌طور که مشاهده می‌کنید، در داخل ویژگی head از شیء app شما مقادیر تگ‌های متا یا سایر المان‌هایی که می‌تواند به بهینه سازی سئو در nuxt.js کمک کند، قرار می‌دهید. مثلاً نوشته‌ای که در جلوی ویژگی title قرار می‌گیرد، در صفحه مرورگر به‌صورت عنوان صفحه (در گوشه سمت چپ و بالا) ظاهر می‌شود.

به همین شکل مقداری که در داخل آرایه meta تعریف شده، به‌عنوان مقدار تگ meta description به صفحه سایت شما معرفی می‌گردد. برای مشاهده آن در مرورگرها، کافی است روی صفحه راست کلیک کرده و گزینه View page source را از میان گزینه‌های موجود انتخاب کنید.

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

سئو در nuxt.js: استفاده از useHead

یکی دیگر از روش‌های ایجاد تگ‌های متا و بهینه سازی سئو در nuxt.js استفاده از تابع useHead در این فریم‌ورک است. برای استفاده از آن، کافی است به بخش script از صفحه موردنظر خود رفته و کدی مشابه کد زیر را در آن وارد کنید.

<script setup>
const titleVar = ref('My About Page in learnblog');
useHead({
  title: titleVar,
  meta: [
    {name: 'description', content: 'My about page description.'}
  ]
});
</script>

همچنان که در این کد مشاهده می‌کنید، از قابلیت واکنش‌پذیری در vue.js کمگ گرفته شده است. یعنی از داده‌های پویا یا داینامیک استفاده شده است. مقدار عنوان صفحه با استفاده از متغیر واکنش‌پذیر titleVar تعریف شده است. حسن این روش در آن است که می‌توانید برای صفحات داینامیک (صفحاتی که ساختار کدنویسی یکسان، امّا اطلاعات و محتوای متفاوت از یکدیگر دارند) از آن استفاده کنید و داده‌ها به‌صورت پویا در تگ‌های متا قرار داده می‌شوند.

تفاوت دیگر این روش با روش اوّل (استفاده از app.head) در آن است که می‌توانید به صورت مجزا در هر یک از صفحات سایت خود، مقادیر متفاوتی را برای عنوان یا تگ meta description و … به کار ببرید. به این ترتیب عملاً به بهینه سازی سئو در nuxt.js پرداخته‌اید. در این مثال کد مربوطه در صفحه About سایت اضافه شده است. در مرورگر نیز (همچنان که در تصویر مشخص است) مشاهده می‌کنید که عنوان این صفحه تغییر کرده است.

به طریق مشابه باز هم به کمک گزینه View page source می‌توانید به چک کردن مقدار تگ meta description نیز بپردازید.

استفاده از کامپوننت‌ها

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

<template>
  <div>
    <Head>
      <Title>{{ title }}</Title>
      <Meta name="description" :content="desc" />
    </Head>
    <!-- This is contact page content -->
    <h1>Contact page</h1>
    <chat-compo></chat-compo>
  </div>
</template>
<script setup>
const title = ref('Contact page');
const desc = ref('Here we put the description of contact page in a variable');
</script>

دقت کنید که گرچه نام این کامپوننت‌ها مشابه تگ های html است، امّا به جهت تفکیک قائل شدن، حرف اوّل آن‌ها با حروف بزرگ لاتین قرار داده شده است (مثل کامپوننت Meta با M بزرگ). همچنین مقادیر درون آن‌ها به کمک متغیرهایی که در قسمت script کد مقداردهی شده‌اند، جایگزین می‌شود. یعنی از قابلیت واکنش‌پذیری در vue.js می‌توان برای مقداردهی به آن‌ها استفاده کرد. خروجی کار را در تصویر زیر (برای عنوان صفحه) مشاهده می‌کنید.

نکته دیگر این روش آن است که گرچه این کامپوننت‌ها در داخل بخش template کد ما نوشته و مقداردهی می‌شوند، امّا هنگام اجرای کد، تغییری در ساختار html صفحه درون مرورگر به وجود نمی‌آید. به‌عنوان مثال تگ meta description را مشاهده می‌کنید که مشابه روش‌های قبلی در مکان مناسب خود قرار گرفته و مقدار آن نیز به‌درستی تنظیم شده است.

جمع‌بندی

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

پاورقی:

• 1
  Reactivity
• 2
  objects