آموزش ایجاد پیش‌نمایش لینک‌ (Link Preview)

آموزش ایجاد پیش‌نمایش لینک‌ (link preview)

در این مقاله قصد داریم تا به شما نحوه‌ی ایجاد پیش‌نمایش لینک یا همان Link Preview را آموزش دهیم اما قبل از رفتن به سراغ آموزش باید بدانیم که پیش‌نمایش لینک چیست؟

پیش‌نمایش لینک چیست؟

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

پیش‌نمایش و اعتبارسنجی لینک با استفاده از Twitter card
پیش‌نمایش و اعتبارسنجی لینک با استفاده از Twitter card

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

پروتکل Open Graph

پروتکل open graph

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

متادیتاهای ضروری

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

  1. og:title شبیه تگ <title> در <head> صفحه‌ی HTML است و ما از آن برای پیش‌نمایش عنوان مطلب استفاده می‌کنیم:
<meta property="og:title" content="عملکرد‌های متفاوت this در زبان JavaScript"/>
  1. og:type نوع محتوای صفحه را مشخص می‌کند و برای اطلاعات بیشتر می‌توانید از این لینک استفاده کنید:
<meta property="og:type" content="article" />

صفحه‌‌هایی که فاقد این متادیتا باشند به‌صورت پیش‌فرض مقدار website برای og:type آن‌ها در نظر گرفته می‌شود.

  1. og:url آدرس صفحه‌ی وب است و توجه داشته باشید که مقدار آن بایستی absolute URL باشد:
<meta property="og:url" content="https://liara.ir/blog/%d8%b9%d9%85%d9%84%da%a9%d8%b1%d8%af%e2%80%8c%d9%87%d8%a7%db%8c-%d9%85%d8%aa%d9%81%d8%a7%d9%88%d8%aa-this-%d8%af%d8%b1-%d8%b2%d8%a8%d8%a7%d9%86-javascript/"/>
  1. og:image تصویری است که در پیش‌نمایش لینک نشان داده می‌شود و تاثیر زیادی در ارائه محتوای صفحه به کاربر دارد بنابراین تصویر مناسبی انتخاب کنید:
<meta property="og:image" content="https://cms.liara.ir/wp-content/uploads/2020/11/this-in-javascript-language.jpg">

همچنین توجه داشته باشید که آدرس تصویر را به‌صورت absolute URL قرار دهید و اندازه‌ی تصویر شما بیش از ۵ مگابایت نباشد.

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

این متادیتاها اختیاری هستند اما بهتر است که برای اطلاعات بیشتر آن‌ها را به صفحه‌ی وب خود اضافه کنید.

  1. از og:description برای توصیف محتوای صفحه در یک یا دو جمله استفاده می‌شود:
<meta property="og:description" content="this یکی از کلمه‌های کلیدی زبان JavaScript است که اگر آن را به‌خوبی درک نکنید، می‌تواند برای شما مشکل‌ساز شود." />
  1. اگر صفحه‌ی وب شما بخشی از یک وبسایت بزرگ‌تر است بایستی نام سایت اصلی را در og:site_name وارد کنید:
<meta property="og:site_name" content="سرویس ابری لیارا" />

متادیتاهای Twitter

  1. با twitter:card مشخص می‌کنیم که پیش‌نمایش لینک ما در Twitter به چه صورت باشد. اگر og:type، og:title و og:description در صفحه‌ی شما تنظیم شده باشند به‌طور پیش‌فرض از نوع summary card برای پیش‌نمایش لینک شما استفاده می‌شود:
<meta name="twitter:card" content="summary_large_image" />
  1. آدرس صفحه‌ی Twitter وبسایت خود را می‌توانید در محتوای twitter:site قرار دهید:
<meta name="twitter:site" content="@liara_cloud">
  1. و در آخر نام کاربری تولید کننده‌ی محتوای آن صفحه‌ی HTML را می‌توانید با استفاده از twitter:creator مشخص کنید:
 <meta name="twitter:creator" content="@userdehghani">

اگر به اطلاعات بیشتری در این زمینه احتیاج داشتید می‌توانید مستندات Twitter Card را مطالعه کنید.

منبع: https://kimberlywan.hashnode.dev/how-to-create-a-link-preview

برچسب‌ها:

خدمات رایگان لیارا

۲.۵ گیگابایت فضای ذخیره‌سازی ابری رایگان

۲.۵ گیگابایت Object Storage سازگار با پروتکل S3 با دیسک‌های SSD به‌صورت رایگان دریافت کنید.

هاست رایگان برای دیتابیس‌

دیتابیس‌های MariaDB، PostgreSQL و Redis را فقط با یک کلیک و به‌صورت رایگان تهیه کنید.

سرویس DNS رایگان

به سادگی دامنه‌تان را اضافه کنید و به صورت رایگان رکورد‌های آن را مدیریت کنید.

۱۰۰ هزار تومان اعتبار اولیه

بعد از ثبت نام در لیارا مبلغ ۱۰۰ هزار تومان اعتبار هدیه دریافت می‌کنید که با توجه به ساعتی بودن هزینه سرویس‌ها، می‌توانید تمامی خدمات پولی را برای چندین هفته رایگان استفاده کنید.

ارسال ۱۰۰ ایمیل تراکنشی رایگان در هر ماه

در سرویس ایمیل لیارا شما می‌توانید تا ۱۰۰ ایمیل رایگان در هر ماه ارسال کنید و فقط برای بیش از آن هزینه پرداخت کنید. (به‌همراه دسترسی SMTP)

هاست رایگان برای انواع وبسایت

تفاوتی ندارد برای وبسایت خود از Node استفاده می‌کنید یا Laravel و Django، در لیارا می‌توانید به صورت کاملا رایگان آن را میزبانی کنید.

توسعه‌دهندگان درباره‌ی ما چه می‌گویند

تجربه کار باliara_cloud@امروز خیلی خوب بود. یکی از سرویس هام رو منتقل کردم روش و راضیم. انقد سریع و جذاب کارم راه افتادم اصن باورم نمیشد! برعکس سرویس های PaaS دیگه با اون همه پیچیدگیشون. دمتون گرم
...

MohammadReza
liara testimonial
keikaavousi

بعد از بسته شدن @fandoghpaas و ناراحتی همه‌مون از اینکه یه سرویس خوب و صادق نمی‌تونه از پس هزینه‌ها بر بیاد، سرویسم رو منتقل کردم به پاس لیارا (https://liara.ir @liara_cloud) . تجربه راحت و خوب. تفاوت‌هایی داشت که کمی کار می‌خواست ولی تا الان کاملا راضی.

jadi
liara testimonial
jadi

یه خسته نباشید باید به تصمیمliara_cloud@بگم،
بعد از چندین روز سرکله زدن با سرویس های مشابه بالاخره تصمیم گرفتم لیارا رو امتحان کنم و باور نمیشه ۱۰ دقیقه بیشتر وقت نبرد،
دمتون گرم.

Arch
liara testimonial
EbadiDev

واسه سرویس PaaS با اختلاف لیارا بهترین رابط کاربری داره و یکی از مزیت‌های سرویس دیتابیس‌شون اینه که خودشون به صورت دوره‌ای بکآپ میگیرن.
...

Ali Najafi
liara testimonial
me_ali_najafi

یکی از کارهای خوبی که جدیداً میکنم اینه که یه دیتابیس روی لیارا میسازم و به پروژه وصل میکنم اینطوری هم خونه و هم محل کار دیتابیس بروز رو دارم و راحت میتونم ادامه بدم کار روliara_cloud@

Navid
liara testimonial
1navid

عاشقliara_cloud@شدم درسته در حد AWS نیست ولی خب تجربه خوبی واسه پروژه های داخل ایران ارائه میده، میتونم رو CD هم اجراش کنم

Amir H Shekari
liara testimonial
vanenshi