آیا تا به حال وقتی محتوایتان در شبکه های اجتماعی به درستی نمایش داده نمی شود، حس ناامیدی کردید؟ در این راهنما، با تگ های OG سئو آشنا می شوید و می توانید پیش نمایش های جذاب و دقیق برای هر صفحه تان تنظیم کنید. هر بخش به صورت گام به گام توضیح داده می شود؛ از اصول اولیه تا نکات پیشرفته، بدون پرش های نامفهوم.
با درک دقیق نقش متادیتاهای OG، می توانید نرخ کلیک و تعامل کاربران را به صورت قابل توجهی افزایش دهید. ما ابزارها و مثال های واقعی را ارائه می دهیم تا شما به سرعت تنظیمات لازم را اعمال کنید و نتایج ملموس ببینید. به کارگیری این دانش، نه تنها به بهبود سئو کمک می کند، بلکه حضور دیجیتالی تان را در فضای اجتماعی قدرتمندتر می کند.
فهرست مطالب
- درک اصول OG Tags برای سئو
- چگونه متادیتای OG را تنظیم کنیم
- بهینه سازی تصویر و عنوان برای اشتراک گذاری
- استفاده از پارامترهای پیشرفته برای حداکثر تعامل
- آزمون و مانیتورینگ OG در شبکه ها
- سوالات متداول
درک اصول OG Tags برای سئو
برچسب های Open Graph (OG) در اصل توسط فیس بوک برای بهبود نحوه نمایش محتوا در شبکه های اجتماعی ساخته شدند، اما امروز به یک ابزار اساسی سئو تبدیل شده اند. وقتی یک صفحه وب به صورت صحیح با OG Tagها مجهز شود، پلتفرم های اجتماعی می توانند عنوان، توضیح و تصویر مناسب را استخراج کنند و در پیش نمایش به صورت جذاب نشان دهند. این کار نه تنها نرخ کلیک (CTR) را در نتایج اشتراک گذاری افزایش می دهد، بلکه به طور غیرمستقیم به بهبود سیگنال های رفتاری کاربر کمک می کند که موتورهای جستجو هم به آن توجه می نمایند.
پنج برچسب اصلی که هر صفحه ای باید داشته باشد عبارتند از:
- og:title: عنوانی کوتاه و جذاب (حدود ۶۰ کاراکتر) که همانند عنوان صفحه عمل می کند.
- og:description: خلاصه ای واضح (حدود ۱۱۰ کاراکتر) که ارزش محتوا را انتقال می دهد.
- og:image: URL تصویر با حداقل ابعاد ۱۲۰۰×۶۳۲ پیکسل برای نمایش در شبکه های مختلف.
- og:url: آدرس کامل صفحه، به صورت مطلق (با https).
- og:type: نوع محتوا (مثلاً
articleبرای پست های وبلاگ یاwebsiteبرای صفحه اصلی).
| برچسب | مقدار پیشنهادی |
|---|---|
| og:title | حداکثر ۶۰ کاراکتر، شامل کلیدواژه اصلی |
| og:description | حداکثر ۱۱۰ کاراکتر، واضح و دعوت کننده |
| og:image | حداقل ۱۲۰۰×۶۳۲ پیکسل، فرمت JPEG یا PNG |
| og:url | آدرس کامل با https و بدون پارامترهای غیرضروری |
| og:type | article برای مطالب، website برای صفحه اصلی |
چند نکتهٔ عملی برای بهینه سازی OG Tagها:
- از URLهای مطلق استفاده کنید؛ مرورگرها نمی توانند مسیرهای نسبی را به درستی تبدیل کنند.
- تصاویر باید فشرده باشند اما کیفیت کافی برای نمایش در صفحه های پرسرعت داشته باشند.
- از تکرار محتوا خودداری کنید؛ هر صفحه باید مقادیر منحصربه فرد داشته باشد.
- در صورت به روزرسانی محتوا، از ابزارهای Debugger (مانند Sharing Debugger فیس بوک) برای پاک سازی کش استفاده کنید.
نمونهٔ ساده ای از کد OG Tag برای یک پست وبلاگی می تواند به این شکل باشد:
پس از افزودن این کد، کافی است URL صفحه را در Facebook Sharing Debugger وارد کنید؛ این ابزار پیش نمایش را نشان می دهد و در صورت وجود خطا، پیام های واضحی برای اصلاح ارائه می کند.
چگونه متادیتای OG را تنظیم کنیم
برای اینکه پست های شما در شبکه های اجتماعی جذاب و کلیک خور باشد، ابتدا باید متادیتای Open Graph (OG) را به درستی در صفحه تان بگنجانید. این متادیتا به صورت ساده به مرورگرها و سرویس های اشتراک گذاری می گوید چه عنوان، توضیحی کوتاه، تصویری و لینکی باید نمایش داده شود. به کارگیری صحیح این تگ ها به خصوص برای فیس بوک، توییتر و لینکدین می تواند نرخ کلیک (CTR) را به طور چشمگیری بالا ببرد.
مراحل پایه تنظیم OG به صورت زیر است:
- در بخش
صفحه تان، تگ های زیر را اضافه کنید:،،و. هر تگ باید دقیقاً همان اطلاعاتی را که می خواهید نمایش داده شود، داشته باشد. - مطمئن شوید که تصویر انتخابی حداقل ۱۲۰۰ × 630 پیکسل باشد؛ این ابعاد مناسب اکثر پلتفرم ها است و از کشیده یا پیکسل دار شدن تصویر جلوگیری می کند.
- اگر سایت تان چندین نوع محتوا (مثلاً مقالات و محصولات) دارد، می توانید از متادیتای اختصاصی مثل
og:type(مثلاًarticleیاproduct) وog:localeبرای تعیین زبان استفاده کنید. - پس از افزودن تگ ها، از ابزارهای تست رسمی مثل Facebook Sharing Debugger یا Twitter Card Validator برای اطمینان از صحت داده ها استفاده کنید؛ این ابزارها پیش نمایش واقعی پست را نشان می دهند و خطاهای احتمالی را گزارش می کنند.
در ادامه یک جدول مقایسه ای سریع از مهم ترین متادیتای OG آورده شده است تا هنگام نوشتن کدها بتوانید به راحتی مرجع داشته باشید:
| متا‑تگ | مقدار پیشنهادی | توضیح کوتاه |
|---|---|---|
| og:title | «راهنمای کامل سئو با OG Tags» | عنوانی که در اشتراک گذاری نمایش داده می شود. |
| og:description | «با این راهنما، به سرعت متادیتای OG خود را تنظیم کنید و تعامل کاربران را افزایش دهید.» | توضیحی مختصر و جذاب. |
| og:image | «https://example.com/images/og-cover.jpg» | تصویر واضح، با نسبت 1.91:1. |
| og:url | «https://example.com/seo-og-tags-guide» | آدرس ثابت صفحه؛ نباید تغییر کند. |
یک مثال کاربردی: فرض کنید می خواهید مقاله ای درباره «بهینه سازی سرعت لود صفحه» را در فیس بوک به اشتراک بگذارید. کد زیر را در قرار دهید تا پیش نمایش مطلوبی داشته باشید:
به محض افزودن این تگ ها، می توانید با کلیک بر دکمه «اشتراک گذاری» در فیس بوک، پیش نمایش واقعی را ببینید؛ اگر تصویر یا متن به درستی نمایش داده نشد، فقط مقدار مربوطه را اصلاح کنید و دوباره تست کنید. این چرخه تکراری باعث می شود که هر بار خروجی نهایی دقیقاً همان طور که می خواهید ظاهر شود.
بهینه سازی تصویر و عنوان برای اشتراک گذاری
زمانی که کاربر بر روی لینک شما در شبکه های اجتماعی کلیک می کند، اولین چیزی که چشمش را می گیرد تصویر OG و عنوان است. اگر این دو عنصر جذاب و به درستی تنظیم شوند، احتمال کلیک و اشتراک گذاری بالا می رود؛ در غیر این صورت پست شما به سرعت در میان هزاران دیگر گم می شود.
برای تصویر OG، چند معیار کلیدی وجود دارد:
- ابعاد پیشنهادی: ۱۲۰۰ × 630 پیکسل (نسبت ۱٫۹۱:۱) که در اکثر پلتفرم ها به صورت کامل نمایش می یابد.
- حجم فایل: زیر ۲ مگابایت؛ فشرده سازی با ابزارهایی مثل TinyPNG یا ImageOptim می تواند کیفیت را حفظ کند.
- فرمت: استفاده از
JPEGبرای عکس های عکاسی وPNGبرای گرافیک های با پس زمینه شفاف. - متن جایگزین (alt): اگر تصویر به دلیل خطا یا تنظیمات کاربر لود نشود، متن alt می تواند محتوا را توصیف کند.
عنوان (og:title) نیز باید به صورت مختصر و هدفمند باشد. طول بهینه بین ۵۰ تا ۶۰ کاراکتر است؛ این بازه باعث می شود که عنوان در تمام دستگاه ها به صورت کامل نمایش داده شود. کلیدواژه اصلی را در ابتدای عنوان قرار دهید و سپس یک عنصر احساسی یا دعوت به اقدام (CTA) اضافه کنید؛ برای مثال: «راهنمای جامع خرید لپ تاپ 2024 – بهترین مدل ها با تخفیف ویژه». از استفاده بیش از حد علائم نگارشی یا کلمات کلیشه ای خودداری کنید.
مثال عملی: شما مقاله ای درباره «بهترین دوربین های عکاسی برای مبتدیان» دارید. برای OG image یک عکس واضح از یک دوربین DSLR با پس زمینه ساده انتخاب می کنید، ابعاد ۱۲۰۰ × 630 پیکسل و حجم زیر ۱.۲ مگابایت. سپس عنوان OG را به این شکل تنظیم می کنید: بهترین دوربین های مبتدی 2024 - خرید هوشمند با راهنمای کامل. این ترکیب باعث می شود که در فیسبوک یا لینکدین تصویر واضح و عنوان جذاب، توجه مخاطب را به سرعت جلب کند.
در ادامه یک چک لیست کوتاه برای اطمینان از بهینه سازی کامل آورده شده است:
- آیا تصویر حداقل ۱۲۰۰ × ۶۳۰ پیکسل است؟
- حجم تصویر زیر ۲ مگابایت است؟
- از فرمت مناسب (JPEG/PNG) استفاده شده؟
- متن alt توصیفی اضافه شده؟
- عنوان بین ۵۰‑۶۰ کاراکتر است و کلیدواژه اصلی در ابتدا قرار دارد؟
- عنوان شامل یک CTA یا عنصر احساسی است، اما نه کلیشه ای?
استفاده از پارامترهای پیشرفته برای حداکثر تعامل
اگر می خواهید محتوا در شبکه های اجتماعی نه تنها نمایش داده شود، بلکه کاربران را به سرعت جذب کند، کافی است از پارامترهای پیشرفتهٔ OG (Open Graph) استفاده کنید. این متادیتاها به پلتفرم های اشتراک گذاری اطلاعات دقیق تری می دهند؛ به عنوان مثال می توانید زمان انتشار، نویسنده، یا حتی ابعاد دقیق تصویر را مشخص کنید تا پست شما به صورت حرفه ای تر ظاهر شود.
- og:locale – زبان و منطقهٔ محتوا (مثلاً
fa_IRبرای فارسی ایران). - og:site_name – نام کامل سایت یا برند، که در برخی شبکه ها زیر عنوان نمایش داده می شود.
- article:author – URL یا نام کاربری نویسنده؛ این اطلاعات به خصوص در LinkedIn و Facebook مؤثر است.
- article:published_time و article:modified_time – زمان انتشار و به روزرسانی؛ فرمت ISO 8601 (مثلاً
2024-03-15T12:00:00+03:30) توصیه می شود. - og:image:width و og:image:height – عرض و ارتفاع تصویر پیش فرض، که مانع نمایش تصویر کوچک یا کشیده شدن آن می شود.
- og:video – URL ویدئوی کوتاه مرتبط؛ می توانید
og:video:typeوog:video:durationرا هم اضافه کنید. - twitter:card – نوع کارت توییتر (مثلاً
summary_large_image) برای همخوانی بهتر با توییتر.
به عنوان مثال، یک وب سایت خبری می خواهد مقاله ای دربارهٔ فناوری را به صورت جذاب در فیسبوک منتشر کند. در قالب HTML می توانند این گونه بنویسند:
نکتهٔ کلیدی این است که مقادیر این پارامترها به صورت داینامیک تولید شوند؛ یعنی زمان انتشار یا تصویر اصلی باید از دیتابیس یا سیستم مدیریت محتوا (CMS) استخراج شود. در وردپرس می توانید از توابع wp_get_post_tags() یا افزونهٔ SEO (مانند Yoast SEO) برای پرکردن خودکار این متاها بهره بگیرید.
| پارامتر | مقدار پیشنهادی | توضیح |
|---|---|---|
| og:image | حداقل 1200×630 پیکسل | بهترین نسبت برای اکثر پلتفرم ها |
| og:locale | fa_IR | زبان و منطقهٔ هدف |
| article:published_time | ISO 8601 | دقت زمان برای الگوریتم های ترتیب بندی |
| twitter:card | summary_large_image | نمایش تصویر بزرگ در توییتر |
در پایان، حتماً با ابزارهای تستی مانند Facebook Sharing Debugger یا Twitter Card Validator پیش نمایش پست خود را بررسی کنید؛ این ابزارها می توانند خطاهای متا را نشان دهند و به روزرسانی کش را سریع تر انجام دهند. با رعایت این پارامترهای پیشرفته، تعامل کاربران در شبکه های اجتماعی به صورت قابل توجهی افزایش می یابد.
آزمون و مانیتورینگ OG در شبکه ها
قبل از اینکه محتوای خود را در شبکه های اجتماعی به اشتراک بگذارید، حتماً باید تگ های OG را با ابزارهای مخصوص تست کنید. این ابزارها به شما نشان می دهند که هر پلتفرم چه داده هایی را استخراج می کند و آیا تصویر، عنوان یا توضیح مختصر به‑درستی نمایش داده می شود یا نه. رایج ترین ابزارهای تست شامل Facebook Sharing Debugger، Twitter Card Validator و LinkedIn Post Inspector هستند که به صورت رایگان در دسترس می باشند.
برای آزمون دقیق، مراحل زیر را دنبال کنید:
- آدرس صفحه مورد نظر را در ابزار مربوطه وارد کنید.
- دکمه «Debug» یا «Validate» را بزنید تا پلتفرم صفحه را بازخوانی کند.
- نتایج را بررسی کنید: آیا تصویر اصلی (og:image) به درستی لود می شود؟ آیا طول عنوان (og:title) بیش از حد نیست؟
- اگر خطایی مشاهده کردید، تگ ها را اصلاح کنید و دوباره ابزار را اجرا کنید تا کش پاک شود.
پس از انتشار، آزمون یکبار مصرف کافی نیست؛ باید مانیتورینگ مداوم انجام دهید. ابزارهای خودکار نظیر Meta Tag Analyzer یا افزونه های CI/CD می توانند در هر بار به روزرسانی محتوا، صحت OG را بررسی کنند. علاوه بر این، Google Search Console می تواند هشدارهای مربوط به ساختار داده ها را نشان دهد و شبکه های اجتماعی می توانند از طریق API خود، گزارش های اشتراک گذاری (مانند تعداد کلیک یا بازدید) را ارائه دهند. یک مثال عملی: پس از اصلاح تصویر OG برای یک پست بلاگ، بازدیدهای ارجاعی از فیس بوک در دو روز اول ۲۵٪ افزایش یافت.
در نهایت، برای حفظ کیفیت، یک برنامه ساده ی چک ماهیانه می تواند مفید باشد. این برنامه می تواند شامل:
- استفاده از ابزارهای تست برای ۳ پلتفرم اصلی.
- بررسی گزارش های کش (Cache) در فیس بوک و توییتر.
- ثبت تغییرات در یک جدول پیگیری.
| پلتفرم | ابزار تست | مشکل رایج |
|---|---|---|
| فیس بوک | Sharing Debugger | کش قدیمی تصویر |
| توییتر | Card Validator | طول بیش از حد توضیح |
| لینکدین | Post Inspector | عدم شناسایی og:type |
سوالات متداول
چگونه می توانم تصویر پیش نمایش OG را تنظیم کنم؟
از متا تگ og:image با آدرس کامل تصویر استفاده کنید. اندازه پیشنهادی حداقل ۱۲۰۰×۶۲۵ پیکسل است. تصویر باید در دسترس عمومی باشد و فرمت jpg یا png داشته باشد.
آیا می توانم مقدار og:title را به صورت داینامیک بسازم؟
بله، می توانید مقدار را با متغیرهای سرور یا افزونه های CMS تولید کنید. در PHP از echo یا در وردپرس از تابع get_the_title استفاده کنید. اطمینان حاصل کنید که مقدار حداکثر ۶۰ کاراکتر باشد.
چرا وقتی صفحه ام در فیس بوک به روز نمی شود؟
فیس بوک اطلاعات را کش می کند و تغییرات را فوراً نشان نمی دهد. از ابزار Sharing Debugger برای پاک سازی کش استفاده کنید. پس از اسکن مجدد، متا تگ های جدید نمایش می یابند.
فرق بین og:description و twitter:description چیست؟
og:description برای تمام پلتفرم های Open Graph مانند فیس بوک است. twitter:description مخصوص توییتر است و می تواند متفاوت باشد. اگر twitter:description موجود نباشد، توییتر از og:description استفاده می کند.
چک لیست سریع
- اصول پایه OG را برای سئو مرور کنید.
- متادیتای OG را به صورت دقیق در هر صفحه تنظیم کنید.
- تصاویر و عناوین را به گونه ای بهینه کنید که در شبکه های اجتماعی جذاب باشد.
- از پارامترهای پیشرفته مثل og:locale و og:site_name برای افزایش تعامل بهره ببرید.
- در شبکه های مختلف OG را تست کنید و عملکرد را به صورت دوره ای مانیتور کنید.
با به کارگیری این نکات، می توانید حضور محتوای خود را در شبکه های اجتماعی به صورت چشم گیر تقویت کنید. هر تغییری که اعمال می کنید، تأثیر مستقیم بر نرخ کلیک و تعامل کاربران دارد. اگر سؤال یا تجربه ای در این زمینه دارید، خوشحال می شویم که آن را با ما به اشتراک بگذارید.
