Працюючи в компанії, де SEO приділяють чималу увагу, мені хочеш - не хочеш, а довелося навчитися писати сайти так, щоб вони були, я б сказав, "SEO сприятливі", тобто щоб у верстці вже був заздалегідь закладено чималий потенціал для подальшої розкрутки сайту. Що таке SEO верстка і питання, пов'язані з семантикою я розгляну в наступних статтях, а зараз поговоримо про те, з чого починається ця сама SEO верстка - про правильне layout'e сайту.
Ні для кого ні секрет, що в колах SEO-шників існує думка про те, що чим ближче ключові слова до початку коду html-документа, тим вище їх вага в очах пошукових систем. Зауважте, я сказав, «чим ближче до початку коду html-документа», а ні «чим вище вони на сторінці", "чим ближче вони до верхньої межі сторінки» і т.п.
Принципова різниця тут полягає в тому, що на html-сторінці ключові слова повинні бути розміщені в чітко відведеному для них місці (найчастіше це центральна / права / ліва колонка), тоді як в коді вони повинні знаходитися саме в його початку! Вже відчули різницю? Ще немає? Тоді йдемо далі.
Припустимо, дизайнер намалював нам двоколонковому layout приблизно такого змісту:
seo-оптимізована верстка
Відразу обмовимося, що хедер не призначений для розміщення ключових слів. Якщо ж це не так (як, наприклад, на порталі http://101.ru/, де ключові слова розташовані якраз в хедері і згорнуті в таб) питання SEO оптимізованої верстки відпадає сам собою. Бажано також, щоб ми заздалегідь знали висоту хедера, що в більшості випадків як правило виконується. Під SEO оптимізацію в нашій верстці розрахований буде саме main-column, як це часто і буває.
Перше, що спадає на думку, типова схема верстки типу: wrapper -> header -> sidebar -> main-column -> footer, по якій код html-документа буде виглядати наступним чином:
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "header"> </ div> <div id = "sidebar"> </ div> <div id = "main- column "> Ключові слова знаходяться тут! </ div> <div id =" footer "> </ div> </ div> </ body>
Wrapper нам тут потрібен для того, щоб тримати в собі всю структуру і позиціонуватися по центру. Таким чином наш сайт завжди буде центрироваться на моніторі будь-яких розмірів.
Основне питання для нас: «Як зробити так, щоб блок з текстом" main-column "знаходився в коді html-документа якомога ближче до тегу <body>, а в ідеалі взагалі йшов відразу за ним?»
Навіть при мінімальних знаннях css здогадатися, як поміняти sidebar і main-column місцями можна. Використовуємо для цього плаваючу модель і властивість float. Для цього змінимо в коді документа main-column і sidebar місцями.
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "header"> </ div> <div id = "main-column"> Ключові слова знаходяться тут! </ Div> <div id = "sidebar"> </ div> <div id = "footer"> </ div> </ div> </ body>
Лістинг css в цьому випадку буде наступним:
1 2 3 #wrapper {margin: 0 auto; width: 1000px; } # Main-column {width: 700px; float: right; } #Sidebar {width: 300px; float: left; }
Таким чином, завдяки властивості «обтікання» (float) ми домоглися того, що підняли наш блок з ключовими словами на один щабель ближче до <body>, що вже непогано і є мінімальним використанням SEO верстки. При цьому візуальне його розташування на сторінці не змінилося.
Але не будемо зупинятися на малому і підемо далі. На даній стадії наше запитання полягає в наступному: "Як зробити так, щоб main-column все-таки був в коді першим після <body>.
Ось тут-то нам в голову і приходить ще одна відмінна властивість зване position: absolute.
Ідея така: wrapper робимо релатівності (position: relative), щоб саме щодо його позиціонувалися все дочірні абсолютно позиційований елементи (position: absolute). Header ж поміщаємо в будь-яке місце в коді і робимо його абсолютно позиційованим, таким чином він як би приб'ється до верхнього лівого кута wrapper'a. Для wrapper'a задаємо внутрішній верхній відступ рівний висоті header'a. Header поставимо в нашому лістингу перед footer'oм, тому що для користувача пріоритетною якомога швидше відобразити на сторінці саме елементи header'a, а не footer'a. Решта лістинг не чіпаємо, і в результаті отримуємо: wrapper -> main-column -> sidebar -> header -> footer.
В даному варіанті header можна всунути в принципі в будь-яке місце - в т.ч. і навіть між main-column і sidebar, оскільки він в будь-якому випадку позиціонується від верхнього лівого кута wrapper. Тому, якщо для вас бажано, щоб відразу після main-column вантажився header, а тільки потім sidebar і все інше, то можете так і зробити.
Якщо footer у вас розрахований на 100% ширини body, а wrapper - фіксованої ширини, то footer завжди можна винести і за його межі.
Лістинг підсумкового варіанту:
1 2 3 4 5 6 7 8 <body> <div id = "wrapper"> <div id = "main-column"> Ключові слова знаходяться тут! </ Div> <div id = "sidebar"> </ div> <div id = "header"> </ div> <div id = "footer"> </ div> </ div> </ body>
Підсумковий css:
1 2 3 4 5 #wrapper {margin: 0 auto; width: 1000px; position: relative; padding-top: 100px; } # Main-column {width: 700px; float: right; background: # a5f0e6; padding: 40px 0; } #Sidebar {width: 300px; float: left; background: # d1e5f1; padding: 40px 0; } #Header {position: absolute; left: 0; top: 0; height: 100px; background: # b0e8f4; } #Footer {background: # b0e8f4; padding: 40px 0; }
Таким чином завдяки SEO верстці ми домоглися, щоб у нашому коді наші блоки йшли у відповідність з нумерацією на малюнку і, зауважте, не внесли жодного візуального зміни в html-сторінку:
SEO верстка
Перевірено: IE6 / 7, FF3, Safari3, Chrome.
Резюмуємо переваги даного методу:
- Можливий SEO-бонус від пошукових систем.
- Зручна черговість завантаження для користувача: користувач звертає увагу на header, як правило, всього пару раз, поки не вивчить. Далі ж 99% його уваги зосереджується саме навколо main-column, а тому доречно після переходу до чергової сторінці відображати для користувача в першу чергу саме main-column, не затримуючи його завантаженням header'a, sidebar'a та іншого ... Дана верстка саме це і реалізує. Приклад ви можете бачити на цьому самому блозі.
- Гнучкість: header можна розмістити після майже будь-якого блоку сторінки всередині wrapper, тобто ми можемо управляти черговістю завантаження блоків на сторінці. Якщо footer у нас 100%, а wrapper - фіксованої ширини, його можна винести за межі wrapper'a. Те ж саме справедливо і по відношенню до header'у. Тільки винісши його за межі wrapper'a, ми втратимо можливість розмістити його між блоків всередині wrapper'a, і header в будь-якому випадку доведеться вантажити останнім блоком на сторінці, але в загальному-то це виправдана жертва.
http://blogto4ka.ru
Також рекомендую прочитати
Вже відчули різницю?Ще немає?
Основне питання для нас: «Як зробити так, щоб блок з текстом" main-column "знаходився в коді html-документа якомога ближче до тегу <body>, а в ідеалі взагалі йшов відразу за ним?
