Створюємо SEO оптимізований HTML макет сайту

  1. Частина 1. Дотримуйтесь HTML і CSS стандарти
  2. 1.1 Завжди закривайте теги.
  3. 1.2 Дотримуйтесь правильну вкладеність тегів.
  4. 1.3 Ніколи не потрібно описувати CSS і JS всередині HTML макета і атрибутів тегів.
  5. 1.4 Забудьте про Caps Lock і заголовних буквах.
  6. Частина 2. Прискорюємо завантаження сторінок - один з чинників ранжирування
  7. 2.2 Використовуйте CSS3 замість JS.
  8. 2.3 Менше Photoshop - більше CSS 3.
  9. 2.4 Об'єднуйте зображення в CSS спрайт.
  10. 2.5 Розміщуйте JS файли правильно.
  11. 2.6 Розміщуйте CSS файли правильно.
  12. Частина 3. Правильна SEO верстка макета
  13. 3.1.1 Тонкощі горизонтального меню.
  14. 3.2 Атрибут alt у картинок
  15. 3.3 Використовуйте HTML заголовки h1-h6 по максимуму.
  16. 3.4 Швидкі посилання на сайт.
  17. 3.5 Використовуйте всі можливості форматування тексту.
  18. 3.6 Використовуйте мета-теги keywords і description з розумом.
  19. 3.7 Оптимізуйте код.
  20. 3.8 Скоротіть код.
  21. Частина 4. Продовжуємо оптимізувати макет сайту під пошукові системи
  22. Частина 5. Google Page Speed
  23. Будь ласка, Оцініть Цю статтю
  24. Стаття виявило вам корисний? Підпішіться, Щоб не Пропустити Нові!

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

24.07.2013

Добрий день. Сьогодні ми продовжимо тему оптимізації HTML макета сайту, яку почали в статті про CSS селекторах .

Давайте спочатку розберемося, чому це важливо і потім перейдемо до практичних порад.

Правильно зроблений (зверстаний) шаблон сайту:

  • Може значно прискорити завантаження сторінок (особливо, якщо до цього все було запущено);
  • Спростить потрапляння ваших сторінок в ТОП пошукової видачі (не тільки через швидкого завантаження);
  • Збільшить ваші шанси на повну кроссбраузерность, тобто однаково правильне відображення сайту у всіх браузерах;
  • Дасть невелику гарантію, що після закінчення безлічі років вам не доведеться переробляти ваші сайти під нові браузери (або під нові версії старих браузерів).

Пропоную йти від простих речей до більш цікавим.

Частина 1. Дотримуйтесь HTML і CSS стандарти

Про всяк випадок скажу, що крім HTML і CSS ми ще можемо оптимізувати JS і PHP частини наших сайтів, які є більш ресурсоємними і значніше уповільнюють швидкість завантаження сторінок. Однак крім швидкості завантаження сторінок, JS і PHP складові ніяк не впливають на просування сайту (аби не ламали його), на відміну від HTML розмітки, тобто шаблону сайту.

1.1 Завжди закривайте теги.

У тому числі ті, які закривати не обов'язково, навіть якщо ви ненависник XHTML стандарту, краще дотримуватися цього правила. приклад:

<Ul> <li> Пункт списку </ li> <li> Пункт списку </ li> <li> Пункт списку </ li> </ ul>

Кожен тег li закритий, хоча це і не обов'язково.

1.2 Дотримуйтесь правильну вкладеність тегів.

За принципом: першим відкрився - останнім закрився. Приклад як неправильно:

<Div> <span> текст </ div> </ span>

Як правильно:

<Div> <span> текст </ span> </ div>

1.3 Ніколи не потрібно описувати CSS і JS всередині HTML макета і атрибутів тегів.

Ніколи! Іншими словами, забудьте про існування атрибута style і тега style:

<P style = "color: red; font-size: 20px; text-align: center"> текст </ p> <! - або -> <style> p {color: red; font-size: 20px; text-align: center} </ style>

Описувати всі стилі в окремому файлі .css

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

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

Все те ж саме відноситься і до JS, весь JS-код повинен бути в окремому файлі, а не всередині вашого макета або ще гірше - серед атрибутів тегів.

1.4 Забудьте про Caps Lock і заголовних буквах.

Пишіть все теги, атрибути і їх значення малими (маленькими) буквами, це ж стосується і таблиць стилів CSS.

Майже все описане вище є в офіційній специфікації HTML і CSS і відноситься до валідності документа.

Таким чином, я повинен відзначити, що дотримуючись W3C стандартів, тобто, дотримуючись валідність документа - ви отримуєте наступні SEO переваги:

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

Однак не варто зациклюватися на валідності, ви повинні намагатися максимально її дотримуватися, проте не на шкоду всьому іншому (часу, функціональності і тд.).

Посилання на специфікації є на самому початку першій статті розділу про HTML і CSS .

Частина 2. Прискорюємо завантаження сторінок - один з чинників ранжирування

2.1 Вказуйте справжні розміри картинок.

Тут суть в двох речах:

Якщо картинка більше ніж вам необхідно, то не потрібно економити час на те, що її можна зменшити за коштами HTML або CSS. Будьте люб'язні витратити час, зайти в Фотошоп або його аналоги і зменшити картинку до тих розмірів, які ви хочете бачити на сайті, це може помітно прискорити завантаження сторінок.

2.2 Використовуйте CSS3 замість JS.

JS може значно уповільнити завантаження ваших сторінок, а також продовжувати створювати навантаження вже після завантаження сторінки (різноманітні ефекти, типу біжучого рядка і інші динамічні речі), що може гальмувати роботу браузера поки вкладка з сайтом буде відкрита.

Сьогодні безліч красивих і цікавих ефектів можна досягти тільки завдяки використанню властивостей CSS3 (наприклад, transition, box-shadow, border-radius, opacity, transform, background-size) і вмілої комбінації селектор .

Все сказане вище можна підсумувати однією фразою: всюди, де ви можете (підозрюєте як) замінити JS на CSS3, використовуйте CSS3 не роздумуючи! Для пошуку подібних фрагментів раджу вам вивчити нові можливості CSS3.

2.3 Менше Photoshop - більше CSS 3.

Цей девіз уже давно використовують багато вебмастера. Ви можете створювати красиві кнопки і елементи дизайну з плавним градієнтом, згладженими кутами, тінями (внутрішніми і зовнішніми) і красивим текстом зверху завдяки одному лише CSS. Скрізь, де можна замінити графічні елементи дизайну на CSS код - робіть це! приклад:

Або моя кнопка "Підписатися!" в кінці кожної статті. До речі, не забуваємо підписатися на сповіщення про нові корисних статтях, ніякого спаму або реклами.

Крім перерахованих вище властивостей CSS3 вам також доступний формат опису кольору RGBA.

Для створення кросбраузерності градієнта на CSS ви можете використовувати безкоштовні сервіси, наприклад цей colorzilla.com .

2.4 Об'єднуйте зображення в CSS спрайт.

Ті зображення, які ми не змогли намалювати за допомогою CSS 3, потрібно обов'язково об'єднати в одне єдине (в ідеалі). Це потрібно для того, щоб скоротити кількість запитів до сервера при завантаженні сторінки. Цей пункт може значно знизити навантаження на ваш веб-сервер, а заодно і прискорити завантаження сторінок, відразу 2 зайця!

Щоб краще зрозуміти, про що мова, просто погляньте на мій CSS спрайт:

Щоб краще зрозуміти, про що мова, просто погляньте на мій CSS спрайт:

Непогано, чи не так? Фонова картинка одна на все елементи, ми тільки рухаємо її і підставляємо в фон певного елемента потрібну частину картинки завдяки властивості background-position, наприклад, так:

# Subs, # left, .mail, .rss, .vk {background: url (/images/1.png) no-repeat} #subs {background-position: -28px -120px;} #left {background-position: -35px -20px;} .mail {background-position: -43px -50px;} .rss {background-position: -12px -8px;} .vk {background-position: -34px -56px;}

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

2.5 Розміщуйте JS файли правильно.

Все що підключаються вашим сайтом JS файли повинні знаходиться якомога нижче за кодом, не потрібно підключати їх усередині «голови» сайту (між тегами head) - це значно уповільнює завантаження сторінок. Найкращим варіантом буде підключити файли JS перед закривається тегом body, тобто в самому низу сторінки, нижче вже нікуди.

І ще один дуже корисну пораду: в ідеалі всі ваші файли JS потрібно об'єднати в один єдиний, тобто вирізаємо (Ctrl + X) код з усіх файлів і копіюємо його в один, щоб в результаті у вас внизу, перед закривається тегом body підключався один єдиний файл:

... <script src = '/ scripts / all.js' type = 'text / javascript'> </ script> </ body> </ html>

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

2.6 Розміщуйте CSS файли правильно.

Файл CSS, який, до речі кажучи, теж повинен бути одним єдиним (з тих же причин), потрібно розміщувати в коді навпаки, якомога вище!

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

Частина 3. Правильна SEO верстка макета

3.1 Код навігації сайту.

Вся навігація сайту (меню, хлібні крихти, списки виробників в інтернет-магазинах і тд.) Повинні бути реалізовані за допомогою ненумерованих списків (теги ul, li), а не за допомогою тегів div і a.

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

<Ul class = "menu"> <li> <a href="/page1"> пункт меню 1 </a> </ li> <li> <a href="/page2"> пункт меню 2 </a> </ li> <li> <a href="/page3"> пункт меню 3 </a> </ li> </ ul>

3.1.1 Тонкощі горизонтального меню.

Якщо вам необхідно реалізувати горизонтальне меню, то я хочу вам дати 2 безкоштовних ради:

<Style> ul.menu li {display: inline-block; margin: 0 5px; } </ Style> <ul class = "menu"> <li> <a href="/page1"> пункт меню 1 </a> </ li> <li> <a href="/page2"> пункт меню 2 </a> </ li> <li> <a href="/page3"> пункт меню 3 </a> </ li> </ ul>

Перенесення рядка в HTML дорівнює пробілу, тобто якщо ви в коді між пунктами меню ставите Ентер, то у користувачів на сторінці сайту між ними з'являться прогалини. Що тут поганого? У кожного браузера може бути різна ширина пробілу, а деякі можуть його зовсім проігнорувати. У підсумку, ваш сайт буде виглядати всюди по-різному, а іноді (з власного досвіду) це може навіть сильно спотворити дизайн.

Тому у мене є моє власне правило при верстці: між будь-якими (не тільки в меню) inline-block елементами не повинно бути пробілів і переносів рядків! Заодно це незначно, але зменшує загальну вагу ваших сторінок, адже як я вже писав: 1 символ (в тому числі прогалини і переноси рядків) = +1 байт до ваги ваших сторінок.

3.2 Атрибут alt у картинок

Обов'язково вказуйте атрибут alt в тезі img:

<Img src = "/ main.jpg" alt = "схема самостійного створення сайту" width = "773" height = "896" />

По-перше, це потрібно, якщо ви хочете пройти перевірку на валідність (в XHTML точно, на рахунок HTML вже не пам'ятаю, так чи інакше завжди варто рівнятися на суворі стандарти XHTML), по-друге, якщо картинка не завантажиться, то користувачеві замість картинки хоча б відобразиться текст, записаний в alt (про що вона). По-третє, це збільшить шанс на потрапляння ваших картинок в пошук по картинкам від Гугл і Яндекса, що може привернути додаткових відвідувачів до вас на сайт.

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

Якщо всі ваші атрибути alt будуть заповнені одними ключовими словами, то неодмінно чекайте штрафних санкцій.

3.3 Використовуйте HTML заголовки h1-h6 по максимуму.

h1 - це найбільший і головний заголовок, в нього слід укладати назву вашої поточної сторінки. У той час як h6 найдрібніший і найменш значимий заголовок. Багато SEO-експерти настійно рекомендують використовувати заголовок h1 тільки 1 раз на сторінці і це логічно. Решта заголовки можете використовувати будь-яку кількість разів, головне з розумом.

Сама наявність HTML заголовків в макеті вашого сайту вже є плюсом для пошукового просування, а вміла розстановка може подвійно посилити результат. Ось що з цього приводу пише сам Яндекс.

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

І ще:
При ранжируванні враховуються не тільки формальну відповідність з текстом запиту, повнота наданої інформації та її актуальність, а й те, як вона структурована і оформлена.

Думаю, ви вже переконалися у важливості заголовків при верстці макету, тільки не треба намагатися укласти всі можливі ключові слова в заголовки (хоча я іноді сам так роблю) це працювало раніше, а тепер уже не пройде. Заголовки потрібно використовувати заради зручності навігації користувачів, а не для маніпулювання релевантність.

Особисто я роблю висновок все підзаголовки всередині статті в h2, підзаголовки підзаголовків в h3, а дрібні підпункти в h4. Внизу під кожною статтею є форма підписки і блок з кнопками соціальних мереж, їх назви я уклав в h6. У правій колонці сайту назви розділів укладені в h5.

Як бачите, я використовую заголовки HTML по максимуму, причому логіка на автоматі підказує розставляти все зверху вниз по коду. Хоча для повної ідилії потрібно було поміняти місцями заголовки h6 та h5, але це було б занадто педантично :) і не так важливо.

3.4 Швидкі посилання на сайт.

Продовжуючи тему заголовків, хочу сказати про важливість h1 і про те, як правильно його складати. По-перше, я настійно рекомендую використовувати його тільки 1 раз на сторінці! Простежте за цим у вашій CMS. По-друге, h1 має великий ефект на SEO (на другому місці після title), так чи інакше, але я раджу вам дублювати текст з title в h1.

Це рекомендує сам Яндекс, більш того, тим самим ми збільшимо шанс появи в пошуковій видачі «швидких посилань» на розділи нашого сайту:

Це рекомендує сам Яндекс, більш того, тим самим ми збільшимо шанс появи в пошуковій видачі «швидких посилань» на розділи нашого сайту:

Яндекс пише:
Щоб допомогти Яндексу правильно виділяти швидкі посилання, текст в тезі <title> для ключових сторінок повинен збігатися з її назвою (з заголовком сторінки, виділеним, наприклад, тегом <h1>) і з текстами посилань, що вказують на цю сторінку.

3.5 Використовуйте всі можливості форматування тексту.

Ми вже з'ясували, що пошукові системи люблять сайти, які мають чітку, зрозумілу і правильну структуру. Тому крім заголовків, ви повинні використовувати якомога більше інших можливостей:

  • Номерні і ненумеровані списки (ul, ol);
  • Укладайте основний текст не в теги div, а в теги параграфів: p;
  • Супроводжуйте текст картинками і відео;
  • Малюйте HTML таблиці;
  • Використовуйте (в міру!) Теги логічного виділення тексту: strong, em, u.

3.6 Використовуйте мета-теги keywords і description з розумом.

У description запишіть доступною мовою, про що ваша сторінка, не потрібно намагатися укласти в нього якомога більше ключових слів. Складайте description для людей, думайте тільки про це, інакше ви можете тільки нашкодити собі переоптімізацію. До мета-тегу keywords відноситься все те ж саме. Ось офіційна сторінка Яндекса, на якій написано як правильно складати мета-опис сайту: читати в новому вікні .

Візьміть на замітку: не використовуйте зайвих мета-тегів (це безглуздо), максимум три: keywords, description і мета-тег для позначення кодування сайту:

<Meta http-equiv = "content-type" content = "text / html; charset = utf-8" />

Якщо ваша CMS генерує їх більше (Autor, Generator і тд.), То сміливо видаляйте їх! На сайті не повинно бути зайвого сміття, як у тексті, так і в коді.

3.7 Оптимізуйте код.

Після того як ви закінчили сайт, подумайте, як можна було б зменшити HTML розмітку, наприклад, за допомогою комбінацій селектор , А також зверніть увагу, чи всі ваші теги щось роблять. Якщо до тегу не застосовується ніяких CSS властивостей, тоді навіщо ви його ставили? Щоб це перевірити, використовуйте веб-інспектори . Часто новачки створюють багато зайвих тегів div. Перевірте це, чим менше коду - тим краще!

3.8 Скоротіть код.

Після того, як всі роботи закінчені, скоротіть ваш HTML, CSS і JS код. Як скоротити? Запишіть все в один рядок, це буде ідеальний варіант. І це не жарт, видаліть всі прогалини між тегами і всі перенесення рядків в HTML макеті! Коли ви натиснете в браузері Ctrl + U - ви повинні побачити одну єдину безперервну рядок.

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

Скоротити CSS і JS найпростіше через спеціальні сервіси, для JS можете скористатися, наприклад, Closure Compiler від компанії Google (будьте пильні, після оптимізації ваш код може втратити працездатність); для CSS підійде csscompressor.com Однак я зазвичай використовую один єдиний сервіс (для JS і CSS), про нього в самому кінці статті.

Частина 4. Продовжуємо оптимізувати макет сайту під пошукові системи

4.1 Чим вище основний текст - тим вище позиції в пошукових системах.

Важливо 2 параметра:

  • Скільки потрібно користувачеві скролить (прокручувати) сторінку до релевантного (на думку пошукових систем) вмісту;
  • Як високо в коді (близько до початку) знаходиться релевантне вміст.

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

Яндекс пише:

  • Основна суть документа повинна бути зрозуміла вже на першому екрані браузера.
  • Не рекомендується використовувати елементи оформлення, що роблять неочевидним доступ до тексту для користувачів - вікна прокрутки, приховані випадають блоки тощо

У Гугл теж є спеціальний алгоритм під назвою Page Layout, який визначає, як далеко потрібно прокручувати ваш сайт, щоб дійти до корисної (релевантної запиту) частині сторінки. Наступна картинка ілюструє дію цього алгоритму, алгоритм перевіряє на середньостатистичному дозволі екрану (1024 * 768):

Також обидві пошукових системи звертають свою пильну увагу на кількість реклами і банерів на першому екрані браузера.

Запам'ятайте, чим довше потрібно прокручувати сторінку до основного вмісту, тим меншу перевагу їй буде віддаватися, в порівнянні з конкурентами, у яких головна частина тексту видно на самому початку сторінки.

З цього приводу пару корисних порад:

  • Робіть шапку сайту якнайменше по висоті (приклад як не треба: цей блог);
  • Намагайтеся не захаращувати сайт рекламою;
  • Якщо в двох стовпчики макеті не можете визначитися: справа або зліва від основної колонки поставити додаткову - завжди ставте праворуч. Пошукові роботи, як і люди, дивляться на ваш сайт зліва направо, а значить краще, щоб основний вміст було зліва!

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

З цього приводу є ще одна хитрість. Наприклад у нас є 2 колонки сайту - основна і додаткова. При цьому незважаючи на SEO, нам дуже хочеться, щоб додаткова колонка була саме зліва, нічого смертельного в цьому немає. Однак в такому випадку весь код і вся інформація з додатковою колонки (лівої) буде вище за кодом, ніж основна частина, і ми в силах це виправити!

Для цього ми будемо використовувати CSS властивість float. При створенні HTML макета ми основну колонку (праву) розмістимо все-таки зліва від додаткової (вище за кодом):

<Div id = "text"> Основна частина сайту. </ Div> <div id = "left"> Додаткова колонка зліва. </ Div> <div class = "clear"> <! - забороняємо обтікання усіма іншими елементами- -> </ div>

А тепер за допомогою CSS поміняємо їх місцями:

#text {float: right;} #left {float: left;} .clear {clear: both;} / * заборона обтікання * /

Думаю, ви зрозуміли суть. Треті рядки в обох фрагментах коду я міг би опустити, так як це вже деталі верстки, які виходять за рамки даної статті. Однак ця підказка допоможе скоротити можливі проблеми у початківців верстальників, особливо у тих, хто перший раз почув про CSS властивості float, а тим більше clear.

Частина 5. Google Page Speed

Google Page Speed - це чудовий онлайн сервіс від Google, а також плагін для Chrome і Mozilla, який стане для вас незамінним помічником при аналізі вашого HTML + CSS шаблону сайту. Він підкаже вам всі недоліки і що важливо - дасть конкретні шляхи вирішення.

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

Просто почніть працювати з Google Page Speed ​​і ви помітно підвищите свій рівень в правильній клієнтської оптимізації шаблону сайту.

Дякуємо за увагу. Вдалого дня і до зустрічі!

Будь ласка, Оцініть Цю статтю

Середня оцінка: 4.83 з 5 (проголосувало: 123)

Стаття виявило вам корисний? Підпішіться, Щоб не Пропустити Нові!
Ви можете помочь розвитку проекту, зроби Всього 1 Клік:

Дякуємо!

Чому?
Що тут поганого?
Якщо до тегу не застосовується ніяких CSS властивостей, тоді навіщо ви його ставили?
Як скоротити?