فرض کنید یکی از صفحات سایت خود را در شبکه های اجتماعی به اشتراک میگذارید، اما به جای یک پیش نمایش شیک و حرفه ای، تنها یک لینک ساده و بی روح ظاهر میشود. هیچ تصویری نیست، هیچ عنوانی نمایش داده نمیشود، و در یک نگاه، محتوای صفحه شما هیچ جذابیتی برای کلیک کردن ندارد. اینجاست که نقش Open Graph روشن میشود، زبانی که به پلتفرم هایی مانند واتساپ، تلگرام، لینکدین و فیسبوک میفهماند هر صفحه از سایت شما چه تصویری، چه عنوانی و چه توضیحی باید داشته باشد.

در ادامه این مقاله، از پایه با مفهوم Open Graph آشنا میشوید، یاد میگیرید چطور آن را به سایت خود اضافه کنید، و در میابید چرا فعال کردن آن نه تنها ظاهر لینک های شما را جذاب تر میکند، بلکه تجربه کاربر و حتی عملکرد سئو سایت شما را هم به شکل غیر مستقیم ارتقا میدهد. در پایان مقاله در بخش نتیجه گیری برای شما یک نکته طلایی آوردم که کمک میکند

Open Graph چیست؟

پروتکل Open Graph در سال ۲۰۱۰ توسط فیسبوک معرفی شد تا به سایت ها اجازه دهد هنگام اشتراک گذاری لینک، ظاهر خود را کنترل کنند. Open Graph صرفا برای زیبایی نیست، برای اعتمادسازی برند شماست. وقتی کاربر لینک شما را در فید میبیند و تصویر و توضیح حرفه ای دارد، احتمال کلیک چند برابر میشود.

به خاطر داشته باشید: ظاهر لینک اولین برخورد کاربر با برند شماست. در واقع باعث میشود هنگام به اشتراک گذاشتن یک لینک، مخاطبان بتوانند عنوان و موضوع آن لینک را حتی بدون کلیک کردن هم متوجه بشن و دقیقا بدونن قراره وارد چه صفحه ای بشن. میتوانیم در بخش HTML سایت خود با چند خط کد در بخش صفحه میتوانید تعیین کنید:

• چه تصویری نمایش داده شود
• چه عنوانی بیاید
• چه توضیحی زیر آن نوشته شود
• و لینک اصلی کدام است

به زبان ساده، Open Graph کمک میکند لینک های شما در شبکه های اجتماعی دقیقا همان طور دیده شوند که میخواهید.

چرا متاتگ Open Graph مهم است؟

متاتگ های OG به طور مستقیم سئوی سایت شما را تغییر نمیدهند، اما به صورت غیر مستقیم سیگنال های تعامل و ترافیک اجتماعی را افزایش میدهند. وقتی ظاهر لینک جذاب است، کاربران بیشتر روی آن کلیک میکنند. هر کلیک، یعنی بازدید بیشتر و در نتیجه اعتبار بالاتر نزد گوگل.

در نهایت، CTR بهتر در شبکه های اجتماعی = سیگنال مثبت برای الگوریتم های گوگل. به زبان ساده، Open Graph پلی بین سوشیال سیگنال و سئوست.

نکته: سوشال سیگنال ها همیشه یکی از مهمترین فاکتور های غیر مستقیم برای سئو بوده و خواهند بود. ما خودمان در ویکی دمی؛ پروژه هایی که انجام میدیم همیشه در استراتژی های off page یه نگاهی هم به سوشال سیگنال ها داریم.

ساختار اصلی و تگ های کلیدی Open Graph

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

Open Graph در مقابل Twitter Cards: مقایسه و اولویت دهی

در حالی که Open Graph یک پروتکل جهانی است، توییتر (X) برای پیش نمایش لینک ها پروتکل اختصاصی خود به نام Twitter Cards را دارد.

نکته کلیدی: اگر تگ های Twitter Cards را اضافه کنید، توییتر اولویت را به آن ها میدهد. در صورت نبود کارت های توییتر، این پلتفرم از تگ های OG استفاده میکند. برای کنترل کامل نمایش در توییتر، بهتر است از هر دو استفاده کنید.

برای کنترل بهتر جزئیات و مدیریت عملکرد، میتوانید از تگ های زیر نیز استفاده کنید:

الف) انواع پیشرفته محتوا (og:type)

برای محتوای تخصصی، استفاده از انواع محتوای زیر میتواند به موتورها و شبکه ها کمک کند:

این تگ ها برای اتصال سایت به ابزارهای توسعه دهنده فیسبوک (متا) و کنترل زبان حیاتی هستند:

• نامی خوانا برای کل سایت که در کنار لینک نمایش داده میشود.
• زبان محتوا (مهم برای سایت های چندزبانه).
• اگر میخواهید آمار کلیک ها و تعاملات اجتماعی را از طریق ابزارهای فیسبوک (Insights) پیگیری کنید، باید این تگ را به شناسه اپلیکیشن خود متصل کنید.

نحوه استفاده در CMSها

• وردپرس (Yoast یا RankMath): در هر پست وارد تب Social → Facebook شوید، عنوان، توضیح و تصویر را تنظیم کنید. اگر تنظیم نکنید، افزونه به صورت خودکار از عنوان و تصویر شاخص استفاده میکند. (بیشتر افزونه ها تنظیمات Twitter Card را نیز در همین قسمت ارائه میدهند.)
• Shopify: از مسیر Online Store → Themes → Edit Code → Snippets → social-meta-tags.liquid تگ ها را ویرایش کنید و تصویر سراسری تعریف کنید.
• Wix و Squarespace: در تنظیمات صفحه، بخش Social Share یا Social Image، OG title و OG image را مشخص کنید. اگر نیاز به کنترل دقیق تر دارید، از Code Injection در استفاده کنید.

چطور صحت متاتگ های OG را بررسی و عیب یابی کنیم؟

بعد از تنظیم، حتما تست کنید که شبکه ها اطلاعات درست را دریافت میکنند. ابزارهای تست:

مشکل: متداول ترین خطای Open Graph این است که شما تصویر یا عنوان را تغییر میدهید، اما فیسبوک یا تلگرام همچنان پیش نمایش قدیمیرا نشان میدهند.

دلیل: شبکه های اجتماعی (به خصوص فیسبوک و لینکدین) اطلاعات OG را برای مدت طولانی ذخیره (Cache) میکنند تا بار سرور آن ها کاهش یابد.

راه حل:

1. استفاده از Scrape Again/Reinspect: به ابزار Debugger مربوطه (مثلا Facebook Debugger) بروید. URL صفحه خود را وارد کنید و به جای اینکه فقط نتیجه را ببینید، روی دکمه “Scrape Again” یا “Reinspect” کلیک کنید. این کار به پلتفرم دستور میدهد که دوباره به صفحه شما سر بزند و آخرین تگ ها را بخواند.
2. رفع خطاهای رایج:
   ناهماهنگی بین og:url و URL اصلی (باید یکی باشند).
   ابعاد اشتباه در og:image (سایز ۱۲۰۰×۶۳۰ را رعایت کنید).
   توضیحات طولانی که در فید قطع میشوند (بیش از ۲۰۰ کاراکتر).

نکته طلایی

نتیجه گیری

متاتگ های Open Graph و Twitter Cards شاید در نگاه اول ساده به نظر برسند، اما نقش بزرگی در حرفه ای نشان دادن لینک های سایت شما دارند. با اضافه کردن فقط چند خط کد، کاری میکنید که هر لینکی از سایت شما با تصویر، عنوان و توضیحی دقیق و چشم گیر نمایش داده شود، درست مثل پست های برندهای بزرگ.

نتیجه؟ لینک های شما جذاب تر دیده میشوند، نرخ کلیک بالاتر میرود و تعامل کاربران در شبکه های اجتماعی رشد میکند. به سبک ویکی دمی میتوان گفت: «وقتی لینک های شما هنوز حرفی برای گفتن ندارند، Open Graph را فعال کنید تا خودشان شروع به حرف زدن کنند.»

درصورت داشتن سوال یا بودن ابهام در مقاله در کامنت ها برام بنویسید؛ خیلی سریع به سوالات شما پاسخ میدهیم “ارادتمند شما ویکی دمی”