Оптимізація HTML-коду сторінки
Оценка пользователей: / 3
ПлохоОтлично 
There are no translations available.

Оптимізація HTML-кодуПошукова оптимізація сайту дуже важливий момент у розвитку ресурсу, і першим кроком у цьому є правильна html-верстка сторінки, а також оптимізація html-коду сторінки.
Ні для кого не секрет, що пошукові роботи проводять оцінку сторінки за її вмісту, виділяючи ключові слова і тематику наведеної інформації. Мова HTML покликана для структурування інформації і пошукачі багато в чому відштовхуються від розмітки сторінки, тому дуже важливо дотримуватися семантики HTML при верстці сторінки.
Пройдемося побіжно по найважливішим тегам і атрибутам, які допомагають пошуковикам.
Тег TITLE
Призначений для оголошення заголовка сторінки (заголовок відображається в назві вкладки браузера), бажано щоб містив ключові слова, але не слід зловживати кількістю на шкоду інформативності. Існує обмеження по довжині: деякі пошуковики сприймають 128 перших символів, деякі 75
Тег H1
Позначає заголовок сторінки в самому тексті сторінки. Повинен бути присутнім тільки один тег H1
Теги H2 .. H6
Теги заголовків (підзаголовків) для інформації, розміщеної у тексті.
Тег STRONG
Позначає ключові слова сторінки, виділяючи їх жирним шрифтом.
Атрибут alt
Позначає текстовий опис для картинки. Він виводиться замість зображення, якщо у користувача відключено завантаження зображення. Використовується пошуковиками для сервісів пошуку зображень.
Тег META
Призначений для надання службової інформації і розбитий на два типи: http-equiv і name.
HTTP-EQUIV - вказує, що властивість є заголовком повідомлення HTTP.
1. content-type - тип вмісту документа і кодування. Приклад:

< meta http-equiv="content-type" content="text/html;charset=windows-1251">

2. content-language - мова документа. Приклад:

< meta http-equiv="content-language" content="ru">

3. refresh - час, через який відбудеться перезавантаження сторінки або перехід на іншу сторінку.
Приклад перезавантаження сторінки через 30 секунд:

< meta http-equiv="refresh" content="30">

Приклад переходу через 5 секунд на сайт http://isearch.kiev.ua:

< meta http-equiv="refresh" content="5; http://isearch.kiev.ua/">

Теги NAME
1. description - опис документа, який впливає на ранжирування пошуковими системами. Має являти собою короткий зміст інформації з документа. Приклад:

< meta name="description" content="Опис сторінки, який буде виводитись під заголовком сторінки в пошуковій видачі">

2. keywords - ключові слова документа. Приклад:

< meta name="keywords" content="слово1, слово2, слово3 і т.д.">

Це не всі META теги, але саме ці рекомендується використовувати на кожній сторінці сайту.
Також існують спеціальні конструкції тегів (схеми), невидимі для користувача, але які дозволяють пошуковцям більш якісно визначати вміст сторінки, структуруючи її. Вони містять додаткову інформацію (microdata), що більш детально описує інформацію. Розглянемо приклад для зображення, розміщеного фотографом Jane Doe.
Оригінальний варіант HTML:

<h2>Beach in Mexico</h2>

<img src="mexico-beach.jpg" />

By Jane Doe

Photographed in Puerto Vallarta, Mexico

Date uploaded: Jan 25, 2008

I took this picture while on vacation last year.

Людина досить добре розуміє структуру документа, де, коли і ким була зроблена фотографія. Пошуковик же не завжди зможе отримати з цього тексту максимум інформації. Тому йому можна трохи допомогти.
Варіант HTML з microdata:

<div itemscope itemtype="schema.org/>ImageObject">

<h2 itemprop="name">Beach in Mexico</h2>

<img src="mexico-beach.jpg" itemprop="contentURL" />

By <span itemprop="author">Jane Doe</span>

Photographed in

<span itemprop="contentLocation">Puerto Vallarta, Mexico</span>

Date uploaded:

<meta itemprop="datePublished" content="2008-01-25">Jan 25, 2008

<span itemprop="description">I took this picture while on vacation last year.</span>

</div>

З наведеного прикладу видно, що теги містять додаткову інформацію. Розглянемо приклад:

1. <div itemscope itemtype="schema.org/>ImageObject">

У цьому рядку itemscope itemtype="schema.org/>ImageObject" - вказує, що в межах даного блоку div буде міститися інформація про зображення.

2. <h2 itemprop="name">Beach in Mexico</h2>

itemprop="name" - вказує, що в тезі h2 укладена назва об'єкта

3. <span itemprop="contentLocation">Puerto Vallarta, Mexico</span> 

- вказує, що Puerto Vallara, Mexico є місцем зйомки

4. <meta itemprop="datePublished" content="2008-01-25">

- вказує точну дату зйомки

5. <span itemprop="description"> 

- текстовий опис зображення
Для кінцевого користувача нічого не змінюється, а пошуковик зможе знати набагато більше.
Детальний опис можливостей і правил використання перебувають на сайті schema.org
Автор Олександр Сліцький, магістрант НТУУ «КПІ»
 
>
КнигаНовости Практика поискаПартнерыО нас
Підтримка та дизайн: Могильний С.С. Шаблон: Joomla Templates by BuyHTTP Joomla Hosting