در دنیای وب، اشتراک‌گذاری صفحات در شبکه‌های اجتماعی و پلتفرم‌های مختلف نقش مهمی دارد. برای اینکه صفحات شما در هنگام به اشتراک‌گذاری به خوبی به نمایش درآیند، استفاده از تصاویر مناسب و متا تگ‌ها حیاتی است. برای توسعه‌دهندگان Next.js، اپ رائوتر به همراه تگ‌های opengraph و توییتر نقش بسیار مهمی در بهینه‌سازی نحوه نمایش این صفحات دارند.
در Next.js، نمونه‌هایی از اینکه چگونه می‌توان اپ رائوتر را با فایل‌های ویژه مانند opengraph-image و twitter-image ترکیب کرد وجود دارد که کمک می‌کند تا به راحتی تصاویر مناسب برای به اشتراک‌گذاری در شبکه‌های اجتماعی را تنظیم کنید. این تصاویر به کاربران اجازه می‌دهند تا پیش‌نمایشی از محتوا را بدون نیاز به باز کردن مستقیم صفحه مشاهده کنند. این قابلیت‌ها به خصوص برای کسب‌وکارها و وبلاگ‌ها که به اشتراک‌گذاری گسترده محتوا اهمیت می‌دهند، بسیار مفید هستند.
با اپ رائوتر، شما می‌توانید به راحتی برای هر صفحه یا مسیر دلخواه متا تگ‌هایی مانند opengraph-image و twitter-image را تنظیم کنید. این کار باعث می‌شود تا تصاویر و توضیحات مناسب به‌طور خودکار نمایش داده شوند. این فرآیند در Next.js بسیار ساده و کاربر پسند است و امکان سفارشی‌سازی کامل برای توسعه‌دهندگان را فراهم می‌کند.
برخی از پارامترهای opengraph مانند og:image و og:description هستند که به شما امکان می‌دهند تا جزئیات بیشتری را برای یک صفحه تعریف کنید. به طور مشابه، شما می‌توانید twitter:image را برای تصویری که می‌خواهید در توییتر به نمایش درآید استفاده کنید. Next.js با فراهم آوردن این امکانات، شما را قادر می‌سازد تا صفحات خود را به بهترین شکل ممکن برای شبکه‌های اجتماعی بهینه‌سازی کنید.
نمونه کد برای استفاده از تصاویر Opengraph و Twitter
{
"images": {
"og": "/static/opengraph-image.jpg",
"twitter": "/static/twitter-image.jpg"
}
}این کد از یک ساختار JSON استفاده می‌کند:
"images": نام کلید برای گروه تصاویر است.
"og": "/static/opengraph-image.jpg" مکان یا آدرس تصویر برای opengraph است.
"twitter": "/static/twitter-image.jpg" مکان یا آدرس تصویر برای نمایش در توییتر است.
این آدرس‌ها معمولاً به تصاویر static در مسیر پروژه اشاره دارند که بر اساس نیاز می‌توانید تغییر دهید.