شاید برای شما سوال پیش بیاید چرا بعضی سایت ها مخصوصا خبر گزاری ها و مجلات علمی که لینک مطالبشان را در واتساب یا شبکه های اجتماعی به اشتراک می گذاریم به صورت زیبا تصویر شاخص در کنار لینک نمایش داده می شود. مثل تصویر زیر :
در این پست میخواهیم با این ترفند آشنا کنیم که یکی از تکنیک های مهم و جدید سئو برای افزایش بازدید سایت در شبکه های اجتماعی نیز محسوب می شود.
نه تنها تصویر بلکه ما میتوانیم بعضی از شاخصه های اصلی یک پست یا یک محصول مثل تصویر ، عنوان ، قیمت ، خلاصه مطلب و کلی از ویژگی های دیگر را در لینک هنگام اشتراک گذاری برای مخاطب به نمایش بگذاریم.
به این ترفند در اصطلاح سئو Open Graph Meta Data می گوییم. به وسیله این ترفند با قرار دادن یک سری کدهای متا در تگ هد سایت میتوانیم تصویر شاخص و عنوان مطلب یا عنوان سایت و … را به همراه لینک به مخاطب نشان دهیم.
1-قرار دادن این ویژگی به وسیله افزونه ها در ووردپرس
افزونه های زیادی موجود است که اگر در قسمت سیرچ افزونه ها کلمه Open Graph را تایپ کنید بهترین افزونه ها در تصویر زیر مشاهده می کنید که با نصب ان ها مشاهده خواهید کرد از این به بعد اگر لینک سایت خود را در واتساب به اشتراک گذاشتید به همراه لینک تصویر شاخص مطالب هم ارسال می شود.
افزونه SEOPress, on-site SEO
افزونه Open Graph and Twitter
2-قرار دادن به وسیله کدهای Html
نوعی از فراداده و در واقع، اصطلاح یا کلیدواژه‌ای است که به بخشی از اطلاعات (مانند آدرس یک وب‌سایت، یک تصویر دیجیتالی یا یک فایل کامپیوتر) اختصاص داده می‌شود تا توضیحی اضافی به آن بیفزاید. این نوع فراداده اطلاعات اضافه‌ای برای یک موجودیت اطلاعاتی فراهم می‌کند و اجازه می‌دهد بتوان دوباره آن موجودیت را از طریق جستجو پیدا کرد. تگ‌ها معمولاً به طور غیررسمی و شخصی، توسط سازندهٔ آیتم یا بینندهٔ آن (بستگی به سیستم دارد) انتخاب و اختصاص داده می‌شوند.
متا تگ SG یا Social Graph
Social Graphیا گراف اجتماعی یک مفهوم است. بدین صورت که چگونه وب سایت خود را در میان ترافیک بالای شبکه های اجتماعی جای دهیم. به گونه ای که در میان ترافیک بالای شبکه های اجتماعی بازدید وب سایت ما نیز بالا رود. و در سئوی سایت ما تاثیر مثبت داشته باشد.
کارآیی متا تگ OG یا Open Graph
تگ های og زیر میتوانند به معرفی کلی وب سایت شما کمک کنند دقت فرمایید این تگ ها می بایست حتما در بین تگ <head> که با رنگ قرمز نشان داده شده قرار بگیرند:
<head>
<title>The Rock (1996)</title>
<meta property="og:title" content="The Rock" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://www.imdb.com/title/tt0117500/" />
<meta property="og:image" content="http://ia.media-imdb.com/images/rock.jpg" />
...
</head>متا تگ OG یا Open Graph های متفاوتی که در سایت های مختلف کاربرد دارند:
<meta property="og:audio" content="http://example.com/bond/theme.mp3" />
<meta property="og:description"
content="Sean Connery found fame and fortune as the
suave, sophisticated British agent, James Bond." />
<meta property="og:determiner" content="the" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="es_ES" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://example.com/bond/trailer.swf" />وog:image:url- Identical toog:image.og:image:secure_url- An alternate url to use if the webpage requires HTTPS.og:image:type- A MIME type for this image.og:image:width- The number of pixels wide.og:image:height- The number of pixels high.
یک مثال کامل برای متا تگ OG یا Open Graph هایی برای تصاویر
<meta property="og:image" content="http://example.com/ogp.jpg" />
<meta property="og:image:secure_url" content="https://secure.example.com/ogp.jpg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="400" />
<meta property="og:image:height" content="300" />یک مثال کامل برای متا تگ OG یا Open Graph هایی برای ویدئوها
<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" />یک مثال کامل برای متا تگ OG یا Open Graph هایی برای فایل های صوتی
<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" />