PSD2HTML.ru -
Html верстка сайтов из дизайн макетов
- psd, ai, png
Бестабличная верстка дизайна
- xhtml, div, css
Использование XHTML / CSS для эффективной SEO кампании
Любой профессионал в области интрнет маркетинга, скажет вам, что эффективная поисковая оптимизация даст больший эффект чем другие методы, к примеру баннерная реклама или методы pay-per-click. Наиболее эффективны методы оптимизации веб сайтов – это уменьшение размера страниц, правильное, семантическое соотношение кода страницы и содержания, использование массы разнообразного, уникального контента, максимальное заполнение страниц текстом и ссылками без использования «спам» технологий.
В этой статье мы не будем рассматривать основы XHTML и CSS. Мы предполагаем, что у вас есть основные, базовые знания в этой области и определенный опыт в их использования. Если вам необходимы дополнительные навыки в этой области, советуем прочитать ALA’s CSS articles, and Zeldman’s Better Living through XHTML .
Мы собираемся сфокусировать ваше внимание на преимуществах использования XHTML и CSS техники в целях улучшения читабельности сайтов поисковыми роботами. Как добиться хорошего соотношения кода страницы к ее содержанию без увеличения размера файла, как минимизировать количество изображений на странице используя css методы.
Соотношение размера файла и содержания
Лучший способ начать оптимизацию проекта состоит в том, чтобы убедиться, что весь код доступен для чтения. Воприятие поисковых роботов отличается от человеческого восприятия, и если в вашем html слишком много «текстового мусора - спама» поисковым роботам будет тяжело определить к какой категории относится ваша страница. Улучшение структурной организации будет полезно не только для вас, но и для поисковых роботов. К примеру - пользователь воспримет как заголовок выделенный болдом зеленый текст 24 кегля помещенный в шапке страницы. Но если вы не примените правильную разметку, поисковый робот не воспримет это как заголовок.
Вместо использования подобного заголовка:
<strong><font color="#00FF00" size="24px">Main Title </font></strong>
Поместите этот XHTML код:
<h1>Main Title </h1>
И эту сторку в ваш css файл:
H1 {font-family: Arial; size: 24px;
color: #00FF00; font-weight: bold;}
Используя xhtml для объяления основного заголовка как H1 даст понять поисковому роботу что содержащийся в теге текст является заголовком страницы, а css стиль придаст ему нужную визуальную форму. Используя теги от H1 до H6 для оформления заголовков вы сообщите поисковым роботам о значимости того или иного заголовка. И не забывайте использовать одно или два ключевых слова в title страницы – иначе все ваши усилия пропадут даром.
Мудрое использование изображений
Если H1 тег поместить непосредственно после <body> тег будет учитываться многими поисковыми системами, особенно если он содержит одного или два ключевых слова. Но поисковый эффект может резко снизиться если после заголовка поместить коллаж или логотип компании, а порой это необходимо. Исользуя css можно обойти эту проблему. Мы можем поместить необходимое изображение в фон страницы. Чтобы сделать это назначьте для тэга body в вашем css файле следущее:
background-image: url(../images/logo.png); background-repeat: no-repeat; background-attachment: fixed; background-position: top left;
Поместив логотип или коллаж в фон страницы мы спрятали его от глаз поискового робота.
Надоедливые Javascript Rollovers
Все любят rollover эффекты. Даже моя безвозвратно устаревшая бабушка любит, когда имэйл линк крутится каждый раз когда она наводит на него. Используя css можно добиться rollover эффекта, что приведет к исключению из кода Javascript и уменьшит объем файла, но самое важное – это добавит больше текстового контента для прочтения поисковыми роботами. Использовании CSS для rollover эффекта отделит картинки от содержания страницы, что даст еще одно преимущество в борьбе за позиции в поисковых системах, особенно если текстовые ссылки соответствую вашим ключевым словам.
Tim Murtaugh’s Mo’ Betta Rollovers – прекрасное руководство по созданию rollover эффектов средствами css.
Wrapping it all up
Существует много путей поднять позиции веб сайта в поисковых системах. Некоторые из них чрезвычайно эффективны но экстремально неэтичны. Используя стандартные методы для улучшения читабельности, оптимизации кода страницы и ее содержания вы получите дополнительные преимущества в вашей компании по доминированию в поисковых системах.
Using XHTML/CSS for an Effective SEO Campaign by Brandon Olejniczak
Свободный перевод Vitaly Sovin
Звездное небо
Нарезка дизайна, верстка с учетом поисковой оптимизации, кроссбраузерность
дизайн | xhtml css
Шереметьево-2
Нарезка дизайна, "Резиновая" xhtml css верстка, кроссбраузерность
дизайн | xhtml css
Таггерт
Нарезка дизайна, верстка с учетом поисковой оптимизации, кроссбраузерность
дизайн | xhtml css
НИТИ ПРОГРЕСС
Полный цикл: дизайн, flash, верстка, кроссбраузерность
дизайн index | дизайн inner | xhtml css
