Структура на уебсайта как да се направи

Резюме на статията

направи

Структурата на сайта оказва огромно влияние върху SEO. Лошият дизайн създава проблем: загуба на позициониране, неиндексирано съдържание, неразбиране на посетителя ...

Решението е да приемете подходяща структура за вашия сайт възможно най-скоро. Да, но как ... ?

Как да създадем структурата на уебсайт ?

Няма чудо: всеки дизайн на уебсайт трябва да бъде добре обмислен нагоре. Трябва да дефинирате цял куп елементи, касаещи структурата на вашия уебсайт, нуждите на потребителите, техническите проблеми или дори SEO стратегията. Всичко това ще бъде част от спецификациите на уебсайта, документ, който ще служи като работна основа за всички: разработчици, интегратори, графични дизайнери, референти и т.н.

Що се отнася до структурата на съдържанието и вътрешната мрежа, трябва да му бъде посветен раздел от тези спецификации. И ето основните неща, върху които ще трябва да работите:

Обща дървесна структура

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

За кого е вашият сайт, за да отговори на какви нужди, с какви инструменти или какво съдържание ?

Ето няколко ключови точки от структурата на вашия уебсайт:

  • Какъв тип сайт да използвам? Можете да изберете блог, институционален сайт, форум, сайт за електронна търговия, портфолио, ... Всичко зависи от вашия контекст.
  • Как ще отговоря на нуждите на посетителите си? И тук ресурсите са легион: текстово, аудио или видео съдържание, изтегляния, продажба на продукти или услуги, откриване на зона за поддръжка, ...
  • Какво нося повече от конкурентите си ?
  • Как ще категоризирам тези инструменти и ресурси?

Последният въпрос е може би най-трънливият. Първи метод: писалка и бележник. Опитайте да дадете приоритет на информацията си. Ти ще:

  1. избройте цялото съдържание (настоящо или бъдещо) на вашия уебсайт
  2. групирайте ги в категории
  3. ги структурирайте

Нищо като снимка, за да се разбере по-добре:

Проблемът е, че тази структура зависи от вашата гледна точка. За щастие има два начина да завършите и усъвършенствате работата си:

Метод за сортиране на карти и персони

Методът за сортиране на карти включва външна помощ. На листчета хартия ще напишете заглавието на съдържанието си. След това помолете някой да ги групира в еднородни категории или дори да ги преименува, ако е необходимо. Може да се изненадате как ще структурира вашия сайт. За да намалите допуснатата грешка, идеалното е да помолите за помощ от 4-5 души (във вашата цел).

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

Жак е занаятчийски пекар и иска да създаде своя уебсайт. Той иска да знае как да се появи Google. Той не знае нищо за уеб разработката или SEO и има малко време да отдели за това.

И ето още един, който да ви помогне да разберете какво е персона:

Софи е управител на уеб маркетинг за голяма компания и търси съвети и ресурси, за да разбере посетителите си и да подобри позиционирането си. Никога не е била обучавана в инструмент за уеб анализ или SEO, но знае, че това е важно за развитието на нейната компания.

Изображението е взето от сайта QualityStreet, което препоръчвам следната статия, за да разберем по-добре концепцията: персони и роли

HTML и структурата

HTML тагове

Структурата на даден сайт се основава на техническа част. Езикът HTML има всеки път логически таг за структуриране на вашите елементи:

за показване на код

  • Алтернативен маркер за вашите изображения, на който да обясните Google съдържанието на вашите визуални елементи
  • Таговете div и span трябва да се използват само за оформление, а не за приоритизиране (дори ако е свързано).
  • Не добавяйте погрешно или чрез маркерите
    (прекъсване на ред) или (интервали), защото можем да направим същото нещо чисто в CSS.
  • Отвъд HTML кода има няколко точки, за които трябва да внимавате:

    • Ще имате само един CSS файл за оформлението на сайта, един javascript файл за управление на всякакви взаимодействия и един скрипт от инструмент за уеб анализ.
    • Премахнете всичко между тях: Това са „коментари“, които не са полезни за посетителите или търсачките. Дръжте ги само на вашата инсталация за разработка (за да помогнете на разработчиците да разберат по-добре кода на вашия сайт).
    • Окончателното изобразяване на вашия уебсайт трябва да бъде намалено, т.е.компресирано колкото е възможно повече, за да се ускори времето за зареждане
    • Изгонете флаш файлове, които са неразбираеми за Google
    • Файлът sitemap.xml ще даде директен достъп до цялото ви съдържание
    • И обратно, файлът robots.txt ще блокира търсачките, за да не индексира определено нежелано съдържание (ако имате такова)

    Ако сте направили всичко това, ще направите два теста, за да проверите общата структура на сайта и това е направено под Firefox. Инсталирайте разширението Webdevelopper първо, ако още не сте го направили. Първо изключете CSS:

    Първият инструмент дава възможност за реализиране на структурните проблеми. Без това оформление редът и показването на съдържанието трябва да останат разбираеми. Ако това няма смисъл за вас, вашият сайт или страница са лошо проектирани. След този първи тест поискайте да покажете плана на страницата.

    Този план на страницата трябва да спазва следните правила:

    • Трябва да имате самосамо едно заглавие H1, който съдържа няколко Н2, който сам може да съдържа няколко Н3 и т.н.
    • Отвъд H3 заглавните тагове са излишни.
    • Няма задължение да имате H2 или H3 тагове, но е за предпочитане да структурирате страница.
    • H1 таговете трябва да са различни на всяка страница на вашия сайт (така че ще съдържа само името на сайта на началната страница).
    • Те трябва да съдържат ключовите думи, свързани със съдържанието на страницата.
    • Етикетите от H1 до H6 със сигурност не трябва да се поставят в общите части на вашия сайт, като „най-новите статии“, „коментар за тази статия“, „отзиви на клиенти“ или дори „последните коментари“ .