بهینه‌سازی سایت برای شبکه‌های اجتماعی
پنج شنبه 28 آبان 1394 8:09 AM
چند سالی ست که شبکه‌های اجتماعی رشد چشمگیری در دنیای مجازی داشته‌اند و به حرف اول و پیشتاز آن بدل شده‌اند. این شبکه‌ها در همه‌ی زمینه‌ها از معرفی و فروش محصولات گرفته تا معرفی سایت و وبلاگ و ... بکار گرفته می‌شوند و لذا مقوله‌ی بهینه سازی یک وب سایت برای این شبکه‌های اجتماعی امری ناگزیر است. مباحث سئو که پیرامون بهینه سازی یک وب سایت برای موتورهای جستجو می‌باشند، امروزه با پدیده‌ی جدید دیگری آمیخته شده‌اند و به تعاریف قدیمی و معمول، گزینه‌هایی افزوده شده است. از این‌رو شناخت و بکارگیری روش‌های بهینه، برای این مباحث ضروری می‌باشند.
همانطور که می‌دانید هنگامیگه در ادیتور ارسال مطلب یکی از شبکه‌های اجتماعی (فیسبوک ، توییتر ، گوگل پلاس و ...) آدرس سایتی را وارد میکنید، بلافاصله لینک پردازش شده و پیش نمایشی از آن وبسایت در ادیتور نمایش داده میشود. برخی پیش نمایش‌ها حاوی عکس، عنوان لینک و خیلی منظم هستند و برخی دیگر فقط نام و عنوان سایت را در برمی‌گیرند.
برای نمونه به تصاویر زیر دقت کنید:
تصویر فوق مربوط به لینک یک سایت خبری در ادیتور فیسبوک می‌باشد. همانطور که می‌بینید عنوان خبر، عکس و توضیح مختصری در مورد خبر، با نظم و ترتیبی خاص نمایش داده شده است.
حال به تصویر زیر که مربوط به لینکی از همین سایت می‌باشد دقت کنید:
همانطور که می‌بینید، تنها لینکی ساده، بدون هیچ پیش نمایشی از وب سایت نشان داده شده است.
دلیل این اتفاق وجود یا عدم وجود متاتگ‌هایی که Social Media Metadata نامیده می‌شوند می‌باشند. چنانچه وب سایتی بوسیله‌ی این متاتگ‌ها برای شبکه‌های اجتماعی بهینه سازی شده باشد، با قرار دادن هر لینکی در ادیتور شبکه‌های اجتماعی، پیش نمایشی خوب از آن مطلب به نمایش گذاشته میشود. اهمیت این متاتگ‌ها در سایت‌های خبری، فروشگاه‌ها، سایت‌های آموزشی و ... بسیار بالا می‌باشد تا از مزایای جذب کاربر توسط شبکه‌های اجتماعی بهره‌مند شوند. با این مقدمه می‌رویم به سراغ معرفی و چگونگی بکارگیری این متاتگ ها.
بخش اول: متاتگ‌های موردنیاز برای لینک‌های حاوی مقالات:
ابتدا تگ html خود را به شکل زیر تغییر دهید:
|
1
|
<html itemscope itemtype="http://schema.org/Article"> |
برای شناخت و اهمیت بکارگیری خصوصیت itemscope میتوانید اینجا را ببینید. این خصوصیت زوج‌های کلید/مقداری را تعریف می‌کند که جزئی از سند می‌باشند. در ادامه itemtype به تشریح یک زوج کلید/مقدار می‌پردازد که به مرورگر می‌گوید کدام آیتم‌ها برای یک مقاله بهینه شده‌اند.
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<title>عنوان صفحه ، حداکثر 60 تا 70 کارکتر باشد</title><meta name="description" content="شرح صفحه ، حداکثر 150 کارکتر باشد" /> <!-- Schema.org markup for Google+ --><meta itemprop="name" content="نام یا عنوان صفحه"><meta itemprop="description" content="شرح صفحه"><meta itemprop="image" content="نشانی اینترنتی عکسی که در پیشنمایش نشان داده میشود"> <!-- Twitter Card data --><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="کپی رایت نام سایت"><meta name="twitter:title" content="نام یا عنوان صفحه"><meta name="twitter:description" content="شرح صفحه"><meta name="twitter:creator" content="نویسنده"><!-- Picture size at least 280x150px -->عکس پیشنمایش با ابعاد حداقل <meta name="twitter:image:src" content="نشانی اینترنتی عکس مطلب"> <!-- Open Graph data --><meta property="og:title" content="عنوان صفحه" /><meta property="og:type" content="article" /><meta property="og:url" content="نشانی سایت" /><meta property="og:image" content="نشانی عکس مطلب" /><meta property="og:description" content="شرح مطلب" /><meta property="og:site_name" content="نام سایت" /><meta property="article:published_time" content="تاریخ انتشار" /><meta property="article:modified_time" content="تاریخ بروزرسانی" /><meta property="article:section" content="نام بخش محتوی متن مقاله" /><meta property="article:tag" content="نام تگ محتوی متن مقاله" /><meta property="fb:admins" content="شناسه عددی کاربری شما در فیسبوک" /> |
بخش دوم: متاتگ‌های موردنیاز برای لینک‌های حاوی محصولات:
ابتدا تگ html خود را به شکل زیر تغییر دهید:
|
1
|
<html itemscope itemtype="http://schema.org/Product"> |
و در نهایت متاتگ‌های زیر را به صفحه خود اضافه کنید:
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
|
<title>عنوان صفحه</title><meta name="description" content="شرح صفحه" /><!-- Schema.org markup for Google+ --><meta itemprop="name" content="عنوان صفحه"><meta itemprop="description" content="Tشرح صفحه"><meta itemprop="image" content="نشانی عکس محصول یا کالا"><!-- Twitter Card data --><meta name="twitter:card" content="product"><meta name="twitter:site" content="کپی رایت سایت"><meta name="twitter:title" content="عنوان صفحه"><meta name="twitter:description" content="شرح محصول یا کالا"><meta name="twitter:creator" content="نویسنده"><meta name="twitter:image" content="نشانی عکس محصول یا کالا"><meta name="twitter:data1" content="قیمت محصول یا کالا"><meta name="twitter:label1" content="Price"><meta name="twitter:data2" content="رنگ کالا یا محصحول"><meta name="twitter:label2" content="Color"><!-- Open Graph data --><meta property="og:title" content="عنوان صفحه" /><meta property="og:type" content="article" /><meta property="og:url" content="نشانی سایت" /><meta property="og:image" content="عکس محصول یا کالا" /><meta property="og:description" content="شرح مصحول" /><meta property="og:site_name" content="نام سایت" /><meta property="og:price:amount" content="قیمت محصول یا کالا" /><meta property="og:price:currency" content="واحد ارزی قیمت" /> |
