HTML для SEO - збірник практичних порад і рецептів - Блог Ігоря Калмикова

  1. невелике вступ
  2. Важливі для SEO теги
  3. Заголовки в тексті
  4. звичайний текст
  5. атрибути картинок
  6. посилання
  7. Внутрішні і зовнішні посилання
  8. Посилання в заголовках

Багато вже написано про SEO (SEO - Search Engine Optimization, або оптимізація (сайту) для пошукових систем), багато написано і про HTML як мова розмітки сторінок (HTML - Hypertext Markup Language, по-російськи - мова гіпертекстової розмітки) Багато вже написано про SEO (SEO - Search Engine Optimization, або оптимізація (сайту) для пошукових систем), багато написано і про HTML як мова розмітки сторінок (HTML - Hypertext Markup Language, по-російськи - мова гіпертекстової розмітки). Чимало є і про те, як використовувати можливості HTML для SEO, проте написане на увазі знання сітаксіса HTML читачами.

На жаль, далеко не всі володіють нею в достатній мірі, щоб зрозуміти поради «СЕО-шників», які передбачають знання HTML. Все це абсолютно нормально, бо людям, що не входять в кагорти веб-майстрів, зовсім не обов'язково знати їх специфічна мова. Однак навіть мінімальне використання цих знань при створенні веб-сторінок здатне дуже навіть помітно підняти їх в результатах видачі пошукових систем.

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

У цьому невеликому збірнику рад ми якраз і спробуємо розглянути ближче лише це одне маленьке зернятко

У моїй практиці був не один приклад, коли сайти виявлялися в TOP 10 Яндекса не за рахунок будь-яких спеціальних SEO-хитрувань, а багато в чому завдяки грамотному складанню і структурування тексту і використання по максимуму всіх можливостей HTML-розмітки.

невелике вступ

Можливо, не всі замислювалися про те, як влаштовані зсередини сторінки сайтів, які ми кожен раз відкриваємо в браузері під час своїх подорожей по просторах Інтернет Можливо, не всі замислювалися про те, як влаштовані зсередини сторінки сайтів, які ми кожен раз відкриваємо в браузері під час своїх подорожей по просторах Інтернет. Влаштовані вони, в общем-то, просто, у всякому разі, в той момент, коли їх вже в готовому вигляді завантажує до себе браузер. По суті справи, будь-яка HTML-сторінка - це звичайний текстовий файл і нічого більше. Але на цьому її простота, на жаль, закінчується. Вже саме слово «гіпертекст» має на увазі наявність якоїсь додаткової інформації серед текстового вмісту, яка повинна підказати браузеру, як саме відображати міститься в них текст, картинки та інші елементи і де їх взяти, якщо вони не є текстом. Всі ці «підказки» оформлені за допомогою спеціальних текстових символів - тегів гіпертекстової розмітки. Іншими словами, ці теги html-розмітки дозволяють визначити структуру всіх елементів сторінки і забезпечити в подальшому їх правильне відображення на ній.

Візуально ці теги виглядають у вигляді дужок, що обрамляють ту чи іншу буквене поєднання, наприклад, тег <h 1> походить від слова header (заголовок 1-го рівня в даному випадку) або <p> - від слова p aragraph (параграф). Тут ми розберемо лише ті теги, які найбільш важливі з точки зору можливості їх використання для пошукової оптимізації сторінки.

Важливі для SEO теги

Розділ заголовків сторінки

Розділ заголовків сторінки розташовується між тегами <head> ... </ head> в самому її початку. Те, що розташоване всередині цього розділу, як правило, не видно візуально, проте має дуже велике значення. Розберемо те, що важливо, перш за все, для SEO. У разі використання CMS (Content Management System - система управління контентом) для управління сайтом вміст цього розділу є для редагування через спеціально виділені поля, що надаються, як правило, окремими модулями (наприклад, в WordPress це модуль All in One SEO Pack і інші, а в Drupal - модулі Nodewords (D6), Metatags (D7) та інші).

  1. <title> ... </ title> - між цими тегами розташовується заголовок сторінки, але не той, який ми бачимо на самій сторінці, а «службовий», видимий, наприклад, в статусному рядку браузера, і при цьому дуже охоче читається пошуковими системами. Саме тому в цей заголовок багато хто намагається помістити якомога більше ключових слів, які відображають зміст вмісту на сторінці. Як виявилося, в заповненні цього тега є багато тонкощів, про які можна прочитати, наприклад, на сайті devaka.ru.
  2. Мета-тег з описом вмісту сторінки:
    <meta name = "description" content = "Тут має бути короткий опис вмісту сторінки, яке дуже охоче використовують пошукові системи" />
  3. Мета-тег зі списком ключових слів і / або фраз:
    <meta name = "keywords" content = "Тут пишемо через кому список ключових слів і фраз, використовуваних і мають відношення до вмісту сторінки" />

В результаті ця частина в заголовку сторінки може виглядати в коді сторінки таким чином (в коді видалені фрагменти інструкцій для завантаження таблиць стилів, JavaScript і т.д.):

<Head>

<Title> Созданіесайтоввгороде N-СтудіяДізайнаСупер -пуперстудія </ title>

...

<Meta name = "description" content = "Дизайн-студія в місті N: створення сайтів, розробка сайтів, веб-дизайн, підтримка веб-сайтів, просування, графічний дизайн, розробка фірмового стилю." />

<Meta name = "keywords" content = "створення сайтів в місті N, дизайн в місті N, сайт місто N, обслуговування сайтів, просування сайтів, програмування сайтів" />

...

</ Head>

Дуже важливо придумати і правильно написати вміст для тега description. Практика показує, що пошукові системи дуже часто вважають за краще виводити в якості фрагментів (від англійського snippet - уривок, частина, шматочок) - частина тексту розміром до 150 знаків, яку пошукова система видає разом з посиланням на веб-сайт в результатах видачі, опис, знайдене саме в цьому тезі. У разі його відсутності (а іноді навіть при заповненому описі), в якості сниппета може бути висмикнуть будь-який фрагмент тексту, що містить ключові слова. Тому дуже бажано не тільки коротко і зрозуміло описати в description вміст станиці, а й використовувати в цьому описі ті ключові слова, на просування по яким вона розрахована дана сторінка.

Заголовки в тексті

У тексті сторінки повинні використовуватися «правильні» заголовки, які допомагають читачеві і пошуковим системам швидко «схопити» структуру документа і сенс йдуть за ними розділів. Добре, якщо ключові слова, використовувані всередині <title> ... </ title>, будуть зустрічатися і в заголовках розділів на сторінці.

Для визначення заголовків використовуються теги <h 1> ... </ h 1>, <h 2> ... </ h 2>, <h 3> ... </ h 3> і т.д., де буква h сталася від слова header (заголовок), а цифра означає рівень заголовка - чим більше цифра, тим нижче рівень.

звичайний текст

Основний текст як правило розбивається на параграфи. Для цього використовується тег <p> ... </ p>. Як правило, при візуальному оформленні параграфів використовуються відступи, що полегшує сприйняття тексту його читачем. У свою чергу і пошуковим роботам стає простіше аналізувати текст, коли він розбитий на якісь смислові фрагменти.

Ключові слова, які використовуються в тексті, корисно виділяти жирним шрифтом, використовуючи тег <strong> ... </ strong>, або курсивом, використовуючи тег <italic> ... </ italic>. Це не тільки полегшує схоплювання сенсу матеріалу читачем, а й підказує пошуковим роботам, який саме тематиці присвячений текст сторінки.

атрибути картинок

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

<Img src = "[Путькфайлускартінкой] / [Ім'я -файла -з -картінкой]" alt = "..." />

Скорочення img значает image (зображення), src - source (джерело) і alt - alternative (альтернатива. У даному випадку це текст, який слід показати на сторінці при неможливості відобразити картинку). Можливості внесення інформації тут присутні в тегах src і alt:

  1. В якості імен файлу дуже бажано використовувати не image jpg або photo -1.jpg, а по можливості якомога більш осмислені слова, наприклад, foto -bolshogo -divana -baron .jpg або stol -derevyannyi -razmer -80x 85.jpg (російські назви, написані транслітом).
  2. В цей атрибут слід поміщати короткий, але інформативний опис зображення на картинці з використанням ваших ключових слів, пошукові роботи обов'язково його проїндексируют. Якщо зовсім нічого не вдалося придумати, то поставте хоча б марною атрибут alt = "", його присутність обов'язкова тут навіть без вмісту.

посилання

Це, мабуть, найвідоміший і зрозумілий атрибут сторінки, без якого не було б ні сайтів, ні Інтернету, однак і в їх використанні є чимало тонкощів. Ось як виглядає структура коду посилання:

<A href = "[Адреса -страніци]" title = "Опісаніессилкі"> Текстссилкі </ a>

Тут відповідно a - anchor (якір), href - hyper reference (гіпер-посилання) і title (заголовок) - заголовок, підказка для посилання. Замість тексту посилання може бути і картинка.

Добре, коли назва сторінки на засланні є осмисленим словом або фразою, в якій слова розділені за допомогою тире. Часто в CMS є можливість автоматичного формування цих імен через транслітерацію заголовків сторінки, однак ніщо не заважає зробити це вручну або підправити автоматично отриманий результат.

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

Дуже багато хто забуває заповнити атрибут title = "..." всередині тега посилання. Насправді цей атрибут не тільки полегшує життя відвідувачеві сайту, показуючи йому в підказці при наведенні на посилання покажчика миші більш докладний опис вмісту адресується сторінки, але і дозволяє додати в цю підказку додаткові ключові слова, які виглядали б надлишково і недоречно в видимому на сторінці тексті посилання.

Внутрішні і зовнішні посилання

Пошуковики «поважають» сайти за внутрішні посилання (посилання на інші сторінки власного сайту) і навпаки - не шанують за зовнішні, особливо, якщо їх багато. У цьому є своя логіка: чим більше на сайті внутрішніх посилань, тим вище ймовірність, що представлена ​​на сайті інформація досить повна, добре структурована, а значить і корисна користувачам. До того ж, наявність грамотно розставлених внутрішніх посилань стимулює користувача сайту до переходів по ним, ці переходи відстежують пошуковики і відповідно коректують рейтинг сайту: чим більше переходів, тим вище ймовірність, що сайт дійсно може дати цінну інформацію своїм відвідувачам.

І навпаки, чим більше на сайті зовнішніх посилань, тим більше він, на думку пошукача, стає схожий на черговий сміттєвий каталог посилань, яких і без нього в Інтернеті предостатньо.

Тому, в разі використання зовнішніх посилань, якщо це, звичайно, не посилання на сайти ваших друзів або партнерів, рекомендується використовувати ще один її атрибут, який вказує, що пошуковому роботу не слід звертати на посилання увагу і не намагатися по ній переходити: rel = " nofollow "(« no follow »- перекладається з англійської як« не йди за мною »). Зараз цей атрибут розуміють як Google, так і Яндекс.

Як приклад код двох посилань - внутрішньої і зовнішньої:

Внутрішня:

<a title = "Подробнее про компанію ..." href = "/about-us"> Про нас </a>

(Зверніть увагу, що адреса вказана не є абсолютним, а відносний, від кореня сайту, який позначається за допомогою «/»)

І зовнішня:

<a href = "http://mail.yandex.ru/" rel = "nofollow"> Пошта Яндекс </a>

Якщо на сторінці дуже багато зовнішніх посилань, можна відповідний блок закрити в теги <noindex> ... </ noindex> або «дати вказівку» пошуковикам її НЕ індексувати зовсім в файлі robots.txt.

Посилання в заголовках

Іноді використовують посилання всередині заголовків. Часто самі CMS, формуючи список коротких анонсів матеріалів, використовують посилання саме всередині заголовків. Це відповідно підвищує вагу тексту, який в них міститься. При цьому слід пам'ятати, що код посилання слід розміщувати всередині коду тегів заголовка, а не навпаки. Нижче приклад такого посилання:

<H2> <a title = "Соціальна мережа Фейсбук (Facebook) запускає функцію Timeline по всьому світу"

href = "/ it-news / 111216-4"> Facebook началазапускфункціі Timeline повсемуміру </ a> </ h2>

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

  1. «SEO: Пошукова Оптимізація від А до Я» - систематизований підручник, довідник і енциклопедія одночасно, складений виключно модераторами на основі аналізу більш ніж 50 кращих SEO блогів і відбір найбільш корисних (з моєї точки зору) статей (понад 200) для оптимізаторів. Там же можна знайти список посилань на блоги авторів - практикуючих і успішних SEO-оптимізаторів, на яких також можна знайти чимало корисного і актуального.
    http://www.sbup.com/seo-forum/poiskovaya_optimizaciya_v_obshih_chertah/seo_poiskovaya_optimizaciya_ot_a_do_ya/
  2. SEO News - відмінний сайт з постійно з'являються новими і корисними матеріалами. Рекомендую підписатися на їх твіттер-стрічку.
    http://www.seonews.ru/
  3. Величезна кількість інших ресурсів на цю тему ...

* * *

Що ж стосується розвитку HTML, то і тут світ не стоїть на місці. У цій області, можна сказати, відбувається справжня революція і розробники сайтів потроху починають переходити на стандарт HTML5, підтримка якого з'явилася вже в більшості сучасних браузерах. Крім усіляких візуальних ефектів і величезної кількості нових можливостей, в 5-ій версії стандарту було додано чимало нових тегів і для семантичної розмітки веб-документів, однак це тема вже для наступної історії.

PS Ця замітка була написана в 2012 році і раніше лунала у вигляді електронної книги в форматі PDF . Тепер доступна і в HTML-форматі.

схоже