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

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

تصویر شاخص خوب چه ویژگی‌هایی دارد؟#

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

ویژگیچرا مهم است
خوانایی در اندازه‌ی کوچکدر فهرست مقاله‌ها و موبایل، تصویر چند برابر کوچک‌تر دیده می‌شود
ربط به موضوعتصویر بی‌ربط اعتماد خواننده را کم می‌کند
یکدستی با بقیه‌ی سایتفهرست مقاله‌ها باید شبیه یک مجموعه باشد، نه کلاژ
عنوان بی‌غلطیک غلط املایی در بزرگ‌ترین متن صفحه دیده می‌شود
حجم کمتصویر سنگین سرعت همه‌ی صفحه‌هایی را که آن را نشان می‌دهند پایین می‌آورد

چرا عنوان را خود مدل روی تصویر ننویسد؟#

چون مدل‌های تصویرساز متن فارسی را قابل‌اعتماد نمی‌نویسند؛ پس تصویر را از مدل بگیرید و عنوان را خودتان با فونت سایت اضافه کنید. دلیل فنی‌اش را در ساخت تصویر با هوش مصنوعی: پرامپت، سبک و متن فارسی توضیح داده‌ایم. کل جریان این شکل است:

جریان ساخت تصویر شاخص از عنوان مقاله تا پرامپت با سبک ثابت، تصویر بی‌متن، قالب عنوان با فونت سایت و خروجی WebP

قدم ۱: قالب پرامپت ثابت چطور ساخته می‌شود؟#

قالب پرامپت ثابت متنی است که سبک، رنگ و ترکیب‌بندی در آن یک بار نوشته می‌شود و برای هر مقاله فقط جای موضوع پر می‌شود. این قالب ضامن یکدستی است:

پرامپت
تصویرسازی تخت و آرام با پالت محدود: سرمه‌ای، کرم و یک رنگ تأکیدی نارنجی.
خط‌های تمیز، بدون بافت شلوغ، نور نرم.
موضوع: [صحنه‌ی مخصوص این مقاله]
ترکیب‌بندی: سوژه در نیمه‌ی چپ کادر؛ نیمه‌ی راست ساده و خلوت برای عنوان.
نسبت ابعاد افقی.
بدون هیچ متن، حرف، عدد، لوگو یا چهره‌ی واقعی.

دو نکته در این قالب مهم است. اول، جای خالی سمت راست؛ عنوان فارسی از راست شروع می‌شود و پس‌زمینه‌ی خلوت آن را خوانا نگه می‌دارد. دوم، جمله‌ی آخر؛ بدون آن، مدل گاهی حروف نامفهوم در گوشه‌ها می‌گذارد.

قدم ۲: از عنوان مقاله چطور به صحنه‌ی تصویر برسیم؟#

از یک دستیار متنی بخواهید برای موضوع مقاله چند استعاره‌ی تصویری ساده پیشنهاد کند و یکی را انتخاب کنید. تصویر شاخص قرار نیست همه‌ی مقاله را بگوید؛ یک ایده‌ی دیدنی کافی است.

پرامپت
عنوان مقاله: «[عنوان]»
سه ایده‌ی تصویری ساده برای تصویر شاخص این مقاله پیشنهاد کن.
هر ایده در یک جمله، فقط با اشیا و صحنه، بدون متن و بدون آدم.
از نمادهای تکراری مثل مغز نورانی یا ربات انسان‌نما دوری کن.

خط آخر بیشترین اثر را دارد. بدون آن، نیمی از تصویرهای موضوع‌های هوش مصنوعی یک مغز آبی درخشان می‌شوند. ایده‌ی انتخابی را در جای «موضوع» قالب قدم اول بگذارید، چند نتیجه بگیرید و خودتان بهترین را انتخاب کنید.

قدم ۳: عنوان فارسی را چطور روی تصویر بگذاریم؟#

یک قالب HTML ثابت بسازید که تصویر را پس‌زمینه قرار می‌دهد و عنوان را با فونت سایت رویش می‌نویسد، بعد از آن صفحه عکس بگیرید. این قالب یک بار ساخته می‌شود و برای همه‌ی مقاله‌ها کار می‌کند. چیزهایی که باید داشته باشد:

  • ابعاد ثابت، دقیقاً برابر تصویر نهایی
  • تصویر مدل به‌عنوان پس‌زمینه
  • عنوان در نیمه‌ی راست، با فونت خود سایت، حداکثر در سه خط
  • کوچک‌شدن خودکار اندازه‌ی قلم برای عنوان‌های بلند
  • یک لایه‌ی نیمه‌شفاف پشت عنوان تا روی هر تصویری خوانا بماند

برای گرفتن خروجی، یک مرورگر بی‌رابط کافی است. این اسکریپت Node با Playwright عنوان و نام تصویر را می‌گیرد، جای {{TITLE}} و {{BG}} را در قالب پر می‌کند و از صفحه عکس می‌گیرد:

JavaScript
import { chromium } from 'playwright';
import { readFileSync, writeFileSync } from 'node:fs';
import { resolve } from 'node:path';
import { pathToFileURL } from 'node:url';

const [title, bg, out = 'cover.png'] = process.argv.slice(2);
const esc = (s) => s.replace(/[&<>"]/g, (c) => ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', '"': '&quot;' }[c]));

const html = readFileSync('cover-template.html', 'utf8')
  .replace('{{TITLE}}', esc(title))
  .replace('{{BG}}', esc(bg));
writeFileSync('cover-filled.html', html);

const browser = await chromium.launch();
const page = await browser.newPage({ viewport: { width: 1200, height: 675 } });
await page.goto(pathToFileURL(resolve('cover-filled.html')).href);
await page.evaluate(async () => { await document.fonts.ready; });
await page.screenshot({ path: out });
await browser.close();

ابعاد viewport را با اندازه‌ی تصویر شاخص قالب خودتان عوض کنید. خط document.fonts.ready مهم است: بدون آن، ممکن است عکس پیش از بارگذاری فونت گرفته شود و عنوان با فونت پیش‌فرض دربیاید. اگر با کد راحت نیستید، همین کار را در هر ابزار طراحی با یک قالب ذخیره‌شده هم می‌شود انجام داد.

قدم ۴: خروجی را چطور سبک کنیم؟#

تصویر را به WebP تبدیل کنید و کیفیت را تا جایی پایین بیاورید که افت دیده نشود. با ابزار خط فرمان cwebp:

Bash
npm install playwright
npx playwright install chromium
node cover.mjs "عنوان مقاله" bg.png cover.png
cwebp -q 80 cover.png -o cover.webp

عدد کیفیت را با چشم خودتان تنظیم کنید؛ برای تصویرسازی تخت معمولاً می‌شود پایین‌تر رفت. اگر تبدیل را روی سرور و با PHP انجام می‌دهید، پردازش تصویر با GD را ببینید. اثر حجم تصویر بر سرعت کل سایت را هم در افزایش سرعت وردپرس گفته‌ایم.

اشتباه‌های رایج کدام‌اند؟#

رایج‌ترین اشتباه‌ها از شتاب می‌آیند، نه از ابزار:

  • عنوان خیلی بلند روی تصویر: اگر عنوان مقاله طولانی است، نسخه‌ی کوتاه‌شده‌اش را روی تصویر بگذارید.
  • بی‌توجهی به برش: بعضی قالب‌ها و شبکه‌های اجتماعی گوشه‌های تصویر را می‌برند؛ عنوان را از لبه‌ها دور نگه دارید.
  • تغییر سبک در هر مقاله: نتیجه‌اش فهرست مقاله‌هایی است که به هم نمی‌آیند.
  • بدون متن جایگزین: alt تصویر شاخص را خالی نگذارید؛ یک جمله‌ی توصیفی کافی است.
  • انتشار بدون نگاه در اندازه‌ی کوچک: تصویر را یک بار در اندازه‌ی کارت فهرست ببینید.

تصویر شاخص به کجا می‌رود؟#

جهت روشن است: خودکارتر، چنداندازه‌ای و با برچسب منشأ. سیستم‌های مدیریت محتوا کم‌کم ساخت تصویر را به خود جریان انتشار می‌آورند، یک مقاله برای هر جا (فهرست سایت، پیش‌نمایش لینک، شبکه‌ی اجتماعی) نسخه‌ی جدا می‌خواهد، و نشان‌دادن اینکه تصویر با هوش مصنوعی ساخته شده رایج‌تر می‌شود.

برای آماده‌شدن، سه چیز را از ابزار جدا نگه دارید: برگه‌ی سبک (رنگ‌ها، نوع تصویرسازی، ترکیب‌بندی)، قالب عنوان با پارامترهای عنوان و تصویر، و قدم انتخاب انسانی. ابزار تصویرساز عوض می‌شود؛ این سه، هویت بصری سایت شما را نگه می‌دارند. برای هر تصویر هم پرامپت و منبع را ثبت کنید؛ درباره‌ی چرایی‌اش در حق نشر و استفاده‌ی تجاری از تصاویر هوش مصنوعی نوشته‌ایم.

خلاصه#

  • تصویر را از مدل بخواهید، عنوان را هرگز.
  • یک قالب پرامپت ثابت با جای خالی سمت راست بسازید و فقط موضوع را عوض کنید.
  • عنوان را با فونت سایت در یک قالب ثابت روی تصویر بگذارید و صبر کنید فونت بارگذاری شود.
  • خروجی را WebP و در اندازه‌ی نمایش ذخیره کنید.
  • برگه‌ی سبک، قالب عنوان و انتخاب انسانی را مستقل از ابزار نگه دارید.