7 Правила HTML для юзабіліті веб-сайтів і SEO

  1. 1. <head>
  2. 2. <title>
  3. 3. <meta name = "description" ...
  4. 4. rel = "канонічний"
  5. 5. <a href = ”..
  6. 6. <link rel = "stylesheet"…
  7. 7. Мікродані
  8. Висновок

Можна сміливо стверджувати, що кожен, хто володіє веб-сайтом, хоче, щоб їхній сайт залучив більше трафіку, оскільки це надає їм кращі можливості для зростання

Можна сміливо стверджувати, що кожен, хто володіє веб-сайтом, хоче, щоб їхній сайт залучив більше трафіку, оскільки це надає їм кращі можливості для зростання. Тут багато хто стверджує, що пошукова оптимізація (SEO) приходить до гри. Але в прагненні завоювати любов, захоплення і користь пошукових систем, люди схильні забувати про важливість зручності веб-сайту як сили, яка також веде якісний трафік.

Оскільки пошукові системи стають більш розумними та більш людськими, як вони ранжують свої результати, оптимізація веб-сайту стає більш вишуканою та надає більше можливість налаштування для поліпшення вашого сайту як для зручності, так і для SEO . Кілька статей у цьому блозі були написані, щоб пояснити, як це можна зробити. Я б порадив переглядати такі статті:

У цій статті я буду використовувати ці міркування, щоб надати вам настанови щодо того, як використовувати теги HTML для поліпшення зручності використання вашого веб-сайту та SEO. Перш ніж я почну, одне невелике слово застереження - рейтинг пошукової системи не залежить від якості вашого коду. Подібним чином, оскільки зручність використання в основному стосується аспекту інтерфейсу користувача вашого веб-сайту, користувачі зможуть побачити результат інтерпретації веб-браузера цього коду, а не сам код. Тому важливо відзначити, що ця стаття не обговорюватиме HTML-кодування або оптимізацію HTML-коду, а саме те, як зміст HTML-коду принесе користь для зручності використання вашого сайту та SEO.

1. <head>

SEO: Це найважливіший розділ всієї HTML-структури вашого сайту з точки зору SEO. Тут ви збираєтеся вставити теги заголовків, мета-опис і навіть код аналітики пошукової системи, швидше за все, отримаєте своє місце тут. Більше того, головний тег містить деякі інші важливі теги, такі як мета-теги, і, звичайно, всі важливі теги rel = ”canonical”. Всі ці питання будуть обговорюватися окремо в пунктах нижче. Однак, зважаючи на його загальну важливість, я відчував, що голова тега повинна сама мати свою точку.

Зручність використання: з точки зору зручності використання, головний тег може здатися важливим, оскільки цей розділ не впливатиме на зовнішній вигляд веб-сайту (за винятком тега заголовка). Однак, оскільки більша частина вмісту головної теги відображатиметься на сторінці результатів пошукової системи (SERP), якщо цей вміст сприймається як брехливий або непрофесійний, він не дозволить користувачам натискати, щоб отримати доступ до вашого сайту. Google та інші пошукові системи використовуватимуть вміст мета-тегів у головному тезі, щоб визначити фрагмент вашого веб-сайту. Таким чином, потрібно зробити його якомога більш чистим і корисним.

2. <title>

SEO: старі добрі часи, коли начинку тега заголовка з випадковими ключовими словами для того, щоб залучити трафік пошукової системи, давно вже пройшли. Пошукові системи показуватимуть вміст вашого тега заголовка як заголовок, який можна натискати, для списків на виданнях. Вони також використовують його для визначення теми веб-сторінки. Це пояснюється тим, що павуки пошукових систем або сканери аналізують вміст назви сторінки, а потім переводять тему сторінки.

Вміст тега заголовка має відображати вміст веб-сторінки. Зберігаючи це просте правило на увазі під час введення ваших ключових слів в ідеалі на початку вашого тега заголовка дасть вам SEO-дружній тег заголовка.

Юзабіліті: Користувачі ідентифікують веб-сайти, які, ймовірно, містять інформацію, яку вони шукають, у списку веб-сайтів на SERP. Оскільки веб-браузери використовують теги заголовків для позначення своїх вкладок, користувачі в кінцевому підсумку читають вміст тегів заголовків, щоб знайти вкладку у своєму веб-переглядачі, який містить сайт, який вони хочуть переглянути.

За промовчанням веб-переглядачі призначають вміст тегів заголовків сайтам із закладками. Таким чином, користувачі також посилаються на вміст тегів заголовків, щоб знаходити веб-сайти, які вони позначили у своєму веб-переглядачі. Сайти соціальних закладок, такі як Facebook, автоматично отримують вміст тегів заголовків, коли користувачі додають посилання для обміну. Таким чином, користувачі зрештою посилаються на зміст тегів заголовків, щоб визначити, чи варто перевіряти веб-сайт, який інші користувачі заклали на веб-сайті соціальних закладок.

Щоб отримати повний набір керівних принципів тега заголовка , зверніться до статті:
15 Посібник з оптимізації тегів назви для зручності та SEO "

3. <meta name = "description" ...

SEO: Пошукові системи отримують вміст, що міститься в тезі meta опису, щоб відобразити його як опис веб-сайту в їх виклику. Оскільки довжина змісту мета опису, що відображається в SERP, залежить від різних пошукових систем, рекомендується не перевищувати 160 символів. Хоча Google не використовує вміст мета-тегів для свого веб-рейтингу , присутність ключових слів у мета-описі все ще може привернути пошуковий трафік, оскільки це приверне увагу користувачів.

Юзабіліті: З точки зору зручності використання, описові, чесні та різні описи кожної сторінки на вашому сайті є обов'язковим. Як було зазначено вище, користувачі будуть бачити зміст мета опису в своїх виданнях. Якщо вони бачать декілька списків з одного сайту з однаковим описом мета, то вони матимуть проблему при ідентифікації посилання, яке буде натиснуто. Крім того, якщо вони отримують доступ до сайту через SERP, оскільки вміст опису є привабливим, але те, що вони вважають, відрізняється від того, що вони сприймають, то це також матиме негативний вплив на досвід користувачів.

4. rel = "канонічний"

SEO: канонічна сторінка бажаний варіант набору сторінок з дуже схожим вмістом . Якщо у вас є сторінки з подібним вмістом, за винятком незначних, невеликих змін, встановлення певної URL-адреси як канонічного дозволить подолати проблему дублювання вмісту на вашому сайті. Дублікати вмісту дійсно сильно караються пошуковими системами.

Зручність використання: наявність сторінок з однаковим або схожим вмістом є фактором, який заплутує користувачів. Якщо такий дубльований вміст присутній у посиланнях або навігації, то користувачі будуть втрачені, як на яких посиланнях натискати. І навпаки, якщо до одного і того ж контенту звертаються по-різному названі посилання, то це також заплутує користувачів, оскільки вони намагатимуться побачити, чи є зміст іншим.

5. <a href = ”..

SEO: Потрібно говорити, що посилання є необхідними для SEO. Разом з Sitemaps XML вони є єдиним способом виявлення й індексування веб-сторінок сканерів пошукових систем. Google використовує зв'язок соку для того, щоб визначити вартість посилань для свого веб-рейтингу. Для того, щоб посилання були зручними для пошукових систем, вони повинні бути описовими (включаючи атрибут заголовка) і повинні містити ключові слова.

Юзабіліті: Наявність корисних посилань ефективно означає, що користувачі частіше досягають мети, чому вони знаходяться на вашому веб-сайті (для пошуку інформації або придбання продуктів або послуг). Це досягнення цілей позитивно вплине на їхній досвід, таким чином збільшуючи ймовірність того, що вони повторно відвідають ваш сайт та / або рекомендують його своїм колегам.

Повний посібник щодо зручності користування посиланнями див. У статті:
15 Рекомендації для зручності використання веб-сайтів "

6. <link rel = "stylesheet"…

SEO: коли код JavaScript (JS) і Cascading Style Sheets (CSS) вбудований у файли HTML, він збільшує розмір цих файлів, роблячи їх повільніше завантаженням. Пошукові системи засуджують повільно завантажувані сайти і Google навіть ввели швидкість сайту в рейтингу веб-пошуку. Найкращим рішенням є екстерналізація файлів JS і CSS, а також вибір коду, коли це потрібно. Більш того, ці зовнішні файли CSS і JS повинні бути стиснуті, оскільки це зробить їх меншими за розміром і, отже, витягуються швидше. Мінімізація кількості викликів серверів для отримання цих файлів шляхом досягнення балансу між кількістю файлів та їх розмірами також може бути корисним для підвищення швидкості сайту.

Юзабіліті: користувачі зазвичай проводять між ними 10 і 20 секунд на веб-сторінці, якщо вміст не захопить їхню увагу. А тепер уявіть, як швидко користувачі зможуть залишити веб-сторінку, якщо цей вміст дуже довго завантажується! Дослідження, проведені компанією Google підтвердили, що "швидкі сайти створюють щасливих користувачів" і "коли сайт реагує повільно, відвідувачі проводять там менше часу".

7. Мікродані

SEO: Microdata є однією з трьох мов коду, призначених для забезпечення пошукових програм з пошуковою системою з інформацією про вміст веб-сайту. Ще краще, прийнятий формат для мікроданих, Schema.org був схвалений Google, Bing і Yahoo! Як пояснюється AJ Кумар з Entrepreneur.com , Мікроданні надають програмам павуків пошукових систем більше контексту для типу інформації на веб-сайті та способу індексування та ранжирування сайту. Крім того, він також створює "багаті фрагменти", які відображають більше інформації про SERP, ніж традиційні списки.

Юзабіліті: Оскільки пошукові системи здатні дізнатися більше про сайти, які вони індексують, то вони можуть представити користувачам кращі результати та більше інформації через свої SERP. Таким чином, реалізація мікроданих є корисною для початку позитивного досвіду користувача навіть до доступу до самого сайту.

Висновок

Наведений вище перелік ні в якому разі не є переконливим, але я сподіваюся, що я надавав вам гарну відправну точку, з якої ви можете отримати доступ до інших відповідних матеріалів. Якщо у вас є пропозиції про те, як зручність і SEO можна покращити за допомогою HTML-тегів, надайте їх у розділі коментарів нижче. Дякую!

(Головне зображення: MianShazadRaza через PixaBay )