متا تگ‌های ضروری هر صفحه
هر صفحه‌ی سایت چند تگ پایه لازم دارد که مشخص می‌کنند در گوگل و شبکه‌های اجتماعی چطور نمایش داده شود. این‌ها روی رتبه اثر مستقیم کمی دارند، ولی روی اینکه کاربر روی نتیجه‌ی تو کلیک کند یا رقیب، اثر زیادی دارند.
| تگ | کار | توصیه |
|---|---|---|
title | عنوان آبی در نتایج گوگل و تب مرورگر | ۵۰ تا ۶۰ کاراکتر، کلمه‌ی کلیدی اول |
meta description | متن زیر عنوان در گوگل | ۱۲۰ تا ۱۶۰ کاراکتر، با دعوت به اقدام |
canonical | معرفی آدرس اصلی صفحه | آدرس کامل با https |
og:title / og:description | عنوان و متن پیش‌نمایش لینک | می‌تواند جذاب‌تر از title باشد |
og:image | تصویر پیش‌نمایش لینک | ۱۲۰۰×۶۳۰ پیکسل |
twitter:card | نوع کارت در X | summary_large_image |
robots | اجازه‌ی ایندکس | فقط برای صفحه‌هایی که نباید در گوگل بیایند |
چطور عنوان و توضیحات خوب بنویسم؟
- کلمه‌ی کلیدی را اول عنوان بگذار: «تبدیل فیگما به HTML | نام برند» بهتر از «نام برند؛ خدمات تبدیل فیگما به HTML» است.
- هر صفحه عنوان یکتا داشته باشد: عنوان تکراری در چند صفحه برای گوگل گیج‌کننده است.
- توضیحات را مثل آگهی بنویس: مزیت اصلی و یک دعوت به اقدام («همین حالا قیمت بگیر») در آن باشد.
- اعداد و سال کمک می‌کنند: «قیمت طراحی سایت در ۱۴۰۵» نرخ کلیک بیشتری دارد.
- متن پیش‌نمایش گوگل را چک کن: گوگل گاهی توضیحات را عوض می‌کند، ولی وقتی توضیحات خوب و مرتبط باشد، معمولاً همان را نشان می‌دهد.
چرا پیش‌نمایش لینکم در تلگرام عکس ندارد؟
- تگ
og:imageوجود ندارد یا آدرس آن نسبی است؛ آدرس باید کامل و با https باشد. - حجم تصویر زیاد است یا سرور برای ربات‌ها خطا می‌دهد.
- تلگرام پیش‌نمایش قبلی را کش کرده؛ با ربات
@WebpageBotمی‌توانی کش آن را به‌روز کنی.
در سایت‌هایی که از طرح فیگما پیاده می‌کنم، متا تگ‌ها، اسکیما، نقشه‌ی سایت و تصویر اشتراک‌گذاری هر صفحه از اول درست ساخته می‌شود؛ تبدیل فیگما به HTML را ببین. برای ساخت تصویر og:image سبک هم ابزار تبدیل عکس و فرمت WebP کمک می‌کند.