سپنتا پویا — طراح محصول

جدولی از چهار نیت جست‌وجو. در راست نیت، در وسط یک نمونهٔ پرسش در کادر گرد، و در چپ صفحه‌ای که جواب می‌دهد، با پیکان صورتی از پرسش به صفحه: اطلاعاتی با پمپ حرارتی چطور کار می‌کند به مقالهٔ راهنما، ناوبری با ورود به حساب بانک به صفحهٔ ورود، تجاری با بهترین ابزار مدیریت پروژه به مقایسه و نقد که صورتی است، و تراکنشی با خرید هدفون بی‌سیم به صفحهٔ کالا و خرید
منبع: بنیاد طراحی تعامل (IxDF) · بازنویسی آزاد: سپنتا پویا با کمک هوش مصنوعی · مهر ۱۴۰۵ · زمان مطالعه: حدود ۸ دقیقه

سئو (Search Engine Optimization) و تجربهٔ کاربری چیست؟

💡 این متن «بازنویسی آزاد» است: ایده‌ها و مفاهیم مطلب اصلی با نگارش کاملاً مستقل فارسی و مثال‌های تازه بازگو شده‌اند و ترجمهٔ کلمه‌به‌کلمه نیست. بخش‌های افزودهٔ مترجم در جعبهٔ منبع مشخص شده‌اند. ترجمه و بازنویسی این متن با کمک هوش مصنوعی انجام شده است.

خیلی از طراحان سئو را کار تیم بازاریابی می‌دانند: چیزی دربارهٔ کلیدواژه‌ها، لینک‌ها و ترفندهایی برای بالا آمدن در گوگل. به همین دلیل وقتی کسی در جلسه از سئو حرف می‌زند، طراح معمولاً ساکت می‌ماند.

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

سئو چیست؟

سئو (Search Engine Optimization یا SEO) به تعریف منبع، بهتر کردن یک سایت یا محصول دیجیتال است تا در نتیجه‌های موتور جست‌وجو برجسته‌تر دیده شود. منبع تأکید می‌کند که هدف فقط رتبه نیست. هدف این است که محتوای مرتبط به مخاطب درست برسد و برای همه قابل استفاده باشد.

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

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

ساختار و سرعت

منبع بخش بزرگی را به پایه‌های فنی اختصاص می‌دهد. من آن‌ها را در دو دسته گذاشته‌ام.

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

سرعت. منبع از «تجربهٔ انتظار» حرف می‌زند. گوگل سه سنجه را با نام شاخص‌های حیاتی وب معرفی کرده است. اولی زمان دیده شدن محتوای اصلی است که هدفش زیر دو و نیم ثانیه است. دومی زمان پاسخ صفحه به کار کاربر است که هدفش زیر دویست میلی‌ثانیه است. سومی جابه‌جایی ناگهانی چیدمان هنگام بارگذاری است که باید بسیار کم باشد. سنجهٔ سوم مستقیماً کار طراح است. تصویری که اندازه‌اش از پیش تعیین نشده و بعد از بارگذاری متن را پایین هل می‌دهد، هم کاربر را آزار می‌دهد و هم رتبه را پایین می‌آورد.

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

محتوا برای آدم‌ها

منبع عنوان این بخش را «نوشتن برای آدم‌ها، نه الگوریتم‌ها» گذاشته، و دو ایدهٔ مهم در آن دارد.

پژوهش واژه، پژوهش کاربر است. ابزارهای پژوهش کلیدواژه نشان می‌دهند مردم واقعاً با چه واژه‌هایی جست‌وجو می‌کنند. این واژه‌ها اغلب با زبان داخلی سازمان فرق دارند. منبع مثالی می‌آورد: سازمان از «هماهنگی مراقبت‌های اولیه» حرف می‌زند، ولی مردم «پیدا کردن پزشک خانواده» را جست‌وجو می‌کنند. برای طراح، این یک منبع رایگان داده دربارهٔ مدل ذهنی کاربر است.

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

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

سئو و دسترس‌پذیری

منبع بخشی را به هم‌پوشانی سئو و دسترس‌پذیری اختصاص داده. نمودار زیر این هم‌پوشانی را نشان می‌دهد.

دو دایرهٔ هم‌پوشان: دایرهٔ صورتی فقط دسترس‌پذیری در چپ با تضاد رنگ، کار با صفحه‌کلید، کنترل پویانمایی و اندازهٔ هدف لمسی؛ دایرهٔ تیرهٔ فقط سئو در راست با پیوند از سایت‌های دیگر، توضیح متا و پژوهش واژه؛ و ناحیهٔ مشترک هر دو با HTML معنادار، سلسله‌مراتب سرتیتر، متن جایگزین تصویر، عنوان یکتای صفحه، زیرنویس و متن ویدئو، و زبان صفحه
نمودار از سپنتا پویا برای این ترجمه (sepantapouya.com)

ناحیهٔ مشترک بزرگ است: HTML معنادار، سلسله‌مراتب سرتیتر، متن جایگزین تصویر، عنوان یکتا و توصیفی، زیرنویس و متن نوشتاری ویدئو، و اعلام درست زبان صفحه. هر کاری که صفحه را برای موتور جست‌وجو خوانا می‌کند، معمولاً آن را برای صفحه‌خوان هم خوانا می‌کند.

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

منبع به زمینهٔ قانونی هم اشاره می‌کند. شکایت‌های مربوط به دسترس‌پذیری وب در چند کشور به‌سرعت زیاد شده‌اند. قانون دسترس‌پذیری اروپا هم از سال ۲۰۲۵ اجرایی شده است. رهنمودهای دسترس‌پذیری محتوای وب، معروف به WCAG، معیار پذیرفته‌شده است.

وقتی جواب در خود صفحهٔ جست‌وجو است

این بخش افزودهٔ من است. منبع موتور جست‌وجو را فهرستی از پیوندها می‌بیند. ولی شکل جست‌وجو در چند سال اخیر عوض شده است.

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

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

نقش طراح

منبع در پایان نقش طراح را روشن می‌کند. طراح تجربهٔ کاربری با ساختار ناوبری، سلسله‌مراتب محتوا، شیوهٔ کار با تصویر، سرعت و طراحی موبایل‌اول، مستقیماً روی سئو اثر می‌گذارد. منبع برای این هم‌گرایی نام «بهینه‌سازی تجربهٔ جست‌وجو» را می‌آورد.

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

در بافت فارسی

سئو در فارسی چند دردسر مخصوص به خودش دارد.

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

یک: نیم‌فاصله و «ی» عربی، واژه را دوتا می‌کنند. «طراحی‌ها» با نیم‌فاصله، «طراحیها» بی‌فاصله و «طراحی ها» با فاصله، برای یک موتور جست‌وجو ممکن است سه چیز متفاوت باشند. «ی» و «ک» عربی هم همین‌طور. در متن، عنوان و نشانی صفحه یک شکل را پیوسته به کار ببرید.

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

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

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

پنج: طول عنوان فارسی را روی نتیجهٔ واقعی ببینید. توصیهٔ پنجاه تا شصت نویسه برای حروف لاتین نوشته شده. حروف فارسی پهنای متفاوتی دارند و موتور جست‌وجو عنوان را بر اساس پهنا می‌بُرد، نه تعداد نویسه. عنوان را در پیش‌نمایش واقعی نتیجه ببینید.

جمع‌بندی

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

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

اگر بخواهم یک پرسش بگذارم: اگر همهٔ سبک‌ها را از صفحهٔ اصلی محصولتان بردارید، سرتیترها هنوز ساختار صفحه را می‌گویند؟

منبع

این نوشته «بازنویسی آزاد» است از موضوع What is Search Engine Optimization (SEO)? منتشرشده در وب‌سایت بنیاد طراحی تعامل (Interaction Design Foundation — IxDF؛ بدون نام نویسندهٔ مشخص). مفاهیم پایهٔ برگرفته از این منبع — تعریف سئو و هدف رسیدن محتوای مرتبط به مخاطب درست، مراحل خزیدن و نمایه و رتبه‌بندی، کلاه سفید و کلاه سیاه، HTML معنادار، سلسله‌مراتب سرتیتر، عنوان و توضیح متا و طول پیشنهادی‌شان، متن جایگزین، شاخص‌های حیاتی وب، پژوهش واژه به‌عنوان پژوهش کاربر و مثال پزشک خانواده، چهار نیت جست‌وجو، قاعده‌های خوانایی و انباشت کلیدواژه، هم‌پوشانی سئو و دسترس‌پذیری و کارهای فقط‌دسترس‌پذیری، زمینهٔ قانونی، و نقش طراح و بهینه‌سازی تجربهٔ جست‌وجو — از این منبع گرفته شده، اما متن فارسی و توضیح‌ها کاملاً مستقل نوشته شده‌اند.

متن مقالهٔ اصلی تحت هیچ لایسنس بازی منتشر نشده است؛ به همین دلیل اینجا ترجمهٔ کلمه‌به‌کلمه ارائه نشده و متن کامل انگلیسی (به‌همراه همهٔ تصاویر) در لینک زیر در دسترس است.

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

تصاویر: صفحهٔ منبع لایسنس تصاویرش را به‌صورت جدا ذکر نکرده است؛ هیچ‌کدام اینجا بازتولید نشده‌اند. هر سه نمودار این صفحه طراحی اختصاصی مترجم است.

مشاهدهٔ مقالهٔ اصلی
سپنتا پویا

مترجم: سپنتا پویا

طراح ارشد محصول. مقالات تخصصی UI/UX را با حفظ ساختار و لحن نسخهٔ اصلی و با کمک هوش مصنوعی به فارسی برمی‌گردانم.

دربارهٔ من

در این مقاله

  • - سئو چیست؟
  • - ساختار و سرعت
  • - محتوا برای آدم‌ها
  • - سئو و دسترس‌پذیری
  • - وقتی جواب در خود صفحهٔ جست‌وجو است
  • - نقش طراح
  • - در بافت فارسی
  • - جمع‌بندی

برچسب‌ها

  • سئو
  • دسترس‌پذیری
  • محتوا
  • ترجمه