Сео коды. Выбираем лучший онлайн-сервис по сжатию CSS. Оптимизация картинок под web
SEO-специалистам уже давно известно, что наряду с внешними и внутренними факторами ранжирования сайтов в поисковых системах на позиции в SERP’е влияют и т.н. поведенческие (пользовательские) факторы. Несмотря на это последним уделяют недостаточное внимание. Причин этому множество. Во-первых, не все SEO-компании, особенно занимающиеся «конвейерным» клиентским продвижением, могут выделить ресурсы на анализ влияния поведенческих факторов, мониторинг показателей отказов и количество просмотров страниц, анализ трафика, идущего на сайт и т.д. Во-вторых, специалисты среднего уровня до сих пор работают по принципу «сделал — купил ссылки — жду позиции». В третьих, некоторые оптимизаторы не уделяют внимание пользовательским факторам по той причине, что не считают это нужным, ленятся или просто не знают о них.
Тем не менее, на оптимизаторских конференциях представители Яндекса дают понять, что роль поведенческих факторов становится для поисковой системы все более значимой. Среди множества критериев, влияющих на эти факторы, является оптимизация кода страниц сайта , которой, к сожалению, очень часто не уделяют внимания при организации продвижения интернет-ресурсов.
Зачем это нужно?
Ответ прост. Оптимизация кода не только ускорит загрузку страниц, но и сделает сайт более дружелюбным к поисковым системам — код станет чистым и красивым, а его элементы будут располагаться в нужных местах. Кроме того, изначально скептически воспринятое оптимизаторами в ноябре 2009 заявление Google о том, что скорость загрузки web-документа является одним из факторов ранжирования, только подтверждает тот факт, что оптимизацией кода страниц следует заниматься. Тем более, что на этот фактор оптимизатор может влиять сам.
Составляющие оптимизации кода
Ни для кого не секрет, что поисковые роботы не видят дизайн страницы — они читают её код, причем делают это также как и человек — сверху-вниз, слева-направо. Информации, находящейся вверху кода тех или иных элементов, поисковые системы дают больший приоритет. Таким образом, при SEO-вёрстке наиболее важные элементы или страницы следует располагать выше второстепенных элементов. Ниже даны некоторые рекомендации для оптимизации кода страниц, которые позволят сделать кампанию по его продвижению в поисковых системах более эффективной.
1. Title, Description и Keywords — располагаем сразу после тега < head>.
На поведенческие факторы существенное влияние может оказать некроссбраузерная верстка. Сайт должен одинаково хорошо отображаться во всех современных браузерах при разных разрешениях. Довольно часто можно увидеть, когда браузер Internet Explorer некорректно отображает содержимое сайта, причем отличия с Firefox и Opera кардинальные. Если на таком сайте процент пользователей IE составит 20%, то вероятность того, что показатель отказов значительно увеличится, возрастает. Пользователь не проведет много времени на таком сайте, вероятно, сразу же закроет вкладку и никогда не вернется на сайт повторно. Верстку сайта следует поручать профессионалам, для которых понятия «валидность» и «кроссбраузерность» — не пустые звуки.
8. Оптимизация картинок под web.
Этот пункт относится больше к юзабилити, но не сказать о нем нельзя. Некоторые вебмастера не уделяют оптимизации картинок под web должного внимания. Тем не менее, каждый пользователь интернета хоть раз попадал на сайт, где текстовый контент загружался быстро, а графические изображения открывались с огромным трудом.
Выяснялось, что дело не в не самой быстрой скорости подключения к интернету, а в том, что кажущиеся мини-картинки на самом деле имеют огромные разрешения, но вместо того, чтобы сжать изображение в графическом редакторе, верстальщик в коде страницы прописал атрибутам картинок «width» и «height» значения, в 15 раз, меньшие, чем реальное разрешение фотографий. Иногда доходит до того, что в веб-документе используют изображения в формате.bmp, как известно, имеющие гораздо большие объёмы в сравнении с идентичными изображениями в форматах.jpg или.gif. В качестве примера можно привести страницу о популярном сейчас биатлоне — http://magdalena-neuner.narod.ru/nowfoto.html . Чтобы посмотреть в подгружаемом все фотографии, пользователь вынужден будет скачать порядка 20 Мб трафика, поскольку 90% изображений там выполнено в bmp-формате.
Как быть и что делать в нынешних условиях?
В большинстве случаев, на практике выходит так, что клиент заказывал создание сайта в одной веб-студии или у фрилансеров (к сожалению, данные категории не всегда имеют правильное и современное представление о SEO-верстке), а продвигать решил в одной из SEO-компаний, которые, как правило, такие проблемы не решают и продвигают то, что есть своими «конвейерными» методами. В успешной SEO-кампании в Яндексе в нынешних реалиях мелочей не бывает. Поэтому специалисты, оказывающие профессиональные услуги продвижения сайтов по высококонкурентным запросам обязательно должны иметь в своём арсенале отдел программистов и верстальщиков, а также оказывать и услуги по созданию сайтов. Заказчикам, в свою очередь, желательно ориентироваться на подрядчиков, успешно занимающихся и созданием, и продвижением сайтов одновременно или, как минимум, имеющих хорошую техническую поддержку.
Стоит отметить, что оптимизация кода страниц не гарантирует повышения позиций по ключевым запросам, но не уделять этому внимания в условиях MatrixNet и поведенческих факторов нельзя, а работать над этим нужно уже сейчас.
Техническая оптимизация – правильная настройка сайта для максимально качественного взаимодействия с поисковыми системами. Ее необходимо делать сразу после установки движка и во время работы с первичным заполнением сайта контентом. Сейчас я расскажу, на какие важные аспекты оптимизации нужно обратить внимание и сделать в первую очередь.
Содержание статьи:
Правильная организация структура сайта
Любой сайт должен иметь максимально удобную структуру. Как и люди, поисковые системы смотрят на сайт и оценивают удобство его использования. Любой интернет-ресурс должен иметь вложенность не более трех страниц. То есть с главной, максимум в три клика, у пользователя должно получиться добраться до любой страницы.
Наиболее правильной и простой структурой для информационного сайта будет:
Категории определяют разделы. Если сайт о различных болезнях, то категории могут быть такие: Кардиология, Неврология, Хирургия…
Для более сложных проектов, охватывающих больше информации, структура может быть:
Таким образом расширяется структура, но остается понятной и логичной. Пример, на этом сайте в категории Кардиология могут содержаться подразделы Болезни сердца и Болезни сосудов. Не запрещается размещать материал, относящийся к двум и более разделам.
Например, материал о Гепатите может находиться в категории Гепатология и Вирусология одновременно. Главное — соблюдать иерархию материалов. Построение правильной структуры продумывается на этапе планирования и сбора семантического ядра.
Правильная перелинковка страниц сайта
Более углубленный материал о перелинковке я уже готовлю и в скором времени выложу. Перелинковка – простановка ссылок внутри сайта для удобной навигации пользователей и передачи веса страниц.
Чтобы увидеть пример перелинковки, откройте любую статью в Википедии. Каждая содержит много ссылок на другие статьи. Есть даже шутка, что с любой статьи в Википедии в пять кликов можно добраться до статьи о Гитлере. Конечно, на вашем сайте в статье не должно быть по 20 ссылок на другие материалы, но 2-4 ссылки нужны.
Важным свойством перелинковки является передача веса на другие страницы. Когда все страницы будут связаны друг с другом, то вес распределиться равномерно и общие позиции будут расти. А когда продвигается одна конкретная страница, то тогда передается вес с других материалов на нее. Чтобы было более понятно, предположим, что нужно продвинуть страницу медицинского сайта с услугой «Осмотр педиатра». Для этого мы в блоге напишем несколько статей о детских болезнях и везде, где будем упоминать о необходимости осмотра педиатром, поставим ссылки на нашу услугу.
Добавить хлебные крошки и улучшить юзабилити
Хорошая структура ничто, если ее не видит пользователь. Во главу угла при создании сайта необходимо ставить его полезность для конечного человека и удобство использования. Если зашедший к вам на сайт, потеряется и не сможет найти для себя еще интересные материалы, значит, у вас проблемы с юзабилити.
Хлебные крошки – это навигационные элементы, которые показывают, где находится пользователь относительно всей структуры площадки. Эти элементы обычно размещаются перед заголовком статей и позволяют в один клик перейди на главную, в категорию размещения статьи или в ее подкатегорию.
Хлебные крошки можно реализовать с помощь простых плагинов или сделав правки в коде. Если они не предусмотрены используемым шаблоном. А вот над юзабилити придется поработать. Нужно правильно продумать меню. Сделать его визуально заметным и удобным для использования. Продумать разные мелочи, ведь даже обычная кнопка подъема вверх страницы намного облегчает жизнь пользователя, позволяя в один клик перейди к шапке, а не прокручивать уже прочитанный материал роликом.
Оптимизация кода сайта html, js, css, php
Сегодня пользователи стали нетерпеливыми и если сайт открывается хоть на секунду дольше, чем у конкурента, они уйдут к нему. Об этом в курсе и поисковые системы, использующие скорость загрузки как один из факторов ранжирования. Поэтому важно сделать сайт максимальнго быстрым. Этому не способствуют тяжелые картинки, невалидный код верстки, неправильные ответы сервера.
Оптимизация кода сайта
Сейчас я расскажу об оптимизации кода в общем, чтобы вы получили начальное представление. Также подготовлю материал, где подробно расскажу и сделаю пошаговое руководство по оптимизации кода. Итак, чтобы оптимизировать код и сделать сайт наиболее привлекательным для поисковых систем, нам нужно:
- Сжать картинки на, уменьшив вес, что сделает загрузку быстрее. Нередко неопытные вебмастера загружают на сервер картинки большого разрешения. Которые потом посредством CSS сжимаются для отображения. Верно же загружать картинки в том разрешении, в котором они и будут показываться на странице. Можно вручную сжимать картинки, пересохраняя их в Фотошопе, или воспользоваться одним из множества сервисов, умеющих сжимать картинки.
- Оптимизировать html, js и css. Нужно сделать код страниц максимально простым. Касательно html, то убрать все комментирование кода, сделать нормальный перенос по строкам. Для скриптов js размещать их после контента, чтобы значимая информация появлялась на экране раньше, чем загрузятся скрипты. Исключение – скрипт и нужен для отображения контента. Будет нелишним помесить все скрипты в один файл. CSS – использовать таблицы стилей для всего. Любой вывод информации должен в идеале происходить через CSS, а не загружаться каждый раз громоздким кодом.
- Настроить правильные редиректы, чтобы все страницы отвечали 200. А там, где нужен редирект с переносом веса страницы, например, при смене ее адреса, отдавался код 301. Исключить ошибки 5хх, а если они повторяются, то найти причину в хостере, сторонних плагинах и тому подобном и решить ее.
Заключение
Техническая оптимизация сайта – это процесс достаточно трудоёмкий и требующий специальных знаний. Но используя общепринятые рекомендации и инструкции, настроить сайт сможет даже тот, кто вчера впервые заливал движок на хостинг.
- Читайте статьи по этой теме:
Наверняка, каждый уважающий себя оптимизатор, уделяет немало времени работе над html-кодом. Эти шаги имеют определенное практическое значения, в плане удобства для пользователей и анализа сайта поисковой машиной.
HTML ошибки могут усложнить индексацию и ранжирование страниц для определения релевантности их содержимого какому-то запросу. Обилие таких ошибок на разных страницах сайта говорит поисковикам о низком качестве всего веб-ресурса. Перечислим наиболее опасные html ошибки.
Даже самые минимальные работы по оптимизации html-кода предусматривает знания:
- Язык программирования html
- Систему управления сайтом CMS
- Знание CSS
Поисковая машина, непрерывно анализирует сотни сайтов, и даже самые гибкие параметры, могут оказать колоссальное значение при ранжировании, что не допустимо, в условиях конкуренции. Для оптимизатора, является важным уметь предвидеть и сориентироваться: какие факторы окажут ключевое значение при ранжировании.
Оптимизация, в свою очередь не одномоментный процесс, а требует терпения и грамотности, особенно при работе с html-кодом.
Этапы оптимизации кода-html:
- Формирование файла CSS
- Удаление лишних тегов
- Применение глобальных блоков
Работа с CSS:
В этом этапе, стоит перенести все стили таблиц, изображений, тела страницы, ссылок, меню и прочего, в стилевые таблицы. Это делается с той целью, чтоб код страницы стал чище, имел меньший вес.
1. Имеем следующий код: