تا حالا شده یه پست فوق العاده توی سایتت بذاری، بعد وقتی تو واتساپ یا تلگرام یا توییتر شیرش می کنی، پیش نمایش پست یه چیزی از آب دربیاد که خودتم به زور بفهمی چیه؟ انگار عکسش تصادفی انتخاب شده، عنوانش نصفه افتاده و توضیحات با اصل مطلب دوتا چیز متفاوت هست! اگر این صحنه ی ناراحت کننده رو تجربه کردی، باید بهت بگم علتش چیزی نیست جز غفلت از og متا، همون دسته از متا تگ هایی که مختص شبکه های اجتماعی طراحی شدن. بذار باهم بررسی کنیم چطور og متا کاری می کنه که وقتی لینک سایتت رو به اشتراک می ذاری، بتونه مثل یک ستاره بدرخشه و حسی حرفه ای به مخاطب القا کنه.
og متا چیست؟ معرفی و تاریخچه کوتاه
اصلاً og مخفف چی هست؟ og یعنی Open Graph. این استاندارد رو اولین بار تیم فیسبوک در سال ۲۰۱۰ معرفی کرد تا اشتراک گذاری لینک ها در شبکه های اجتماعی، ظاهری منظم و استاندارد داشته باشه. یه جور رابط بین وب سایت و سوشال مدیاهاست که وظیفه داره تعریف کنه هر لینک با چه عکس، عنوان و توضیحاتی نمایش داده بشه. گوگل و توییتر و LinkedIn هم بعداً از این مشخصات استفاده کردن. انگار یه کارت ویزیت اختصاصی برای هر مطلب سایت خودت تنظیم می کنی!
چرا og متا برای وب سایت و سئو سایت مهمه؟
قبول داری که ظاهر مهمه؟ آقا هر چقدر هم محتوا عالی باشه، اگه با یه نمای “زشت” تو شبکه اجتماعی ها عرضه بشه، احتمال کلیک کردن روش به شدت کم میشه. وقتی og متا رو به درستی پیاده کنی، anchor لینک هات مثل جواهری خاص، در ذهن مخاطب می مونه. همچنین سئو سایت غیرمستقیم سود می بره؛ چون نرخ کلیک و مشارکت کاربران در شبکه های اجتماعی بالا میره و این برای گوگل یعنی ارزش واقعی سایت تو بیشتر دیده میشه. داده ها نشون می ده اشتراک گذاری هایی که og متا خوب دارن، تا ۴۰٪ نرخ جذبتری نسبت به نمونه های بدون og ثبت می کنن
(منبع: databox.com).
اجزای اصلی og متا که هر وب مستر باید بداند
بیا یه نگاه دقیق تر به اجزای کلیدی بندازیم:
- og:title – عنوان مطلب؛ همون چیزی که توی کارت پیش نمایش بولد میشه.
- og:description – توضیحی کوتاه و جذاب که خلاصه ای از محتوا رو نشون می ده.
- og:image – تصویر بارز؛ حیاتی ترین بخش برای جلب توجه.
- og:url – URL دقیق برای جلوگیری از اشتباهات ریدایرکت یا آدرس اشتباه.
- og:type – نوع محتوا؛ مثلا مقاله، ویدئو، موزیک و…
این تگ ها هرکدوم نقش تعیین کننده ای دارن و نبود هرکدوم ممکنه باعث بشه anchor تو اشتراک گذاری، شکل عجیب غریبی پیدا کنه.
چطور og متا را برای anchor و وب سایت و سئو سایت بهینه کنیم؟
اینجا لازمه یه کم هوش و حوصله خرج کنی! قدم اول انتخاب عکس مناسبه: سایز پیشنهادی ۱۲۰۰ در ۶۲۷ پیکسل (همون نسبت کلاسیک ۱:۹۱:۱) و کیفیت حداقل ۸۰ کیلوبایت. برای عنوان، کلیدواژه اصلی anchor رو فراموش نکن، توی توضیحات حتماً یک فراخوان به عمل جذاب بذار تا کلیک رو وسوسه کنه. یادت باشه URL صاف و ساده باشه (بدون پارامتر عجیب و غریب) تا سئو سایت هم تقویت بشه. و اگر برای چند زبان مختلف سایت داری، og:locale رو هم معین کن.
تاثیر og متا بر تجربه کاربری و وفاداری برند
یه بار مطلبی رو تو سایت خودم شیر کردم. og متاهاشو درست ست نکرده بودم، نتیجه؟ کلی مسیج گرفتم “فلانی! چرا تصویر نداره؟ چرا عنوان عجیبه؟”. انگار یه آدم مهم رو با لباس خواب به مهمونی دعوت کنی! حالا og متا رو خوب ست کنید، متوجه می شید وقتی کارت به درستی نمایش داده می شه، کاربرها بیشتر مشتاق کلیک، خوندن و حتی اعتماد به برندت میشن. این تأثیر ریز اما عمیق روی وفاداری به برند و حتی نتایج SEO داره.
استفاده از ابزارهای تست og متا؛ مراقب خطاها باش!
خبر خوب اینه که فیسبوک یه ابزاری به نام Sharing Debugger داره و توییتر هم Card Validator. این ابزارها همه چی رو می خونن و اگه اشتباهی یا مقدار خالی باشه سریع بهت اخطار میدن. بد نیست مقاله Moz رو هم بخونی تا دیتیل فنی بیشتری دستت بیاد.
اشتباهات رایج در پیاده سازی og متا و چگونگی رفع آنها
خب حالا چالش! اکثراً اشتباه می کنن og:image رو با ابعاد اشتباه می ذارن یا og:description رو می ذارن کپی متای توضیحات که گاهی اصلا مناسب اشتراک گذاری نیست. یادتون باشه توضیح og باید کوتاه تر و جذاب تر از meta description باشید؛ مخاطب شبکه اجتماعی وقت سر خاروندن نداره! همچنین فراموش نکنید هر صفحه سایت باید og منحصر به فرد خودش رو داشته باشه وگرنه تمام anchorها تو اشتراک گذاری یه شکل تکراری و خسته کننده می گیرن.
نمونه کد تگ og متا بهینه برای وب سایت و سئو سایت
بذار یه نمونه ساده HTML از تگ های og ارائه کنم (<head> سندت بذار):
<meta property="og:title" content="راهنمای جامع og متا برای وب سایت و سئو سایت" />
<meta property="og:description" content="چطور با استفاده از og متا سایت خود را در شبکه های اجتماعی حرفه ای تر معرفی کنیم؟" />
<meta property="og:image" content="https://example.com/images/og-image.jpg" />
<meta property="og:url" content="https://example.com/og-meta-guide" />
<meta property="og:type" content="article" />
رفلکشن نهایی؛ هر چیزی زیباتر دیده شود، بیشتر هم کلیک می خورد
در نهایت از من بشنو: ظاهر سایتت در اشتراک گذاری همیشه معرف شخصیت برندته. گوگل و بقیه سوشال مدیاها، قبل اینکه کسی رو به محتوای شما برسونن، ظاهر کار رو می سنجن. با کمی دقت تو استفاده از og متا، کارت همیشه مثل یه ویترین شیک به چشم میاد. شاید همون لحظه ای که عاشق پست هات میشن و anchor لینک هات تو ذهنشون ثبت میشه دقیقا به خاطر همین og متا باشه! پس وقتشه از این برگ برنده غافل نشی.
| خلاصه سریع مقاله | لینک های مرجع |
|---|---|
| روش استفاده درست از og متا، باعث ایجاد اشتراک گذاری زیبا و حرفه ای، افزایش کلیک و بالا رفتن ارزش برند و سئو سایت می شود. | Facebook Open Graph Docs، Moz Guide |
پرسش های پرتکرار درباره og متا
- og متا چه تاثیری روی سئو سایت دارد؟
مستقیم نه، اما از طریق افزایش نرخ کلیک، زمان بازدید و اشتراک گذاری اثر قوی بر سئو سایت دارد. - آیا همه شبکه های اجتماعی og متا را یکسان نمایش می دهند؟
نه؛ گرچه اکثر شبکه ها از og پیروی می کنند، برخی مانند توییتر مشخصات خاص (tw:card و …) دارند. - ساخت og متا دستی دشوار است؟
خیر! با یک کد ساده و کمی دقت در محتوا و آدرس عکس و متون، به راحتی انجام می شود. - آیا پلاگین های وردپرس og متا را خودکار تنظیم می کنند؟
بله اکثر پلاگین های سئو مثل Yoast این امکان را دارند، اما حتما مقادیر را دستی چک و اصلاح کنید. - برای صفحات فارسی locale og چه مقدار است؟
برای محتوای فارسی مقدار «fa_IR» را انتخاب کنید.
