فرانت اند دولوپر :)
ایجاد پیش نمایش لینک در شبکه های مجازی
خیلی برام پیش اومده که میخواستم لینک یه پروژه ای که قبلا کار کردم یا در حال توسعه هستم رو برای یه نفر توی تلگرام یا واتساپ یا جاهای دیگه ارسال کنم اما وقتی لینک رو میفرستم اصلا ظاهر جالب و قشنگی نداره.
و حتی بعضی وقتا شده که بین چت هامون گم شده و طرف میگه من لینکو پیدا نمی کنم دوباره بفرست.
حتما شما هم دیدید که بعضی لینک ها پیش نمایش جالبی داره که همین پیش نمایش باعث جذب مخاطب میشه مثل تصویر پایین.
پیش نمایش لینک معمولاً شامل یک تصویر ، عنوان ، توضیحات و نام دامنه است. همه این اطلاعات توسط شما قابل تنظیم است!
پروتکل Open Graph
این قطعه کد بخشی از پروتکل Open Graph است که توسط Facebook ایجاد شده.
این متا تگ ها نحوه نمایش لینک ها هنگام اشتراک گذاری در شبکه های اجتماعی را کنترل می کنن.
برای شروع ایجاد پیش نمایش لینک، باید متا تگ های Open Graph را در قسمت <head> کد HTML وب سایت خودمون اضافه کنیم.
متادیتاهای اجباری
چهار property برای پیادهسازی و تنظیم پیشنمایش لینک اجباری هستند:
1: تگ og:title
این همان متا تگ <title> هست که در تگ <head> صفحه هم هست. اگر متا تگ og: title پیدا نشود ، به جای آن به صورت پیش فرض از متا تگ <title> استفاده می شود که مثل کد پایین نوشته می شود.
<meta property="og:title" content="اینجا عنوان نوشته می شود" />
2: تگ og:type
این تگ نوع محتوای موجود در صفحه را مشخص می کنه که برای دیدن انواعی که میتونید استفاده کنید می تونید به اینجا مراجعه کنید ، سایت های فاقد این متا تگ به عنوان website شناخته می شن.
<meta property="og:type" content="website" />
3: تگ og:url
که آدرس صفحهی وبسایت می باشد و باید توجه داشته باشید که مقدار آن حتما absolute URL باشد:
<meta property="og:url" content="https://آدرس وب.com" />
4: تگog:image
تصویری که در پیش نمایش لینک نمایش داده می شود. این تصویر مانند بنر تبلیغاتی هست که باید محتوای صفحه را ارائه بدهد پس در انتخاب این تصویر خوب دقت کنید.
<meta property="og:image" content="https://آدرس عکس.jpeg" />
به نظر می رسد که این مقدار هم فقط با absolute URL کار می کند.
پیشنهاد می شود که وضوح عکس 1200 در 627 پیکسل و نسبت ابعاد 1 به 1.91 باشد و همچنین حجم عکس هم بیشتر از 5 مگابایت نباشد.
متادیتاهای اختیاری
1: تگ og:description
به اندازه یک یا دو جمله برای توضیح عملکرد وبسایتمون به این تگ اضافه می کنیم.
<meta property="og:description" content="توضیحات برای وب سایت" />
2: تگ og:site_name
اگر این صفحه وب سایت ما بخشی از یک وبسایت اصلی باشد این بخش را اضافه می کنیم و نام اصلی وب سایت را قرار میدیم
<meta property="og:site_name" content="نام وب سایت" />
متادیتاهای مخصوص توئیتر
1: تگ twitter:card
این متادیتا نوع نمایش کارت را در توئیتر مشخص میکند. چنانچه type , title و description در صفحه موجود باشد توئیتر به صورت پیش فرض نوع summary card را برا پیش نمایش لینک شما انتخاب خواهد کرد.
<meta name="twitter:card" content="summary_large_image" />
2: تگ twitter:site
در این متادیتا آدرس صفحه توئیتر مربوط به وبسایت خود را قرار دهید.
<meta name="twitter:site" content="@gajino">
3: تگ twitter:creator
در این متادیتا نام سازنده این صفحه قرار میگیرد.
<meta name="twitter:creator" content="@rezahashemi">
در صورت وجود مشکل یا سوال میتوانید به مستندات توئیتر مراجعه کنید.
یا به منبع این مقاله مراجعه کنید.
مطلبی دیگر از این انتشارات
بهترین منبع یادگیری جاوااسکریپت
مطلبی دیگر از این انتشارات
چگونگی Data Fetching (واکشی دادها) در Nextjs
مطلبی دیگر از این انتشارات
رفع مشکل صفحه سیاه در vsCode