متا تگ OG یا Open Graph چیست؟


آیا تا به حال به این فکر کرده‌اید که چطور می‌توانید کلیک بیشتری برای محتوایتان بگیرید یا کاری کنید که در شبکه‌های اجتماعی بیشتر مورد توجه قرار گرفته و مردم آن‌ها را با یکدیگر به اشتراک بگذارند؟ راه حل این کار استفاده از متا تگ OG یا Open Graph است.
وقتی مطلبی با متاتگ OG به اشتراک گذاشته می‌شود، ظاهری متفاوت و به مراتب جذاب‌تر از مواقعی دارد که بدون استفاده از این متا تگ‌ها و به صورت عادی به اشتراک گذاشته می‌شده است.

متا تگ OG یا Open Graph چیست؟

متا تگ‌های Open Graph یا OG قطعاتی از کد هستند که در بخش <head> صفحات وب قرار می‌گیرند. کار این متا تگ‌ها کنترل نحوه نمایش URL بعد اشتراک‌گذاری است.
تعداد زیادی از سایت‌های شبکه‌های اجتماعی از جمله فیسبوک، لینکدین و توییتر از پروتکل Open Graph استفاده می‌کنند. این پروتکل برای اولین بار توسط فیسبوک معرفی شد.
یک نمونه از متا تگ OG را در سطر زیر ملاحظه می‌کنید:

<meta property="og:title" content="what are Open Graph meta tags" />

چرا متا تگ Open Graph ساخته شد؟

متا تگ OG برای شبکه‌های اجتماعی ساخته شد.
هدف این بود تا پست‌های شبکه‌های اجتماعی بیشتر کلیک بگیرند. این متا تگ برای رسیدن به این هدف بر روی ظاهر محتوای به اشتراک گذاشته شده اثر می‌گذارد و در واقع آن را با یک نمودار نمایش می‌دهد. در این نمودار بخش‌های مختلف محتوا به نمایش درمی‌آید؛ به این ترتیب نه‌تنها ظاهر جذاب‌تری پیدا می‌کند بلکه کاربران در یک نگاه به محتوای آن پی خواهند برد.

تأثیر متا تگ OG روی سئو چیست؟

استفاده از متا تگ‌های OG به صورت مستقیم بر سئو اثر نمی‌گذارد اما با تأثیری که بر عملکرد لینک‌های سایتتان در شبکه‌های اجتماعی خواهد داشت می‌تواند باعث شود تا:

محتوای سایتتان در شبکه‌های اجتماعی بیشتر و بیشتر به اشتراک گذاشته می‌شود و این یعنی بک لینک‌های بیشتر
لینک‌هایی که در شبکه‌های اجتماعی کار می‌گذارید بیشتر کلیک می‌خورند و این یعنی ترافیک بیشتر برای سایت
هر دو مورد بالا به افزایش اعتبار صفحه (PA) و نهایتاً افزایش اعتبار دامنه (DA) منجر خواهد شد و این یعنی بهبود رتبه

نحوه استفاده از متا تگ OG در کدهای سایت چگونه است؟

استفاده از متا تگ Open Graph به دو روش قابل انجام است:

  • به صورت دستی

در این روش تنها کافی است تگ‌های OG را در بخش <head> صفحه وب وارد کنید. برای این منظور بهتر است از ابزارهای markup generato مانند web code tools کمک بگیرید تا احتمال خطا را به حداقل برسانید.

  • از طریق افزونه

اگر از سایت وردپرسی استفاده می‌کنید می‌توانید این کار را با نصب افزونه Yoast’s SEO plugin انجام دهید.
بعد از نصب یواست، به صفحه ویرایش پست بروید. در پایین صفحه، بخش Yoast Seo را مشاهده خواهید کرد. در این بخش، وارد تب social شوید و رسانه اجتماعی موردنظرتان را انتخاب کنید. سپس کافی است در باکس‌های خالی، کد تگ‌های og مربوطه را بنویسید.

چگونه متا تگ‌های Open Graph را چک کنیم؟

بعد از اینکه همه تگ‌ها را در صفحه وب کار گذاشتید، باید از درستی آن‌ها اطمینان حاصل کنید. به این منظور می‌توان از ابزارهایی مثل موارد زیر استفاده کرد:

  • Facebook sharing debugger

  • Twitter card validator

  • LinkedIn Post Inspector

در برخی موارد ممکن است شما از پیش در صدها صفحه از سایتتان از متا تگ OG یا Open Graph استفاده کرده باشید. برای بررسی این متا تگ‌های قدیمی‌تر از ابزار Ahrefs’ Site Audit استفاده کنید.

چگونه یک متا تگ OG خوب بنویسیم؟

برای اینکه یک og:description خوب برای تگ Open Graph بنویسیم، باید به یک سری ازنکات توجه کنیم. اول از همه باید به این نکته توجه داشته باشید که تمرکزتان را از روی نوشتن کلمات کلیدی در توضیحات تگ اوپن گراف بردارید چرا که استفاده کردن یا نکردن از کلمات کلیدی در این توضیحات، تاثیر چندانی در سئو سایت شما ندارد. برای نوشتن og:title  هم خوب است به این نکته توجه داشته باشید که عباراتی راکه در پست شبکه اجتماعی (مثلاً یک توییت) نوشته‌اید را عیناً به کار نبرید و در نوشتن آن هوشمندی به خرج دهید و نوآوری داشته باشید.

اگر از متا تگ Open Graph استفاده نکنیم، چه اتفاقی می‌افتد؟

از آنجایی که امروزه بازار شبکه‌های اجتماعی گرم است و کاربران زیادی وقت خودشان را در این شبکه‌ها سپری می‌کنند، پس بهتر است که حتماً از تگ OP استفاده کنید. این کار باعث می‌شود تا کاربران ارتباط بهتری با لینک به اشتراک گذاشته شده برقرار کنند و بیش‌تر ترغیب می‌شوند تا روی آن کلیک کنند و اینگونه بازدید سایت خود را افزایش می‌دهید. اما اگر از آن استفاده نکنید، تاثیر منفی روی سئو سایت شما نمی‌گذارد.

انواع متا تگ‌های OG

فیسبوک به طور رسمی 17 نوع متا تگ Open Graph معرفی کرده است. ما در اینجا فقط به چند نوع مهم آن خواهیم پرداخت. با درک این متا تگ‌های OG به اصول آن پی خواهید برد.

  1. og:title عنوان سایت

اگر به خاطر داشته باشید، در ابتدای همین مطلب یک خط کد OG نمایش داده شد.

<meta property="og:title" content="what are Open Graph meta tags" />

Og:title به عنوان محتوا اشاره دارد و یعنی در این قطعه کد باید بعد از کلمه content و بین دو گیومه، عنوان محتوا را بنویسید.
بهتر است هنگامی از این اپن گراف استفاده کنید که عنوان محتوا کوتاه (تقریباً حداکثر 40 کاراکتر برای موبایل و 60 کاراکتر برای کامپیوتر) است. 
در ضمن فقط عنوان خالی را در کد بیاورید و از اضافه کردن هر چیز دیگری مثل نام سایت، نام برند و ... خودداری کنید.

  1. og:description توضیحات صفحه

در این مورد، در اسنیپت کد یک توضیح مختصر در مورد محتوا نوشته می‌شود.

<meta property="og:description" content="اپن گراف چیست، چطور می‌توان از آن استفاده کرد و چه تأثیری در سئو دارد" />

این توضیح در عین حال که باید کوتاه (حدود 2 الی 4 جمله) باشد، باید به قدری جذاب نوشته شود که کاربران را به کلیک کردن ترغیب کند.

  1. og:url آدرس منحصر به فرد صفحه

در این نوع متا تگ OG یا Open Graph از آدرس یا URL صفحه استفاده می‌شود:

<meta property="og:url" content="https://jetseo.ir/article/9/متا-تگ-اپن-گراف-چیست /" />

یک نکته هنگام استفاده از متا تگ og:url را باید رعایت کنید و آن این است که از URL اصلی استفاده شود. مثلاً اگر صفحه a به یک صفحه b ریدایرکت شده است، باید در این قطعه کد URL صفحه b وارد شود. هم‌چنین اگر برای چند صفحه یک کنونیکال مشخص کرده‌اید، URL کنونیکال را وارد کنید.

  1. og:image تصویر مطالب

در این نوع متا تگ نیز از یک URL استفاده می‌شود؛ اما URL متعلق به یک تصویر است.
برای صفحاتی که قابلیت اشتراک‌گذاری داشته باشند -مانند صفحه اصلی، پست‌های وبلاگ و ...- از URL تصویر خود صفحه استفاده کنید و برای سایر صفحات URL لوگو یا تصاویر مرتبط با برندتان را به کار ببرید.
در ضمن برای اینکه تصویر در تمام دستگاه‌ها با شفافیت خوبی دیده شود، از تصاویر حداقل با ابعاد 1200 در 630 یا تصاویر بزرگ‌تر با نسبت 1.91 به 1 استفاده کنید.

<meta property="og:url" content="https://www.jetseo.ir/Uploadfiles/CkEditor/Images/guest-post-1-.jpg" />

  1. Og:type نوع محتوا

در این نوع متا تگ OG یا Open Graph نوع محتوای به اشتراک گذاشته شده مشخص می‌شود؛ بنابراین در مقابل content در اسنیپت کد باید کلماتی مانند article (برای پست‌ها)، website (برای سایر صفحات سایت به جز پست‌ها و مقالات)، image و ... قرار بگیرد.

<meta property="og:type" content="article" />

  1. Og:locale زبان محتوا

همان طور که حدس می‌زنید، در این کد به زبان محتوا اشاره می‌شود و بیشتر برای محتوایی که به زبان‌های غیر از زبان انگلیسی نوشته شده باشد کاربرد دارد.

<meta property="og:locale" content="fa" />

تگ-og

تگ‌های Open Graph پیشرفته

تگ‌های OG یاد شده را می‌توان به روش‌های پیشرفته‌تری نیز استفاده کرد. برای نمونه برای متا تگ og:image می‌توان خصوصیات دیگری را نیز به شکل زیر اضافه کرد:

  • Og:image:url

این متا تگ، دقیقاً مانند متا تگ og:image عمل می‌کند.

  • Og:image:secure_url

اگر صفحه وب نیاز به https داشته باشد از یک url جایگزین استفاده می‌کنیم.

  • Og:image:type

در این نوع متا تگ Open Graph فرمت تصویر مشخص می‌شود و به شکل کد زیر درمی‌آید:

<meta property="og:image:type" content="image/jpeg" />

  • Og:image:width

در این مورد، باید تعداد پیکسل‌های عرض تصویر را در کد OG وارد کرد؛ مانند:

<meta property="og:image:width" content="400" />

  • Og:image-height

این مورد هم مانند مورد قبل است با این تفاوت که در کد OG تعداد پیکسل‌های ارتفاع تصویر نوشته می‌شود.

  • Og:image:alt

همان طور که مشخص است، تگ آلت تصویر را (یا متنی که تصویر را توصیف کند) در کد می‌آوریم:
<meta property="og:image:alt" content="کیک تولد مستطیل با تصویر السا به رنگ آبی"/>
به جز متا تگ OG تصاویر، این متا تگ را می‌توان برای ویدئو یا فایل‌های صوتی نیز به کار برد:

  1.  Og:video فایل ویدئویی

متا تگ Open Graph فایل‌های ویدئویی نیز از همان قوانین یاد شده تبعیت می‌کند؛ به همین دلیل در این بخش فقط به ارائه مثال‌هایی از اسنیپت کدهای OG ویدئو اکتفا می‌کنیم:

<meta property="og:video" content="http://example.com/movie.swf" />
<meta property="og:video:secure_url" content="https://secure.example.com/movie.swf" />
<meta property="og:video:type" content="application/x-shockwave-flash" />
<meta property="og:video:width" content="400" />
<meta property="og:video:height" content="300" />

  1. Og:audio فایل صوتی

در اپن گراف فایل‌های صوتی، می‌توان سه خصوصیت فایل را در کد نشان داد:

<meta property="og:audio" content="http://example.com/sound.mp3" />
<meta property="og:audio:secure_url" content="https://secure.example.com/sound.mp3" />
<meta property="og:audio:type" content="audio/mpeg" />

  1. Og:music

این نوع متا تگ می‌تواند به صورت‌های زیر نوشته شود:

<meta property="og:music:duration" content="…" />
<meta property="og:music:album" content="…" />
<meta property="og:music:album:disc" content="…" />
<meta property="og:music:album:track" content="…" />
<meta property="og:music:musician" content="…" />
<meta property="og:music:song" content="…" />
<meta property="og:music:song:disc" content="…" />
<meta property="og:music:song:track" content="…" />
<meta property="og:music:release_date" content="…" />
<meta property="og:music:creator" content="…" />

در مورد سایر متا تگ‌های OG نیز می‌توان به همین صورت جزئیات بیشتری را ارائه کرد. در ادامه از ارائه جزئیات و توضیحات اضافی خودداری و به ذکر نام سایر متا تگ‌های Open Graph بسنده می‌کنیم.

  1.  Og:book کتاب
  2. Og:profile پروفایل اشخاص
  3. Og:site_name
  4. Og:determiner حرف تعیین‌کننده که قبل از اسامی اشیا در زبان انگلیسی استفاده می‌شود، مانند the، a یا an

شما می توانید برای بررسی وضعیت تگ های og در سایتتان از ابزار جت سئو استفاده کنید و با عضویت رایگان در سایت مشکلات سئویی سایتتان را بررسی و برطرف نمایید.

عضویت رایگان در جت سئو

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

با عضویت در جت سئو گزارش رایگان سایت خود را ببینید

بیشتر بخوانید

دیدگاه خود را با ما در میان بگذارید
امتیاز: