متا تگ ها اطلاعات اضافی مفیدی را در مورد صفحات وب شما ارائه می دهند. هنگام استفاده از Nuxt مطمئن شوید که می دانید چگونه آنها را درج کنید.
Nuxt.js یک چارچوب قدرتمند برای ساخت برنامه های Vue.js رندر شده در سمت سرور است. Nuxt.js علاوه بر ایجاد یک پایه محکم برای ساخت برنامه های پیچیده، اضافه کردن متا تگ ها را به صفحات شما نیز آسان می کند.
بیاموزید که چگونه متا تگ ها را در برنامه Nuxt خود بگنجانید تا SEO و دید سایت خود را در رسانه های اجتماعی بهبود بخشید.
متا تگ ها چیست؟
متا تگ ها تکه هایی از کد هستند که اطلاعات یک صفحه وب را ارائه می دهند. این تگ ها مانند محتوای صفحه شما در منبع HTML وجود دارند، اما در خود صفحه قابل مشاهده نیستند.
متا تگ ها می توانند اطلاعاتی مانند عنوان صفحه، توضیحات و کلمات کلیدی را ارائه دهند. آنها همچنین برای ارائه اطلاعات برای اشتراک گذاری رسانه های اجتماعی و بهینه سازی موتورهای جستجو استفاده می شوند.
اضافه کردن متا تگ ها
قبل از اضافه کردن متا تگ ها، یک برنامه Nuxt.js جدید ایجاد کنید. برای این کار، مطمئن شوید که Node.js را روی دستگاه خود نصب کرده اید. سپس ترمینال خود را باز کرده و دستور زیر را اجرا کنید:
npx create-nuxt-app my-app
با این کار یک برنامه Nuxt.js جدید در فهرستی به نام my-app ایجاد می شود. دستورات را دنبال کنید تا برنامه خود را در صورت نیاز پیکربندی کنید.
افزودن متا تگ در سطح جهانی
یکی از راه‌های اضافه کردن متا تگ‌ها به برنامه Nuxt.js این است که آنها را به صورت جهانی اضافه کنید. برای انجام این کار، یک تگ عنوان و دو متا تگ اضافه کنید: یکی برای مجموعه کاراکترها و دیگری برای viewport. فایل nuxt.config.js خود را باز کنید و یک ویژگی head را به شی module.exports اضافه کنید:
module.exports = {
head: {
title: 'My App',
meta: [
{ charset: 'utf-8' },
{ name: 'viewport', content: 'width=device-width, initial-scale=1' }
]
}
}
اضافه کردن متا تگ در صفحات منفرد
گاهی اوقات ممکن است بخواهید متا تگ ها را فقط به صفحات خاصی در برنامه خود اضافه کنید. برای انجام این کار، می توانید یک ویژگی head به تعریف کامپوننت صفحه اضافه کنید:
<template>
<div>
<h1>About Us</h1>
</div>
</template>
<script>
export default {
head: {
title: 'About Us',
meta: [
{ name: 'description', content: 'Learn more about our company' }
]
}
}
</script>
افزودن متا تگ به صورت پویا
افزودن متا تگ ها به صورت پویا به شما امکان می دهد تا متا تگ های خاصی را برای هر صفحه، بسته به محتوا ایجاد کنید. این می تواند زمانی مفید باشد که چندین صفحه با انواع مختلف محتوا دارید و می خواهید آنها را برای موتورهای جستجو و اشتراک گذاری رسانه های اجتماعی بهینه کنید.
به عنوان مثال، فرض کنید در برنامه Nuxt.js خود یک بخش وبلاگ با چندین پست دارید. برای بهینه سازی هر پست وبلاگ برای موتورهای جستجو و رسانه های اجتماعی، می توانید به صورت پویا متا تگ برای آن ایجاد کنید.
<template>
<div>
<h1>{{ post.title }}</h1>
<p>{{ post.body }}</p>
</div>
</template>
<script>
export default {
async asyncData({ params }) {
const post = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`)
.then(res => res.json())
return { post }
},
head() {
return {
title: this.post.title,
meta: [
{ hid: 'description', name: 'description', content: this.post.body },
{ hid: 'og:title', property: 'og:title', content: this.post.title },
{ hid: 'og:description', property: 'og:description', content: this.post.body },
{ hid: 'og:image', property: 'og:image', content: this.post.image },
{ hid: 'og:url', property: 'og:url', content: `https://example.com/blog/${this.post.id}` },
{ hid: 'article:published_time', property: 'article:published_time', content: this.post.date },
{ hid: 'article:author', property: 'article:author', content: this.post.author },
{ hid: 'article:section', property: 'article:section', content: this.post.category }
]
}
}
}
</script>
با تولید پویا این متا تگ ها، می توانید اطلاعات دقیق تری در مورد هر پست وبلاگ در اختیار موتورهای جستجو و پلتفرم های رسانه های اجتماعی قرار دهید. این می تواند به افزایش دید، نرخ کلیک و تعامل برای پست های وبلاگ ما کمک کند.
اجرای برنامه
هنگامی که متا تگ ها را به برنامه Nuxt.js خود اضافه کردید، باید آن را اجرا کنید تا تغییرات را در عمل مشاهده کنید. شما می توانید این کار را با استفاده از سرور توسعه Nuxt.js انجام دهید، که همان فرآیند برنامه React.js را دنبال می کند.
برای راه اندازی سرور توسعه، ترمینال خود را باز کنید، به فهرست برنامه خود بروید و دستور زیر را اجرا کنید:
npm run dev
با این کار سرور توسعه راه اندازی می شود و برنامه شما در یک مرورگر وب راه اندازی می شود. اگر منبع صفحه مرورگر را باز کنید و به قسمت head نگاه کنید، باید متا تگ ها را ببینید.
توجه به این نکته مهم است که متا تگ های تولید شده توسط Nuxt.js تنها زمانی که صفحه در سمت سرور ارائه می شود برای موتورهای جستجو و پلت فرم های رسانه های اجتماعی قابل مشاهده است. اگر از رندر سمت مشتری استفاده می کنید، متا تگ ها ممکن است برای موتورهای جستجو و پلتفرم های رسانه های اجتماعی قابل مشاهده نباشند.
با متا تگ ها رتبه وب سایت خود را بهبود بخشید
متا تگ ها علاوه بر بهبود ظاهر صفحات وب شما در هنگام اشتراک گذاری در پلتفرم های رسانه های اجتماعی، می توانند رتبه سایت شما را در نتایج موتورهای جستجو بهبود بخشند. با ارائه اطلاعات متا تگ دقیق و مرتبط، می توانید به موتورهای جستجو کمک کنید تا محتوای صفحات وب ما را درک کنند و آنها را برای جستجوهای مرتبط رتبه بندی کنند.