Приветствую Вас, дорогие друзья, на блоге сайт. Большинство пользователей воспринимают сайты только внешне, оценивая дизайн и структуру, но за привлекательными внешними составляющими стоит множество внутренних законов и правил, которые определяются стандартами W3C. К внутренним составляющим относится html-код и CSS-стили (без отдельного функционала). Часто веб-мастеров больше заботит лишь внешнее представление сайта. Однако внимания требует и внутреннее содержимое страниц в виде html-кода, особенно когда речь идет о привлечении поискового трафика.
Для успешного продвижения в сети необходима хорошая внутренняя оптимизации сайта. Безусловно, оптимизация для поисковых систем перед началом продвижения – это важный момент. Продвижение сайта с помощью ссылок без оптимизации не будет эффективным и даже может навредить, понизив его посещаемость. При этом необходимо выявить все текущие проблемы и недоработки, которые на любом этапе могут свести на нет все достижения. Таким слабым звеном может оказаться html-код сайта.
Анализ кода сайта можно провести при помощи различных валидаторов. Для самостоятельной оценки необходимо отключить файлы со стилями и скриптами. Такими их видят поисковые роботы. Если сайт медленно загружается, отображается некорректно, а поисковые системы не могут понять логику страниц, с ним точно будут проблемы. Код ресурса следует доработать.
Оптимизацией кода сайта считается чисто технический процесс, который основан на сокращении объема кода сайта. Она необходима, прежде всего, ресурсам, для которых основным источник трафика являются поисковые системы. Главное правило – это простота. Все стили и скрипты необходимо вынести во внешние файлы. Код должен быть максимально легким и предельно понятным.
Поисковые роботы должны быстро оценивать структуру страниц. Поэтому фреймы и флеш лучше не использовать. Эти элементы утяжеляют код, делая его более сложным. Все элементы дизайна тоже вынесите в файлы css-стилей, оформив в спрайты. Именно от простоты кода зависит уровень релевантности сайта и скорость индексации страниц. Для крупных ресурсов, имеющих высокую посещаемость, оптимизация кода является обязательной процедурой. При этом оптимизировать необходимо даже страницы, размер которых не больше 1 Мб.
Основные этапы оптимизации кода сайта- Выделение заголовков h1-h6 – поисковые роботы в целом, поэтому не стоит забывать про правильное оформление текста.
- Уменьшение размера кода – чем меньше кода, тем легче и быстрее загружается страница. С недавних пор, скорость загрузки страниц, стала важным фактором ранжирования в выдаче Google, о чем было официально заявлено.
- Удаление вредоносного кода – на многих хостингах существует раздел антивирус, который сканирует файлы сайта и указывает путь к их решению. Отсутствие вредоносного кода делает сайт более предпочтительным для поисковиков.
- Внутренняя оптимизация сайта – создание уникального текста, поддерживающего необходимую плотность ключевых слов.
- – равномерно распределяет вес страниц и повышает трафик по низкочастотным запросам, особенно при пополнении нового контента.
- Добавление мета тегов – title, keywords и description используются работами и отображаются на страницах поисковой выдачи. Правильно составленные мета-теги повышают релевантность страниц и привлекают пользователей.
- Оптимизация изображений – каждой картинке должен быть подобран оптимальный формат (GIF, JPEG, PNG и PNG-24), а также прописаны alt и title.
Валидность – это соответствие кода общепринятым мировым стандартам W3C. Не валидный код сайта, содержащий множество ошибок, может стать препятствием в продвижении определенного ресурса. Если закрыты не все парные теги, возможны проблемы с отображением элементов дизайна. Но в действительности, даже сайты крупнейших поисковых систем не являются валидными на 100%. В чем причина такого несоответствия?
- Высокая степень трудоемкости при стандартизации сайта и необходимость исключительного профессионализма разработчика при валидации большого динамического сайта.
- 100% валидность html-кода не гарантирует кроссбраузерности, а также не страхует от ошибок при использовании старых браузеров.
Однако для ресурсов поменьше валидность html-кода является отличным бонусом для ранжирования по самым конкурентным запросам, к тому же покажет серьезность ресурса.
Оптимизация каскадных таблиц стилей
Как и оптимизация html-кода, оптимизация стилей (css) является не менее важным мероприятием, которое упускается из виду многим веб-мастерами. Оптимизация css кода также ускоряет загрузку страниц сайта и экономит трафик. Поскольку css-файл весит до 100 Кб, многие веб-мастера не видят необходимости в его оптимизации, но если подумать, сколько трафика экономится при оптимизации файла в год, вы поймете, насколько ее недооценивали.
Оптимизировать CSS можно вручную или с помощью специальных сервисов. У каждого варианта есть недостаток. При ручной оптимизации кода сайта можно многое упустить из виду, потратив при этом много времени. Однако машинная оптимизация может удалить строки, без которых дизайн может отображаться некорректно.
Настройка кодировкиЕще одним моментом, влияющим на продвижение сайта , является кодировка. Русскоязычный текст будет корректно отображаться только при условии правильной настройки кодировки, например, Windows-1251 или utf-8. При неправильной кодировке контента, знаки и символы будут искажены, что приведет к потере посетителей и замедленной индексации.
Проблемы с кодировками характерны для старых ресурсов, где страницы создавались в инструментах типа Блокнот, а код сохранялся во множестве различных форматов. Некоторые современные браузеры не в состоянии распознавать такие кодировки.
Внутренняя оптимизация сайтаВ большинстве случаев грамотная внутренняя оптимизация ресурса может вывести сайт на лучшие позиции поисковиков без существенных усилий и работы со ссылочными биржами. Важна каждая мелочь, влияющая на его позиции. Постарайтесь создать такую структуру, которая будет понятна и пользователям, и поисковым системам. Многостраничные порталы должны содержать систематизированные разделы, в которых все страницы находятся не дальше 3-4 кликов. Желательно использовать навигационную цепочку и удобные для человеческого восприятия веб-адреса. К сожалению, не все скрипты CMS обладают таким функционалом.
ЗаключениеТехнический аспект успешного продвижения сайта решается за счет оптимизированного html-кода. Поисковые машины оценивают страницы сайта иначе, чем пользователи, поэтому чистый валидный код, способен подтолкнуть ваш ресурс вверх в поисковой выдаче, где всего несколько позиций иногда оказываются решающими.
Надеюсь, материал будет полезен моим дорогим читателям. Подписывайтесь на обновления блога. Буду благодарен за нажатии кнопочек и репост данного материала. Увидимся в следующих статьях. Всем удачи.
Заметка: активирована адаптивная версия сайта, которая автоматически подстраивается под небольшой размер Вашего браузера и скрывает некоторые детали сайта для удобства чтения. Приятного просмотра!
Здравствуйте. Сегодня мы продолжим тему оптимизации HTML макета сайта , которую начали в статье о .
Давайте сначала разберёмся, почему это важно и затем перейдём к практическим советам.
Правильно сделанный (свёрстанный) шаблон сайта:
- Может значительно ускорить загрузку страниц (особенно, если до этого всё было запущенно);
- Упростит попадание ваших страниц в ТОП поисковой выдачи (не только из-за быстрой загрузки);
- Увеличит ваши шансы на полную кроссбраузерность, то есть одинаково правильное отображение сайта во всех браузерах;
- Даст небольшую гарантию, что по истечении множества лет вам не придётся переделывать ваши сайты под новые браузеры (или под новые версии старых браузеров).
Предлагаю идти от простых вещей к более интересным.
Часть 1. Соблюдайте HTML и CSS стандартыНа всякий случай скажу, что кроме HTML и CSS мы ещё можем оптимизировать JS и PHP части наших сайтов, которые являются более ресурсоёмкими и значительнее замедляют скорость загрузки страниц. Однако кроме скорости загрузки страниц, JS и PHP составляющие никак не влияют на продвижение сайта (лишь бы не ломали его), в отличие от HTML разметки, то есть шаблона сайта.
1.1 Всегда закрывайте теги.В том числе те, которые закрывать не обязательно, даже если вы ненавистник XHTML стандарта, лучше придерживаться этого правила. Пример:
- Пункт списка
- Пункт списка
- Пункт списка
Каждый тег li закрыт, хотя это и не обязательно.
1.2 Соблюдайте правильную вложенность тегов.По принципу: первым открылся — последним закрылся. Пример как не правильно:
текст
Как правильно:
текст
1.3 Никогда не описывайте CSS и JS внутри HTML макета и атрибутов тегов.Никогда! Другими словами, забудьте о существовании атрибута style и тега style :
текст
p{ color:red; font-size:20px; text-align:center }Описывайте все стили в отдельном файле.css
Можете использовать атрибут style, только динамически отрисовывая его с помощью яваскрипта по какому-нибудь действию. Например, если по клику на картинку, нужно изменить цвет всего текста на странице, то только в таком случае можете динамически создать атрибут style с нужными значениями для нужного тега (в данном примере – для body). Почему? Потому что поисковые роботы его всё равно не увидят и никто (в том числе пользователи) не загрузят лишний код, так как действие происходит уже после полной загрузки страницы.
Тем не менее, в таких случаях я всё равно рекомендовал бы добавлять заранее описанный CSS класс нужному тегу, нежели добавлять ему атрибут style. Это как минимум удобней для последующего редактирования.
Всё то же самое относиться и к JS, весь JS-код должен быть в отдельном файле , а не внутри вашего макета или ещё хуже — среди атрибутов тегов.
1.4 Забудьте о Caps Lock и заглавных буквах.Пишите все теги, атрибуты и их значение строчными (маленькими) буквами, это же касается и таблиц стилей CSS.
Почти всё описанное выше есть в официальной спецификации HTML и CSS и относится к валидности документа .
Таким образом, я должен отметить, что придерживаясь W3C стандартов, то есть, соблюдая валидность документа — вы получаете следующие SEO преимущества:
- Чистый код, а, следовательно, и дополнительное доверие поисковых систем к вашему сайту;
- Ускоренная загрузка страниц, так как браузеру не приходится тратить время на отладку невалидного документа.
Однако не стоит зацикливаться на валидности, вы должны стараться максимально её придерживаться, однако не в ущерб всему остальному (времени, функциональности и тд.).
Часть 2. Ускоряем загрузку страниц – один из факторов ранжирования 2.1 Указывайте настоящие размеры картинок.Здесь суть в двух вещах:
- Обязательно указывайте атрибуты width
и height
для тега img
:
Это ускорит загрузку изображений, так как браузер заранее будет знать, какой размер нужно отобразить. - Обязательно вставляйте картинку того же самого размера, который указали в атрибутах.
Если картинка больше чем вам необходимо, то не нужно экономить время на том, что её можно уменьшить по средствам 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 спрайт:
Неплохо, не правда ли? Фоновая картинка одна на все элементы, мы только двигаем её и подставляем в фон определённого элемента нужную часть картинки благодаря свойству 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 подключался один единственный файл:
...
Это может заметно ускорить загрузку ваших страниц, так как снизит количество запросов к вашему веб-серверу. Расположение JS файла внизу страницы отложит его загрузку и обработку, что ускорит вывод основной части страницы. И не забудьте сократить (сделать компрессию) ваш конечный JS файл.
2.6 Размещайте CSS файлы правильно.Файл CSS, который, кстати говоря, тоже должен быть одним единственным (по тем же причинам), нужно размещать в коде наоборот, как можно выше!
Но не нужно размещать его выше тега title, он самый главный для SEO и лучше его оставить в самом верху. Лично я подключаю CSS файл сразу после тега title и всех мета-тегов, а уже после него можно подключить, например, фавикон (иконка сайта во вкладке браузера) и тд.
Часть 3. Правильная SEO вёрстка макета 3.1 Код навигации сайта.Вся навигация сайта (меню, хлебные крошки, списки производителей в интернет-магазинах и тд.) должны быть реализованы с помощью ненумерованных списков (теги ul, li), а не с помощью тегов div и a.
Во-первых, такое написание меню считается хорошим тоном, во-вторых, поисковым системам будет легче разобраться, где и как у вас устроена навигация, так как они привыкли к конструкциям с ненумерованными списками, а не к блокам с бездумным перечислением ссылок. Пример как правильно:
3.1.1 Тонкости горизонтального меню.
Если вам необходимо реализовать горизонтальное меню, то я хочу вам дать 2 бесплатных совета:
- Никогда не используйте для этого CSS-свойство float (плавающий, вызывает обтекание его другими элементами), вместо него используйте следующий код: ul.menu li{display:inline-block;}
- В коде не нужно начинать каждый новый пункт меню с новой строки, как в примере выше. Лучше написать всё в одну строчку и регулировать расстояние между пунктами с помощью margin . Пример:
Перенос строки в HTML равняется пробелу, то есть если вы в коде между пунктами меню ставите Энтер, то у пользователей на странице сайта между ними появятся пробелы. Что тут плохого? У каждого браузера может быть разная ширина пробела, а некоторые могут его вовсе проигнорировать. В итоге, ваш сайт будет смотреться везде по-разному, а иногда (по собственному опыту) это может даже сильно исказить дизайн.
Поэтому у меня есть моё собственное правило при вёрстке: между любыми (не только в меню) inline-block элементами не должно быть пробелов и переносов строк! Заодно это незначительно, но уменьшает общий вес ваших страниц, ведь как я уже писал: 1 символ (в том числе пробелы и переносы строк) = +1 байт к весу ваших страниц.
3.2 Атрибут alt у картинокОбязательно указывайте атрибут alt в теге img:
Во-первых, это требуется, если вы хотите пройти проверку на валидность (в 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.
Яндекс пишет:
Чтобы помочь Яндексу правильно выделять быстрые ссылки, текст в теге для ключевых страниц должен совпадать с её названием (с заголовком страницы, выделенным, например, тегом ) и с текстами ссылок, указывающих на эту страницу.
3.5 Используйте все возможности форматирования текста.Мы уже выяснили, что поисковые системы любят сайты, имеющие чёткую, понятную и правильную структуру. Поэтому помимо заголовков, вы должны использовать как можно больше других возможностей:
- Используйте нумерованные и ненумерованные списки (ul, ol);
- Заключайте основной текст не в теги div, а в теги параграфов: p;
- Сопровождайте текст картинками и видео;
- Рисуйте HTML таблицы;
- Используйте (в меру!) теги логического выделения текста: strong, em, u.
В description запишите доступным языком, о чём ваша страница, не нужно стараться заключить в него как можно больше ключевых слов. Составляйте description для людей, думайте только об этом, иначе вы можете только навредить себе переоптимизацией. К мета-тегу keywords относится всё то же самое. Вот официальная страница Яндекса, на которой написано как правильно составлять мета-описание сайта: читать в новом окне .
Возьмите на заметку: не используйте лишних мета-тегов (это бессмысленно), максимум три: keywords, description и мета-тег для обозначения кодировки сайта:
Если ваша 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 параметра:
- Сколько нужно пользователю скролить (прокручивать) страницу до релевантного (по мнению поисковых систем) содержимого;
- Как высоко в коде (близко к началу) находится релевантное содержимое.
И если второй пункт, скорей всего не сильно влияет на позиции, то на первый пункт точно стоит обратить пристальное внимание при построении структуры и дизайна сайта.
Яндекс пишет:
- Основная суть документа должна быть понятна уже на первом экране браузера.
- Не рекомендуется использовать элементы оформления, делающие неочевидным доступ к тексту для пользователей - окна прокрутки, скрытые выпадающие блоки и т.п.
У Гугл тоже есть специальный алгоритм под названием , который определяет, как далеко нужно прокручивать ваш сайт, чтобы дойти до полезной (релевантной запросу) части страницы. Следующая картинка иллюстрирует действие этого алгоритма, алгоритм проверяет на среднестатистическом разрешении экрана (1024*768):
Также обе поисковых системы обращают своё пристальное внимание на количество рекламы и баннеров на первом экране браузера.
Запомните, чем дольше нужно прокручивать страницу до основного содержимого, тем меньшее предпочтение ей будет отдаваться, по сравнению с конкурентами, у которых главная часть текста видна в самом начале страницы.
По этому поводу пару полезных советов:
- Делайте шапку сайта как можно меньше по высоте (пример как не надо : этот блог);
- Старайтесь не захламлять сайт рекламой;
- Если в двух колоночном макете не можете определиться: справа или слева от основной колонки поставить дополнительную – всегда ставьте справа. Поисковые роботы, как и люди, смотрят на ваш сайт слева направо, а значит лучше, чтобы основное содержимое было слева!
Теперь немного о втором пункте. На этом блоге до вывода основной части, то есть текста статей – ровно одна строчка кода (хотя и длинная), вторая строка – это начало первого абзаца статьи. Как я уже сегодня писал: в идеале весь сайт должен быть одной строкой, и желательно, чтобы основной текст находился как можно ближе к её началу.
По этому поводу есть ещё одна хитрость. К примеру у нас есть 2 колонки сайта – основная и дополнительная. При этом несмотря на SEO, нам очень хочется, чтобы дополнительная колонка была именно слева, ничего смертельного в этом нет. Однако в таком случае весь код и вся информация из дополнительной колонки (левой) будет выше по коду, чем основная часть, и мы в силах это исправить!
Для этого мы будем использовать CSS свойство float. При создании HTML макета мы основную колонку (правую) разместим всё-таки слева от дополнительной (выше по коду):
Основная часть сайта. Дополнительная колонка слева.
А теперь с помощью CSS поменяем их местами:
#text{float:right;} #left{float:left;} .clear{clear:both;} /* запрет обтекания */
Думаю, вы поняли суть. Третьи строки в обоих фрагментах кода я мог бы опустить, так как это уже детали вёрстки, которые выходят за рамки данной статьи. Однако эта подсказка поможет сократить возможные проблемы у начинающих верстальщиков, особенно у тех, кто первый раз услышал о CSS свойстве float, а тем более clear.
Часть 5. Google Page SpeedGoogle Page Speed — это замечательный онлайн сервис от Google, а также плагин для Chrome и Mozilla, который станет для вас незаменимым помощником при анализе вашего HTML + CSS шаблона сайта. Он подскажет вам все недостатки и что немаловажно — даст конкретные пути решения.
Также он является тем самым сервисом, который я люблю использовать для сокращения HTML, JS и CSS кода, после его использования 100% работоспособность гарантируется.
Просто начните работать с Google Page Speed и вы заметно повысите свой уровень в правильной клиентской оптимизации шаблона сайта.
Спасибо за внимание. Удачного дня и до встречи!
Мы выпустили новую книгу «Контент-маркетинг в социальных сетях: Как засесть в голову подписчиков и влюбить их в свой бренд».
Существует масса способов продвинуть сайт. И хороший сеошник знает все эти способы, ну, или хотя бы большую часть. Лучшие сеошники цепляются за каждую возможность, которая может положительно повлиять на ранжирование в поисковиках. Сегодня мы обсудим еще один способ улучшить показатели своего ресурса. Речь пойдет о валидности кода .
Для многих не новость, но поверхностно затронем что такое html и .
HTML – аббревиатура HyperText Markup Language, что в переводе с забугорного, язык разметки . Это стандартный язык, на котором построено подавляющее большинство веб-страниц в интернете. HTML достаточно прост в изучении. В особенности если вам нужны лишь базовые знания для продвижения сайта. У языка разметки есть компаньон в лице CSS.
CSS – это язык внешнего вида страниц, написанных на HTML. Расшифровывается как Cascading Style Sheets, что в переводе - каскадные таблицы стилей. CSS в изучении еще проще, чем язык разметки. Каскадные таблицы построены по принципу: атрибут – значение; атрибут – значение и так далее. Загвоздка в том, что этих самых атрибутов очень много и все их запомнить крайне тяжело. Плюсом будет знание английского, хотя бы широкий вокабуляр.
В чем важность HTML и CSS для SEOРаботая с сайтами клиента либо с собственным сайтом, который вам сделали на заказ, нередко появляется необходимость что-либо поправить, подвинуть, изменить. И тут базовые знания html пригодятся.
Дальше код страницы должен быть валидным, иными словами, соответствовать принятым стандартам. Поисковые роботы эти стандарты знают и, сталкиваясь с невалидным кодом, могут неправильно распознать контент страницы и сделать плохие выводы. Вплоть до исключения страницы из индекса. Чтобы понять, правильно ли написан код страницы, есть ли в нем ошибки и поймет ли его поисковая система – нужно владеть базовыми знаниями html и css.
Что такое теги в HTMLИтак, что такое тег – это своеобразная метка или элемент языка, который сообщает браузеру, как нужно интерпретировать содержание того или иного элемента, чтобы правильно отобразить информацию на странице. Все они пишутся в треугольных скобках . Существуют парные теги и одиночные. Парные имеют второй, закрывающий тег со слешом внутри:
…содержание…
Закрывающий тег показывает браузеру, где оканчивается содержание.
Многие теги обладают свойствами, а те – значениями. Свойства прописываются внутри квадратных скобок открывающего тега, а значение указывается после знака = в кавычках “…”. Конструкция такая:
…Содержание…
Пример с нашего блога:
…много всего…
Главные три html тега, которые вы встретите в любом документе- Первый это … - этот тег сообщает вашему браузеру, что дальше будет идти документ формата HTML.
- Вторым станет … - внутри данного тега расположена служебная информация для браузеров и поисковых машин, не видимая для пользователя. Исключение: … - заголовок страницы, о нем поговорим ниже.
- Третий - … - видимая для пользователя часть страницы. Внутри располагается весь контент: текст, картинки, видео и так далее.
Внутри содержатся два основных тега: и .
В , как уже говорилось, может входить достаточно много других тегов. Разберем основные из них, полезные для SEO:
1. заголовок страницы, который виден, если навести на вкладку в браузере. Также тайтл возглавляет сниппет страницы в результатах поиска. Один из важнейших для SEO оптимизации HTML тегов.
2. Тег получил название мета-тег, нас интересуют его свойства. Описание страницы, часто используются поисковиком в формировании сниппета. Иногда описанием сниппета становятся фрагменты текста на странице, более подходящие под запрашиваемую пользователем фразу.
Итак, мы указали два свойства.
- name=”description” – означает, что следующее свойство
- content=”…”, является описанием. Тогда, когда content=”…” содержит текст самого описания.
- Обратите внимание – тег непарный.
3. отвечает за связь с внешними файлами, вроде шрифтов, а чаще стилей. Как и остальные теги, обладает рядом атрибутов. Подключить файл со стилями можно с помощью конструкции:
Конструкция, где rel= атрибут и его свойство “stylesheets” (что в переводе - таблица стилей)
4. Атрибут тега под названием Canonical. Конструкция такова:
Суть в том, что указав канонический адрес страницы, мы можем обезопасить себя от нежелательных дублей. К примеру, на вашем сайте есть две очень похожие страницы, либо вообще одинаковые. Но обе нужны. Вы можете написать в каждой странице канонический (главный) адрес. Тогда поисковые системы будут оценивать только одну страницу, адрес которой будет указан в конструкции выше.
Теги в теле документа ...Как уже говорилось, в находится видимая для посетителя информация. Перейдем сразу к главному:
текст ссылки
*Нежелательные ссылки можно закрывать атрибутом rel=”nofollow”, добавив его к другим атрибутам. В таком случае робот не будет переходить по этой ссылке. Добавив атрибут rel=”noindex”, вы скажите поисковику, что данная ссылка не должна индексироваться поисковым роботом.
10. Один из самых распространенных тегов .... Это слой, которому можно указать определенные параметры отображения на странице с помощью атрибута class=”значение”. А значит, все что расположено между и будет перенимать эти параметры.
Несколько важных моментов, не вошедших в основную статью:
- Всегда закрывайте парные теги. Не закрытие какого-либо тега может привести к тому, что весь последующий код не будет понятен поисковому роботу.
- Следите за правильной вложенностью тегов. Иногда это может выглядеть запутано. Просто придерживайтесь принципа:
Открылся первым - закрылся последним.
- Следите, чтобы в html коде не было стилей. Обычно они закрадываются в теге ... или атрибутом в других тегах style=”color:...” и так далее. Если такие строки встречаются в коде вашего клиента или вашего сайта - выносите стили в отдельные файлы.css и подключайте их с помощью конструкции:
Между тегами ...
- Пишите все теги и атрибуты маленькими буквами
- Не используйте много выделений текста, вроде и
- Заполняйте атрибут alt=”...” у картинок в теге
- Используйте понятные названия картинок. Например,
- Проверяйте валидность кода html на наличие ошибок с помощью сервисов, вроде validator.w3.org
- Следите, чтобы ссылки навигационного меню были оформлены обычным тегом
- Всегда следите, чтобы была последовательная структура заголовков и на страницы был только один
Изучение html и css - процесс достаточно длительный. В этой статье я постарался понятным языком изложить основные моменты на которые нужно обращать внимание при продвижении сайта. Пользуйтесь советами, читайте код и делайте правильные выводы, цепляясь за очередную возможность получить плюсик в карму сайта от поисковиков.
При начальной разработке сайта их владельцы самое большое внимание уделяют его внешнему восприятию и быстрому запуску. Сразу или через несколько месяцев после запуска возникает вопрос о том, как привлечь больше клиентов. Еще через некоторое время к верстальщику и программисту в работу приходят тз по внутренней оптимизации сайта, где оказывается, что часть написанного кода нужно переписать. Поэтому в этом посте мы поговорим об оптимизации html, css и js кода сайта при его начальной разработке, что позволит клиенту сэкономить деньги, а разработчикам нервы.
Оптимизация js и cssДля начала разберемся из css и js. Для чего нужна оптимизация css и js?
Около 50% пользователей уходят из сайта, если он грузится больше 3 секунд и при каждой дополнительной секунде конверсия сайта падает на 7%. Также скорость загрузки сайта является одним из факторов ранжирования.
Первое из чего нужно начать, это послушаться рекомендаций Google. Css и js код не должен содержаться в html коде сайта, его нужно вынести в отдельные файлы. Исключением являются небольшие инлайновые стили с 1-2 значениями. Число подключаемых файлов нужно максимально уменьшить, в идеальном случае оставив по одному подключаемому css и js файле. Подключение файлов js следует перенести в конец страницы (перед отображением страницы, браузер должен выполнить ее синтаксический анализ и если при этом он обнаруживает внешний скрипт, он должен его загрузить, а это лишний цикл операций, который замедляет показ страницы.
Также для ускорения загрузки js, css файлов и картинок желательно использовать кеширование и сжатие в формат GZIP.
SEO-верстка сайта: оптимизация html кода или как сверстать так, чтоб потом не переделыватьДля правильной будущей оптимизации html кода рассмотрим все теги и как они влияют на SEO.
Блок :- указывает название страницы, которое размещается во вкладке браузера и в поисковых системах. Самый важный тег, в плане влияния на ранжирование сайта.
- позволяет задать описание страницы, которое появляется в поисковой выдаче под названием. Имеет значительно меньшее влияние на ранжирование, но помогает повысить CTR (отношение числа кликов кчислу показов) страницы. Если мета-тег description заполнен, это не гарантирует, что в выдаче будет показано именното, что там написано, так как поисковые системы могут взять описание из контента. Но все же лучше настроить генерацию тега и не думать, какую часть текста ПС возьмут для описания.
- указывает поисковым системам, по каким запросам релевантная страница. После появления этого тега, ему придали большое влияние на ранжирование страниц. Оптимизаторы могли спокойно продвигать страницу слюбым товаром интернет-магазина, например, по запросу «скачать реферат по истории» или по другим темам, которые давали сайту посетителей, но не клиентов. Сейчас влияние данного тега на продвижение точно не известно иочень многие его просто игнорируют, в том числе чтоб не навредить странице.
(берется одно из значений, index или noindex, follow или nofollow) — запрет на индексацию страницы (noindex) и запрет на индексацию исходящих ссылок на странице (nofollow) поисковыми системами. Значение index и follow используются вместе со значениями запрета индексации, так как по умолчанию индексация страниц и ссылок разрешена. Использовать данный тег следует осторожно, чтоб не увидеть через некоторое время нулевой трафик из поисковых систем.
- позволяет привязать несколько одинаковых страниц по содержанию, но с разными URL, к одной странице, для улучшения ее рейтинга. В большинстве случаевиспользуется для динамических страниц, на которых размещен одинаковый контент, например, страницы сортировки вкаталоге товаров или при работе с блогом, где одна статья может находиться в разных разделах и иметь разные URL.
и - теги позволяют указать на страницах пагинации предыдущую и следующую страницы для поисковых систем, если материал разбит на несколько частей и находится на разных урлах.
Блок :- - заголовки на странице. Тег следует использовать 1 раз, как и он указывает основное содержание страницы, но имеет меньшее влияние на ранжирование в поисковой выдаче. Как правило, для интернет-магазинов в теге указывается на страницах категорий и товаров названия этих категорий итоваров, для информационных страниц — название, которое заинтересует читателя плюс, по возможности, ключевые слова.
Теги - должны соблюдать логическую структуру. Заголовок содержать заголовки ,в которых заголовки и т.д. Использовать их желательно только в текстовом содержании страницы (например, для разбития основного контента на странице, но не для блоков, которые выводятся на всех страницах сайта). Если взять во внимание, что тег помогает повысить значение слов при ранжировании, заключить в него весь текстна сайте и поправить с помощью стилей, чтоб его можно было читать, то никакого преимущества это не даст, а только пойдет во вред такой странице.
, , - предназначены для акцентирования внимания на некоторых фразах и словах в описании страницы, статьи, новости и т.д. (в том числе повышают значимость этих слов при ранжировании). Не следует использовать их для верстки тех элементов страницы, которые повторяются, например, на всех товарах. Для этого лучше применять css. Хотя и точно не известно, имеет ли влияние повторяющейся на всех страницах сайта слово или фраза, внутри, например, тега , но лучше использовать теги по их назначению. Думаю ПС это оценят.
В этом случае для очищения кода, необходимо перенести стили в cтилевые таблицы – CSS. Эти таблицы (точнее ссылка на файл css), как правило, находятся между тегами head. Стили, которые находятся в различных тегах сайта, необходимо конвертировать в классы.
Для перемещения в стилевые таблицы, копируем содержимое стиля в CSS, предавая ему класс с названием “newclass”.
Newclass {width:10px; border:10px;}
В итоге, для переноса нового класса из CSS в таблицу:
Таким образом, можно существенно сократить код, предавая различным таблицам необходимые классы и прочее.
Удаление теговПорой встречаются такие сайты, которые содержат теги, скопированные вторично, после установки дизайна.
Чаще всего негативное воздействие на сайт оказывают теги:
Устраняем ошибки html-кодаНе менее важное значение на ранжирование сайта оказывают ошибки кода. В процессе верстки, редактирования кода или правки стилей, часто забываешь закрыть таблицу, тег или стиль.
Фрагмент незакрытого кода:
Закрытие внешних ссылок:Внешние ссылки – это процесс качественного взаимодействия между ресурсами. Вместе с комментариями пользователей, вследствие нелегальных действий или установки сторонних скриптов, Вы поневоле можете добавить внешние ссылки. Это особенно опасно, если сайт несет вредную информацию. Лучший способом устранения неполадки – удалить внешнюю ссылку. Другим вариантом является заключение ссылки в тег “noindex”, а также прописать параметр “nofollow”. Например:
Структура html-кодаОчень действенный способ, который поможет быстро редактировать различные отделы сайта одномоментно. Этот способ предусматривает создания структуры по типу глобальных блоков. При этом код сайта разделяется на разделы: верхний, тело, боковые (1 и более), низ. Каждый раздел может редактироваться независимо от других.
К примеру, глобальный левый блок сайта будет именоваться:
"$GlOBAL_BLEFT$"
следовательно, этот блок можно встроить в корневую структуру кода, а также удалить точечно:
"$GLOBAL_BLEFT$"
Многократные тестирования показали, что в процессе оптимизации этих компонентов html-кода можно достичь стойкого прироста позиций и существенно улучшить индексацию сайта.
В статье приведены лишь основные примеры, для начала проверьте свой код с помощью онлайн анализаторов, которых очень много в сети Интернет.
Один из таких анализаторов – валидатор W3C , которым легко можно проверить сайт на ошибки HTML, однако не стоит очень сильно углубляться в исправление, достаточно свести ошибки к минимуму. Однако, для перфекционистов, данный сервис будет весьма полезен.
Прочитано раз: 5 352
