ایجاد پیش‌ نمایش لینک‌ در شبکه های مجازی

ایجاد پیش‌ نمایش لینک‌ در شبکه های مجازی
ایجاد پیش‌ نمایش لینک‌ در شبکه های مجازی


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

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

پیش نمایش یک لینک
پیش نمایش یک لینک


پیش نمایش لینک معمولاً شامل یک تصویر ، عنوان ، توضیحات و نام دامنه است. همه این اطلاعات توسط شما قابل تنظیم است!

پروتکل Open Graph

این قطعه کد بخشی از پروتکل Open Graph است که توسط Facebook ایجاد شده.
این متا تگ ها نحوه نمایش لینک ها هنگام اشتراک گذاری در شبکه های اجتماعی را کنترل می کنن.
برای شروع ایجاد پیش نمایش لینک، باید متا تگ های Open Graph را در قسمت <head> کد HTML وب سایت خودمون اضافه کنیم.

Open Graph Protocol
Open Graph Protocol

متادیتاهای اجباری

چهار property برای پیاده‌سازی و تنظیم پیش‌نمایش لینک اجباری هستند:

1: تگ og:title

این همان متا تگ <title> هست که در تگ <head> صفحه هم هست. اگر متا تگ og: title پیدا نشود ، به جای آن به صورت پیش فرض از متا تگ <title> استفاده می شود که مثل کد پایین نوشته می شود.

<meta property=&quotog:title&quot content=&quotاینجا عنوان نوشته می شود&quot />

2: تگ og:type

این تگ نوع محتوای موجود در صفحه را مشخص می کنه که برای دیدن انواعی که میتونید استفاده کنید می تونید به اینجا مراجعه کنید ، سایت های فاقد این متا تگ به عنوان website شناخته می شن.

<meta property=&quotog:type&quot content=&quotwebsite&quot />

3: تگ og:url

که آدرس صفحه‌ی وبسایت می باشد و باید توجه داشته باشید که مقدار آن حتما absolute URL باشد:

<meta property=&quotog:url&quot content=&quothttps://آدرس وب.com&quot />

4: تگog:image

تصویری که در پیش نمایش لینک نمایش داده می شود. این تصویر مانند بنر تبلیغاتی هست که باید محتوای صفحه را ارائه بدهد پس در انتخاب این تصویر خوب دقت کنید.

<meta property=&quotog:image&quot content=&quothttps://آدرس عکس.jpeg&quot />

به نظر می رسد که این مقدار هم فقط با absolute URL کار می کند.
پیشنهاد می شود که وضوح عکس 1200 در 627 پیکسل و نسبت ابعاد 1 به 1.91 باشد و همچنین حجم عکس هم بیشتر از 5 مگابایت نباشد.

متادیتاهای اختیاری

1: تگ og:description

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

<meta property=&quotog:description&quot  content=&quotتوضیحات برای وب سایت&quot />

2: تگ og:site_name

اگر این صفحه وب سایت ما بخشی از یک وبسایت اصلی باشد این بخش را اضافه می کنیم و نام اصلی وب سایت را قرار میدیم

<meta property=&quotog:site_name&quot content=&quotنام وب سایت&quot />

متادیتاهای مخصوص توئیتر

1: تگ twitter:card

این متادیتا نوع نمایش کارت را در توئیتر مشخص میکند. چنانچه type , title و description در صفحه موجود باشد توئیتر به صورت پیش فرض نوع summary card را برا پیش نمایش لینک شما انتخاب خواهد کرد.

<meta name=&quottwitter:card&quot content=&quotsummary_large_image&quot />

2: تگ twitter:site

در این متادیتا آدرس صفحه توئیتر مربوط به وبسایت خود را قرار دهید.

<meta name=&quottwitter:site&quot content=&quot@gajino&quot>


3: تگ twitter:creator

در این متادیتا نام سازنده این صفحه قرار میگیرد.

 <meta name=&quottwitter:creator&quot content=&quot@rezahashemi&quot>

در صورت وجود مشکل یا سوال میتوانید به مستندات توئیتر مراجعه کنید.
یا به منبع این مقاله مراجعه کنید.