Простые правила разметки

Простые правила разметки

Как проверить, что вы всё сделали правильно? Что в разметке и в стилях нет ошибок и что результат соответствует макету? Можно воспользоваться разными инструментами, каждый для своих целей.

Проверить HTML #

Он проверит ваш HTML на соответствие спецификациям, а так же поможет найти простые ошибки, вроде незакрытых тегов.

Проверить БЭМ-разметку #

Инструмент построит структуру страницы, проверит БЭМ-разметку на самые простые ошибки и покажет иерархию заголовков.

Проверить CSS #

Валидация

Форматирование

Также нужен файл с правилами проверки стилей. Можно взять мой набор правил, или накликать свой используя Stylelint Config Generator.

Файл с правилами можно редактировать под ваши нужды, узнать больше о правилах можно здесь.

SASS: LESS:

Команда запускается в папке проекта.

Проверить страницу на разных размерах экрана #

Используйте эмулятор мобильных устройств, который есть в Хроме. Кнопка включения находится в панели разработчиков, вторая иконка в верхнем ряду:

В эмуляторе в выпадающем меню можно просто выбрать устройство с подходящими размерами, а можно кликнуть «Edit» и добавить свои:

Справа на скриншоте есть выпадушка с выбором типа устройства (на скриншоте Mobile), эта опция влияет на наличие прокрутки на странице. Чтобы прокрутка не отъедала ширину страницы, между Mobile и Desktop всегда выбирайте Mobile.

Там же можно скрыть устройства, которые вам не нужны.

Мой список устройств выглядит так:

Такой поход избавляет от необходимости подбирать размер окна руками, а так же позволяет быстро переключаться между вьюпортам, причём именно теми, которые нужны вам.

Не забывайте также проверять макеты на очень широких экранах (1400+), чтобы убедиться что и в этом случае страница не разваливается.

Проверить страницу на соответствие макету #

Проверить шрифты #

Панель разработчика → Network → Fonts.

Подсказка: проверьте, что в браузерах с поддержкой woff2 загрузится именно этот формат. Если грузится woff, проверьте порядок перечисления шрифтов. Браузер выбирает первый подходящий, а не оптимальный из перечисленных.

Проверить изображения #

Панель разработчика → Network → Img.

Плотность пикселей устройства можно выбрать в меню эмулятора:

Если там нет такой опции, нажмите на три точки в правой части панели устройств и включите её в выпадающем меню:

Если все адаптивные изображения содержат в своём адресе @, этот спецсимвол можно использовать для фильтрации, чтобы в панели показывались только те картинки, которые нужно проверить:

В панели устройств меняйте размеры экрана и плотность пикселей и смотрите какие изображения загрузились.

Проверить страницу на переполнение контентом #

Введите в консоль браузера команду:

После этого вы сможете отредактировать любой текстовый элемент на странице и добавить в него текст. Это позволит проверить поведение страницы в случаях когда контента слишком мало или наоборот — слишком много.

При добавлении текста элементы должны тянуться по вертикали, текст не должен упираться в края элемента или обрезаться.

Техническая оптимизация. Проверка сайта на ошибки

Содержание
1. Проверка ошибок в коде сайта
2. Проверка стабильности работы сайта
3. Проверка отображения сайта на различных устройствах
4. Возможности Google и Яндекс вебмастер
5. Проверка контента сайта
6. Программы для проверки сайта на ошибки

Техническая оптимизация сайта с каждым годом играет все более важную роль в поисковой оптимизации. Исправление ошибок на сайте может обеспечить вам значительный прирост позиций, практически без заметных вливаний денежных средств. Ну а если учесть, что влияние ссылочного фактора постоянно снижается, то проверка сайта на ошибки и их исправление просто необходимо. На самом деле для работы с сайтами существует огромное количество онлайн сервисов, я предлагаю рассмотреть те, которые крайне важны для SEO.

1. Проверка ошибок в коде сайта

Для проверки ошибок в коде сайта можно использовать сервис https://validator. w3.org/. Данный сервис позволяет проверять страницы сайтов, просто скопированные куски кода, а также загруженные файлы. Поисковая система Яндекс, например, рекомендует вебмастерам и разработчикам проверять свои сайты именно в этом сервисе. Сайт не содержащий грубых ошибок будет правильнее восприниматься всеми браузерами. Также не стоит забывать про оптимизацию кода на сайте. Оптимизированный код сайта обеспечит:

Правильное оформление мета тегов сайта, также поможет избежать проблем для SEO и обеспечит правильную индексацию сайта.

Еще сервисы для поиска технических ошибок

Продолжаем рассматривать сервисы, которые помогают исправить технические ошибки сайта.

А вот еще один сервис https://urivalet. com/, который имеет более широкий функционал. Он также позволяет проверить коды ответа сервера, просчитывает скорость загрузки страницы, получить данные о внутренних и внешних ссылках страницы. Еще сайт urivalet. com позволяет просмотреть страницу глазами поискового робота.

2. Стабильность работы сайта

Если ваш сайт работает с большими объемами трафика ежедневно, то обязательно необходимо проверить насколько ваш сервер устойчив к внезапному наплыву посетителей. Поможет вам в этом сервис https://loadimpact. com/. При прохождении теста, на ваш сервер будут посылаться запросы с нарастающей частотой. В конце эксперимента вы получите график, в котором будет показано 2 шкалы: шкала с запросами к вашему сайту и шкала со скоростью его загрузки. Если сайт при этом работает нестабильно, то возможно вас стоит задуматься о замене хостинг провайдера.

3. Проверка отображения сайта на мобильных устройствах

В эру развития мобильных устройств, адаптивность сайта под разные устройства является важной составляющей технической оптимизации. Адаптивность важна как для пользователей, так и для поисковых систем, которые даже готовы повысить ранжирование таких сайтов.

Сервис-эмулятором просмотра сайта с различных мобильных устройств – https://www. mobilephoneemulator. com/.

4. Анализ сайта на ошибки в Google и Яндекс Вебмастер

Сами поисковые системы заинтересованы в том, чтобы сайты содержали как можно меньше ошибок, поэтому они встроили в инструмент для вебмастеров много функций позволяющих обнаружить ошибки на сайте. Рассмотрим коротко функционал Google Webmaster Tool:

1. Информирование о появлении ошибок на сайте, либо о применении санкций.

Панель для вебмастеров от Яндекс содержит фактически точно такой же функционал, поэтому не вижу смысла отдельно рассматривать и его.

5. Проверка контента сайта

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

Анализ страниц сайта на наличие орфографических ошибок

Не стоит упускать из виду проверку сайта на грамматические ошибки, потому что большое количество ошибок на сайте также плохо влияет на его ранжирование. ну и конечно же отношение пользователей к сайту с ошибками может быть также негативным.

Проверка уникальности текста

В SEO много говорят про уникальность текста. Проверить насколько уникален текст на странице вашего сайта можно здесь:

Уникальность текста это конечно замечательно, но не забываем, что пользователи любят не уникальный текст по версии проверочных сервисов, а уникальный текст в плане своей новизны, актуальности, полноты, содержащим уникальные картинки, видео, диаграммы и т. д.

6. Программы для анализа сайта на ошибки

Программа для поиска битых ссылок

Битая ссылка – такая, которая ведет на несуществующую страницу. И наличие на Вашем сайте таких ссылок чревато тем, что можно растерять всех посетителей. Поэтому нужно регулярно осуществлять поиск и удаление битых ссылок.

Мониторить сайт на наличие неработающих ссылок небольшого сайта можно и без помощи дополнительных программ, полагаясь только на свою внимательность. На больших же сайтах такая задача превращается в действительно трудоемкую вещь. В довесок к этому битые ссылки могут быть не только внутренними, а и внешними. Вы не можете быть уверенны на 100%, что внешний бэклинк будет жить вечно и не пропадет в один прекрасный день.

Xenu’s Link Sleuth

Для решение такой задачки в моем арсенале есть отличная программа Xenu’s Link Sleuth, которая абсолютно бесплатна, что очень приятно, замечу. Софт также весьма функционален, хотя изначально и задумывался только для поиска битых ссылок на сайте. Пользуются ею как начинающие вебмастера, так и опытные.

Xenu поможет в в поиске:

Интерфейс у нее простой и понятный. Прописываете URL и запускаете свой сайт на проверку. Данные можно упорядочить по каждому из столбцов.

Netpeak Spider

Netpeak Spider – это еще одна бесплатная программа в Ваш список. Она станет незаменимой для составления технического аудита сайта.

Что может Netpeak Spider?

Часто юзаю эту программу, так что рекомендую, как говорится. Интерфейс приятный и удобный. Так же удобно это все экспортировать в ексель с нужными данными.

Программа для анализа доноров Fast Trust

Каждый сеошник регулярно занимается анализом ссылочной массы сайта. Алгоритмы постоянно ужесточают свои требования к ссылочному профилю ресурса, анализ приходится делать тщательней, иногда используя и по несколько сервисов. Это рутинная работа и весьма трудоемкая. Fast Trust – десктопная програмка (платная), которая позволяет быстро проанализировать все ссылки Вашего ресурса и оценить их качество. Программа использует актуальные данные самых популярных сервисов и оценивает качество Ваших доноров. Все это красиво экспортируется в таблицу.

Отсюда Fast Trust берет свои данные

А вот так выглядит интерфейс программы.

Заключение

Техническая оптимизация сайта приносит хороший результат только в том случае, если все работы по поиску и исправлению ошибок делаются в комплексе. Поэтому постарайтесь не упустить мелкие детали при при выполнении работ.

Оцени пост!

Статьи по теме

17/08/2016Как проверить сайт на наличие битых ссылокКак известно, позиции сайта очень сильно зависят от качества сайта. В свою очередь на качество сайта сильно […]Posted in Продвижение сайтов, Оптимизация сайта09/01/2017Итоги продвижения и развития блога в 2016 годуВсем привет! 2016 год оказался очень успешным в плане развития блога. Именно в этом году я покорил 1000 […]Posted in Новости, Продвижение сайтов, Интернет бизнес, Веб-аналитика18/08/2016Google Phantom 4По мнению зарубежных экспертов, не так давно, в конце июня, произошло значительное обновление одного из […]Posted in Новости, Продвижение сайтов, Оптимизация сайта

Я вот в гугле не могу найти, где отображаются внешние ссылки. Есть там вариант только понизить рейтинг…

Обратные ссылки можно посмотреть в панели вебмастера Google Webmaster Tool.

Вы еще Yazzle забыли указать, весьма неплохая программа для сеошника, платная правда, по поиску общей ссылочной массы на сайт. Там еще много функций в неё входит.

Здравствуйте.
У меня сейчас сайт https://artlavca. ru/ это старый сайт с новым контентом (раньше это был художественный сайт-теперь кулинарный).
Яндекс-вебмастер показывает какие-то ошибки со склейками или с зеркалами-мне совершенно не понятно, а мне нужно чтобы все было нормально перед раскручиванием сайта, а то окажется, что я его не раскручиваю, а “закручиваю в другую сторону”. Подскажите пожалуйста, что там неправильного с зеркалами и со склейками или наоборот-все нормально?

Скриншот с Яндекс-вебмастер сообщает:.

“artlavca. ru Сайт является неглавным зеркалом и не участвует в поиске.”

Файл robots. txt на сервере:

User-Agent: *
Disallow: */index. php
Disallow: /bitrix/
Disallow: /*?utm_source=
Allow: /bitrix/components/
Allow: /bitrix/cache/
Allow: /bitrix/js/
Allow: /bitrix/templates/
Allow: /bitrix/panel/
Host: https://www. artlavca. ru
Sitemap: https://www. artlavca. ru/sitemap. xml

Валидатор показал где именно ошибки в коде, но где найти этот самый код: в функциях темы или в файловом менеджере на хостинге? И в одном ли файле их нужно исправлять или в нескольких? Может хоть кратко расскажите в каком файле что находится. И куда лучше новичку вообще не лезть.
Ответьте, пожалуйста.

Оптимально передать отчет кодеру, он посмотрит что из списка ошибок реально исправить и как это можно сделать.

Большое спасибо много интересного для себя узнал

В связи с переездом на https много ошибок. Интересно сколько будет склеиваться сайт.