„SEO е работа на маркетинг отдела.“

Да, ама не съвсем. Повечето клиенти нямат SEO екип, нямат познания, и често един редизайн на бизнеса може да навреди много повече, отколкото да помогне.

Ако правиш уеб сайтове – дори и само визуално – влияеш пряко на това дали сайтът ще бъде открит, разчетен и класиран от търсачки. Не е нужно да си SEO специалист, но има основи, които е добре да владееш.

Тук събирам 8 неща, които са полезни за всеки дизайнер – особено ако искаш да добавиш стойност към проекта и да не създаваш пречки за SEO оптимизацията.

1. Заглавията (H1, H2, H3…) не са просто стилистични елементи

Използвай ги за логическа структура, не за визия. H1 = основно заглавие на страницата (и само едно). Подзаглавията трябва да са в логична йерархия. Например, заглавията на всяка секция може да са H2. Изброените колони/елементи в нея - H3, и така нататък.

Ако ползваш H2 заради размера на текста, а не заради значението – това бърка структурата. Моето предложение е да стилизираш по подразбиране заглавията, но също така да си направиш клас за всеки един стил. По този начин, ако искаш например основното ти заглавие да е по-малко на някоя от страниците, можеш да използваш H1 с размер и стил на H2.

2. Текстовете трябва да са четими от търсачки

Вграден текст в изображения? Лоша идея. Текст в SVG без тагове? Също.
Използвай реален текст за заглавия, описания и навигация – така Google (и други) могат да го разчетат.

3. Alt текстовете не са просто за достъпност

Те помагат на SEO, като описват съдържанието на изображението. Ако качваш изображения в CMS или Webflow – винаги добавяй описателен, смислен alt текст. Знам, че е много работа, и затова често остава последно в списъка, но за добрата SEO оптимизация това е черешката на тортата.

Bonus tip: Може да използваш ChatGPT, за да си генерираш добри alt текстове.

4. Структурата на страницата има значение

Понякога дизайнерите забравят за основните принципи на уеб дизайна и решават, че ще направят нещо много иновативно и изтрещяло. Това може да е ОК за портфолио сайт, за впечатляваща лендинг страница или кампания, но не и за сайт, който трябва да е устойчив във времето.

• Ясна йерархия: header, main, footer

• Логичен flow: от заглавие към съдържание към CTA

• Mobile-first мислене: Google индексира мобилната версия първо

5. Скоростта също е дизайн решение

Тежки изображения, видеа, сложни анимации – всичко това влияе на скоростта на зареждане. А това е голям фактор за SEO.

• Оразмери изображенията в правилния размер. Ако са много, може да използваш Actions във Photoshop и Batch Automation, за да го направиш по-бързо. Например, за фонови снимки може да ползваш 1920px ширина, а за галериите - 1280px.

• Компресирай изображенията за web. Може да го направиш и директно във Photoshop. JPG на около 80% обикновено е добър баланс между качество и компресия. За изображения с по-малко цветове и прозрачен фон експортвай в PNG формат.

• Използвай WebP или Avif формат. Това ще ги направи още по-малки и ще зареждат с над 50% по-бързо. Имай предвид само, че някои по-стари устройства не поддържат Avif (напр. iPhone X и по-стари), затова освен ако нямаш бекъп зареждане на JPG при тях, препоръчваме WebP.

• Тествай сайта и провери какво се зарежда на първи екран. Може да го направиш в Google PageSpeed или директно в Inspect Mode в браузъра. Активирай или интегрирай lazy loading на изображенията - да зареждат щом скролнеш до тях.

6. Линковете също са част от дизайна

Навигация, internal linking, CTA бутони – това са ключови елементи за SEO.
Увери се, че са видими, интуитивни и с подходящ текст (не само „тук“ или „повече“).

Всички обичаме кратко микрокопи и понякога това боли, но бутон "научи повече за хотела" работи по-добре от "научи повече". Може да направиш компромиси, ако има повече контекст около бутона, но генерално линковете, които водят към дадената страница, са също толкова важни за SEO колкото и съдържанието на самата страница.

7. URL структурата влияе на резултатите

Не е нужно ти да я пишеш – но вероятно ще се наложи. Планирай добре имената на всяка страница.

• URL адресите трябва да са кратки, смислени и описателни

• Не включвай специални символи (запетаи, точки, доларчета и тн.) или автоматични генерирани имена (напр. /page-2982)

• Не ползвай кирилица в адреса, защото не се поддържа и ще се превърне в нечетими йероглифи. Ако желаеш адресите да са на български, може да ги напишеш с латинските букви (напр. /za-nas)

• Използвай тирета вместо отстояния, а не долни черти

8. Design-to-dev комуникацията е ключова

Дори да не отговаряш за SEO, твоят файл трябва да е структуриран така, че dev екипът да не пропусне важни неща:

• Заглавия с тагове, не само визуални стилове

• Коментари за интеракции и поведение на елементи

• Ясни имена на секции и компоненти

Научи основите на HTML и CSS структурата, SEO оптимизацията и помогни на програмистите да направят сайта качествено. Често работата се претупва накрая (особено при работа с подизпълнители или външни фирми), което се отразява на финалния резултат. Всички искаме добри сайтове в портфолиото, затова е в твой интерес да следиш както дизайн процеса, така и правилната имплементация.

Заключение

Когато дизайнът и SEO-то играят в един отбор – сайтът печели по-добра видимост, по-добро изживяване и по-добри резултати за бизнеса.