متا تگ OG یا Open Graph چیست و چه نقشی در سئو دارد؟

اشتراک‌گذاری مطالب سایت در شبکه‌های اجتماعی یکی از کارهایی است که می‌تواند ترافیک ورودی به سایت را تا حد زیادی افزایش دهد. این کار حتی می‌تواند محبوبیت برند را نزد کاربران بیشتر کند. اما همین اشتراک‌گذاری با همه مزیت‌هایی که دارد، اگر با ظاهری منظم و بهینه برای هر شبکه اجتماعی انجام نشود، نه ‌تنها تاثیری بر افزایش ترافیک نخواهد داشت حتی می‌تواند تصویری بد از برند شما نزد کاربران ایجاد کند. از این رو فیسبوک برای آنکه خیال همه را راحت کند، پروتکل OPEN GRAPH و متاتگ‌های آن را معرفی کرد. تگ‌های OG موضوعی است که در این مقاله از وب24 به آن پرداخته‌ایم. اگر شما هم می‌خواهید بدانید متا تگ OG چیست، این مقاله می‌تواند به طور کامل شما را راهنمایی کند.

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

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

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

برای بررسی اینکه چرا متاتگ‌های OG ساخته شد لازم است ابتدا به این سوال بپردازیم که اهمیت متا تگ OG چیست؟ تجربه نشان داده کاربران در شبکه‌های اجتماعی بیشتر روی لینک‌هایی کلیک می‌کنند که از متاتگ‌های بهینه OG استفاده کرده‌اند. این لینک‌ها با ظاهری منظم و ساختاریافته در شبکه اجتماعی نمایش داده می‌شوند، کلیک بیشتری می‌گیرند و باعث افزایش ترافیک بیشتر سایت می‌شوند. دلیل این اتفاق به سه عامل زیر برمی‌گردد:

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

تاثیر متا تگ OG در سئو

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

متا تگ OG چیست

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

اگر می‌خواهید بدانید روش استفاده از متا تگ OG چیست، لازم است بدانید که به دو روش می‌توانید این کار را انجام دهید. روش دستی بدین‌ صورت است که اگر به کدهای سایت دسترسی دارید، به ‌راحتی می‌توانید کد تگ‌های OG موردنظرتان را در قسمت HEAD هر صفحه که می‌خواهید، قرار داده تا متا تگ OG صفحه فعال شود.

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

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

فیسبوک تاکنون 17 تگ را به طور رسمی معرفی کرده است. البته برای اشتراک‌گذاری ساختارمند مطالب سایت‌تان در شبکه‌های اجتماعی نیازی به استفاده از همه آنها نیست. به‌طورکلی چند تگ اصلی وجود دارد که استفاده از آن‌ها برای شناسایی محتوای صفحه سایت‌تان توسط شبکه اجتماعی ضروری است. در ادامه مقاله متا تگ OG چیست، به بررسی این تگ‌ها می‌پردازیم:

og:title

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

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

معرفی خدمات وب24: طراحی سایت حرفه ای در تهران

og:url

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

og:image

با استفاده از این تگ، تصویری را که هنگام اشتراک‌گذاری صفحه شما به نمایش درمی‌آید، مشخص می‌کنید. درواقع در این تگ آدرس URL، عکس موردنظرتان قرار داده می‌شود. توجه داشته باشید که تگ image شاید مهمترین تگ OG باشد، زیرا بزرگ‌ترین عنصری است که در هنگام اشتراک‌گذاری صفحات سایت در شبکه‌های اجتماعی نمایش داده می‌شود و نقش مهمی در جلب توجه کاربر و کلیک گرفتن از آنها دارد. کد این تگ به شکل زیر است:

در استفاده از این تگ بهتر است برای هر صفحه‌ای که می‌خواهید بیشتر به اشتراک گذاشته شود، عکس‌های اختصاصی به ‌کار ببرید. برای بقیه صفحاتی که احتمال اشتراک‌گذاری کمتری دارند، از تصویر برند یا لوگوی خودتان برای این تگ استفاده کنید. همچنین تصویر شما باید نسبت ابعاد 1.91:1 را داشته باشد و بهتر است اندازه آن 1200x630 باشد.

og:description

این تگ توضیحات مختصری را در مورد محتوای به اشتراک گذاشته ‌شده، ارائه می‌دهد. کد آن به صورت زیر است:

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

معرفی خدمات وب24: طراحی سایت با وردپرس

og:locale

این تگ هم زبان صفحه‌ای که به اشتراک گذاشته شده را مشخص می‌کند. کد آن به شکل زیر است:

این تگ را باید برای همه زبان‌های غیر از انگلیسی آمریکایی استفاده کنید، زیرا وقتی آن را به کار نبرید، زبان صفحه انگلیسی درنظر گرفته می‌شود.

og:type

با استفاده از تگ TYPE می‌توانید نوع محتوا را مشخص کنید. کد آن بدین صورت است:

در استفاده از این تگ باید برای صفحات مقالات از مقدار article استفاده کنید و برای بقیه صفحات مقدار website را قرار دهید.

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

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

og:video: این تگ آدرس ویدئویی که به اشتراک گذاشته شده را در بردارد.
og:video:type: با استفاده از این تگ می‌توانید فرمت ویدئو را مشخص کنید.
og:video:width: از این تگ باید برای مشخص ‌کردن عرض ویدئو در صفحه استفاده کنید.
og:video:height: از این تگ هم باید برای مشخص ‌کردن طول ویدئو در صفحه استفاده کنید.
og:image:type: این تگ برای مشخص ‌کردن فرمت عکس استفاده می‌شود.
og:image:width: این تگ هم عرض عکس در صفحه را مشخص می‌کند.
og:image:height: این تگ برای مشخص ‌کردن طول عکس در صفحه استفاده می‌شود. بهتر است با استفاده از دو تگ اخیر طول و عرض عکس‌ها را مشخص کنید تا خیالتان از نمایش درست آنها در صفحه راحت باشد.

معرفی خدمات وب24: طراحی سایت فروشگاهی با کدنویسی اختصاصی

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

پس از آنکه کلیه تگ‌های OG موردنیاز خود را به کار بردید، بهتر است یک بار آنها را چک کنید تا از تنظیم درست آن‌ها مطمئن شوید. برای این کار می‌توانید یکی از ابزارهای زیر را به کار گیرید:

Facebook Sharing Debugger
Twitter Card Validator
LinkedIn Post Inspector

جمع‌بندی

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