تگ‌های Open Graph: چطور پیش‌نمایش لینک‌ها را کنترل کنیم

لینکی را در یک گفت‌وگو یا پست بچسبانید؛ لحظه‌ای بعد کارتی با یک تصویر، یک تیتر و یک خط متن ظاهر می‌شود. این کارت از روی حدس و گمان ساخته نمی‌شود: از تگ‌های Open Graph ساخته می‌شود، یعنی چند عنصر meta در بخش <head> صفحه. صفحه‌هایی که این تگ‌ها را ندارند، هر چیزی نشان می‌دهند که شبکهٔ اجتماعی بتواند از صفحه بیرون بکشد، و این اغلب لوگو، بنر کوکی یا اصلاً هیچ تصویری نیست. این راهنما تگ‌های مهم، قواعد تصویر و راه درست کردن پیش‌نمایشی را که به‌روز نمی‌شود توضیح می‌دهد.

Open Graph چیست؟

Open Graph مجموعهٔ کوچکی از قراردادهاست که فیسبوک در سال ۲۰۱۰ معرفی کرد تا هر صفحهٔ وب بتواند هنگام اشتراک‌گذاری خودش را معرفی کند. این قراردادها خیلی فراتر از فیسبوک جا افتادند: لینکدین، واتساپ، تلگرام، اسلک، دیسکورد، Microsoft Teams و بسیاری دیگر همین تگ‌ها را می‌خوانند. X هم آن‌ها را می‌خواند، البته در کنار تگ‌های twitter: خودش. پس با یک بار نوشتن این تگ‌ها، تقریباً همهٔ جاهایی که لینک در آن‌ها به اشتراک گذاشته می‌شود پوشش داده می‌شوند.

تگ‌ها این شکلی‌اند:

<meta property="og:type" content="article">
<meta property="og:title" content="How to Make Cold Brew at Home">
<meta property="og:description" content="The grind, the ratio and the steeping time.">
<meta property="og:url" content="https://example.com/cold-brew">
<meta property="og:image" content="https://example.com/images/cold-brew.jpg">
<meta property="og:site_name" content="The Coffee Blog">

تگ‌هایی که اهمیت دارند

توجه کنید که Open Graph از property استفاده می‌کند، نه name. بیشتر پلتفرم‌ها هر دو را می‌پذیرند، اما مشخصات رسمی property را تعیین کرده است.

تصویر: اندازه و قالب

تصویر اولین چیزی است که به چشم می‌آید، و بیشتر پیش‌نمایش‌ها هم دقیقاً همین‌جا خراب می‌شوند.

• اندازه: ابعاد 1200 × 630 پیکسل، یعنی نسبت 1.91 به 1، همه‌جا کار می‌کند. تصویرهای کوچک‌تر از 600 × 315 ممکن است به‌صورت یک تصویر بندانگشتی کوچک نمایش داده شوند یا اصلاً نمایش داده نشوند.
• قالب: JPG یا PNG بی‌خطرند. WebP را بیشتر پلتفرم‌ها می‌پذیرند، اما نه همه؛ GIF به‌صورت تصویر ثابت نمایش داده می‌شود.
• حجم فایل: آن را خیلی کمتر از چند مگابایت نگه دارید. برخی اپ‌ها، به‌خصوص واتساپ، تصویرهای سنگین را نادیده می‌گیرند.
• نشانی: یک نشانی مطلق با https:// که هر کسی بتواند بازش کند. مسیرهای نسبی، تصویرهایی که پشت صفحهٔ ورود هستند و نشانی‌هایی که با robots.txt مسدود شده‌اند کار نمی‌کنند.
• محدودهٔ امن: متن و چهره‌ها را از لبه‌ها دور نگه دارید، چون برخی اپ‌ها تصویر را به شکل مربع یا نواری باریک‌تر برش می‌دهند.

مبدل تصویر بدون آپلود، تصویر را به این ابعاد تغییر اندازه می‌دهد و فشرده می‌کند.

کارت‌های X (توییتر)

X برای عنوان، توضیح و تصویر تگ‌های Open Graph را می‌خواند، اما یک تصمیم تگ مخصوص خودش را لازم دارد: twitter:card. با مقدار summary_large_image تصویر پهن و بالای متن نمایش داده می‌شود؛ با summary مربع کوچکی کنار متن است. بدون این تگ، ممکن است لینک فقط به‌صورت یک URL ساده دیده شود. با twitter:site هم می‌توانید حساب کاربری پشت سایت را معرفی کنید. ساخت Twitter Card هر دو مجموعه تگ را با هم می‌نویسد.

Open Graph و موتورهای جست‌وجو

موتورهای جست‌وجو صفحه‌ها را بر اساس تگ‌های Open Graph رتبه‌بندی نمی‌کنند؛ آنچه نتیجهٔ جست‌وجو را شکل می‌دهد عنصر <title> و متا دیسکریپشن است. این دو مجموعه اغلب متن مشابهی دارند، اما برای دو گروه خواننده نوشته می‌شوند: عنوان جست‌وجو باید کلمه‌هایی را داشته باشد که مردم جست‌وجو می‌کنند، در حالی که عنوان اشتراک‌گذاری را می‌شود برای کسی نوشت که در حال ورق زدن فید است. پیش‌نمایش نتیجهٔ گوگل نشان می‌دهد نسخهٔ جست‌وجو چه شکلی است.

چرا پیش‌نمایش اشتباه است یا نمایش داده نمی‌شود؟

نکتهٔ جاوااسکریپت گریبان بسیاری از اپ‌های تک‌صفحه‌ای (SPA) را می‌گیرد: اگر تگ‌ها فقط بعد از اجرای اسکریپت‌ها ظاهر شوند، خزنده‌های شبکه‌های اجتماعی هرگز آن‌ها را نمی‌بینند. تگ‌ها را سمت سرور رندر کنید، یا صفحه‌هایی را که بیشتر از همه به اشتراک گذاشته می‌شوند از قبل رندر کنید.

نوشتن تگ‌ها

ساخت متا تگ تگ‌های جست‌وجو، تگ‌های Open Graph و تگ‌های X را از یک فرم کوتاه می‌نویسد و پیش‌نمایش گوگل، فیسبوک و X را هم‌زمان با تایپ شما به‌روز می‌کند. این ابزار می‌تواند تگ‌های یک صفحهٔ موجود را هم از HTML آن بخواند، که سریع‌ترین راه بررسی صفحه‌ای است که از قبل دارید. ساخت تگ Open Graph همین ابزار را با تمرکز بر پیش‌نمایش شبکه‌های اجتماعی باز می‌کند.