Мне известен уже не один случай, когда из-за ошибок HTML кода сайты теряли свои позиции в поиске, а в некоторых даже оказывались под АГС () и даже в бане. Конечно ошибки ошибкам рознь и некоторые из них нисколько не влияют ни на ни на сайта. В этой статье мы рассмотрим самые опасные ошибки в коде страниц, которых следует стараться избегать, во избежание поисковиков.
Самые опасные HTML ошибки в коде
Одна или несколько HTML ошибок могут затруднить индексацию и правильное ранжирование для определения содержимого страницы какому-либо запросу, а обилие их на всех страницах сайта сигнализирует поисковым системам о плохом качестве сайта.
Самым опасным является допущение грубых html ошибок, таких как:
Незакрытые HTML теги - грубая ошибка
Самая опасная ошибка. И чем выше этот не закрытый тег находится в коде страницы тем она опаснее.
Знаю случаи когда не закрытый тег LINK
или META
в секции HEAD
понижал позиции по запросам (вернее даже не понижал, а исключал ибо страницу нельзя было найти даже в пределах 100 страниц результатов поиска).
В другом случае из-за неправильно продекларированного не закрытыми оказались все теги в секции HEAD
и некоторые на странице, что в конечном результате привело к бану сайта в яндексе.
Незакрытый тег NOINDEX - менее опасная ошибка
Любителям закрывать этим тегом (кстати он не валиден) содержимое страниц нужно очень внимательно к ним относиться. Поскольку оставив хоть один из них не закрытым вы запретите к индексации все содержимое вплоть до следующего закрывающего тега noindex , а если его не будет, то всю страницу от открывающего тега и до конца.
Для примера могу привести случай из практики, когда в результате такой невнимательности в индексе осталась лишь главная страница сайта.
А в другом случае невнимательность блогера, который скачал и установил новую тему привела к тому-же результату, поскольку автор темы жестоко пошутил, добавив в код страниц мета тег с указанием для роботов не индексировать страницы.
Неопасные HTML ошибки
Конечно страница с большим количеством ошибок это не хорошо в любом случае, они могут влиять на ее неправильное отображение в браузерах пользователей, а что касается поисковиков некоторые из них, такие как неизвестные элементы и параметры некоторых скриптов или неправильное расположение элементов, например если блочный элемент (P ) будет находиться в строчном SPAN , не будут представлять ни какой опасности.
Как проверить ошибки в HTML коде сайта (валидность)
Для проверки HTML кода на наличие ошибок есть одно единственное и самое надежное средство: Валидатор кода . С его помощью вы можете проверить ошибки в HTML коде страниц сайта, не только введя в форму их URL но и просто вставив текстовый вариант кода исходника страницы.
Чтобы избежать появление ошибок постарайтесь чаще проверять свои страницы на их наличие, особенно после редактирования кода или добавления сторонних скриптов, которые тоже могут быть не идеальны и привести к возникновению проблем.
На проекте необходимо было сделать логин через модальные окна и «обычные» страницы для разных типов устройств. После поиска понял, что зачастую описывается не совсем то, что нужно. Так просто помещают форму в модальное окно (фактически пользуясь ), а тут (вход и регистрация) переопределяют методы в контроллерах devise так, что они постоянно отдают только json и для «немодального» поведения нужно будет писать много условий с проверкой формата запроса. Поэтому я решил поэкспериментировать в новом приложении и написать поддержку 2 форматов с минимальным количеством переопределения и грязных хаков.
Создание приложения
- Генерим приложение без тестов и запуска bundle install : rails new devise_modal -B -T
- Добавляем нужные гемы в Gemfile
:
И устанавливаем всё: bundle install
- Запускаем нужные генераторы
rails g bootstrap:install static , «static» так как ничего менять в стилях bootstrap "а не будем
rails g devise:install; rails g devise User; rake db:migrate - устанавливаем devise и создаём пользователя - Создаём контроллер, который будет отображать главную страницу:
rails g controller welcome index --no-helper --no-assets
В config/routes.rb привязываем index к главной странице:
root "welcome#index"
Модальные окна для форм
В формах нету ничего примечательного - используем стандартные devise "овские сделав их remote и поменяв формат на json . Дальше делаем их модальными, обернув в соответствующие классы bootstrap "а. В итоге получились такие partial "ы:Добавим отображение этих файлов и ссылок для их вызова в layout :
<%= link_to "Sign in", "#sign_in", "data-toggle" => "modal", :class => "btn btn-small" %> <%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => "btn btn-small" %> <%= render "shared/sign_in" %> <%= render "shared/sign_up" %>
А после этого облагородим немного, сделав проверку на наличие юзера:
app/views/layouts/application.html.erb
<% if current_user %> <%= "Hello, #{current_user.email}" %> <%= link_to "Sign out", destroy_user_session_path, :method => :delete %> <% else %> <%= link_to "Sign in", "#sign_in", "data-toggle" => "modal", :class => "btn btn-small" %> <%= link_to "Sign up", "#sign_up", "data-toggle" => "modal", :class => "btn btn-small" %> <%= render "shared/sign_in" %> <%= render "shared/sign_up" %> <% end %>
Чтобы всё это работало нужно добавить несколько методов в application_helper , которые определяют resource и связанные с ним для данного контекста:
app/helpers/application_helper.rb
def resource_name:user end def resource @resource ||= User.new end def devise_mapping @devise_mapping ||= Devise.mappings[:user] end
Как заметили в комментариях printercu и DarthSim переопределять глобальные хелперы для resource имеет мало смысла, лучше напрямую задать в формах вместо resource - User.new , а вместо resource_name - :user . Также в app/views/shared/_sign_in.html.erb укажем Devise.mappings[:user] заместо devise_mapping . В целом, можно вообще избавиться от этого условия: <% if devise_mapping.rememberable? -%> основываясь на том, указуем ли мы в модели пользователя(app/models/user.rb ) :rememberable . Кроме того, в app/views/shared/_sign_up.html.erb ещё был хелпер devise_error_messages! , который использует resource , но поскольку текст ошибок берётся из json "а ответа, то просто удалим из формы <%= devise_error_messages! %> за ненадобностью.
Теперь есть модальные формы, которые доступны с любой страницы и позволяют входить и регистрироваться. Осталось только сделать, чтобы devise на эти запросы в ответ не отправлял html страницы.
JSON ответы от devise
В геме devise за ошибки связанные со входом отвечает FailureApp . При возникновении ошибки в SessionsController "е, который отрабатывает запросы на вход, вызывается respond , где с помощью http_auth? проверяется: нужно слать 401 статус или же переадресовывать на другую страницу. Так как по умолчанию у devise "а:config/initializers/devise.rb
config.http_authenticatable_on_xhr = true то и возвращается 401.
RegistrationsController же в ответ на AJAX запрос присылает html страницу, чтобы это исправить переопределим его немного - укажем явно, какие форматы нас интересуют:
rails g controller Registrations --no-helper --no-assets --no-views
config/routes.rb
devise_for:users, controllers: {registrations: "registrations"}
app/controllers/registrations_controller.rb
class RegistrationsController < Devise::RegistrationsController respond_to:html, :json end
Теперь при неудачной попытке регистрации будет отдаваться 422 статус с текстами ошибок в responseJSON["errors"] , а при удачной - 201. Аналогично для SessionsController "а при удачном входе нужно отдавать статус, а не html-страницу, поэтому «научим» и его правильно реагировать на json запросы:
rails g controller Sessions --no-helper --no-assets --no-views
config/routes.rb
devise_for:users, controllers: {sessions: "sessions", registrations: "registrations"}
app/controllers/sessions_controller.rb
class SessionsController < Devise::SessionsController respond_to:html, :json end
Также можно написать javascript , который будет обрабатывать ответы от модальных форм, например такой:
app/assets/javascripts/welcome.js.coffee
$ -> $("form#sign_in_user, form#sign_up_user").bind("ajax:success", (event, xhr, settings) -> $(this).parents(".modal").modal("hide")).bind("ajax:error", (event, xhr, settings, exceptions) -> error_messages = if xhr.responseJSON["error"] "
При входе оборачиваем ошибку в alert , а при регистрации - ошибки по каждому параметру, после чего выводим полученное сообщение в footer "е. При успешном запросе просто убираем модальную форму (можно ещё обновлять блок в layout "е, в котором проверяется наличие пользователя, чтобы отображать данные пользователя (они также приходят в ответе)).
Теперь контроллеры отдают ответы в правильном формате, как и для модальных форм - json , так и для стандартных(users/sign_in , users/sign_up ) - html . И всё, что понадобилось для этого понадобилось - переопределить контроллеры, расширив набор форматов:
respond_to:html, :json
Примечание
Приложение писалось на rails 4, но отличия для 3.2 будут минимальны: запустится bundle install при создании приложения, нужно будет удалить public/index.html а также путь на главную будет выглядеть чуть иначе:config/routes.rb
root to: "welcome#index"
Дизайнеры тратят часы на оттачивание мастерства для тщательной подгонки мельчайших деталей в дизайне веб сайтов, которые выходят из-под их пера. Однако качество кода очень часто остается весьма низким. Вам нужны доказательства? Посмотрите галереи бесплатных шаблонов CSS. 90% шаблонов не пройдут проверку. Причем, основная часть ошибок является весьма примитивными и их очень легко исправить. В данном уроке рассмотрим типовые ошибки в коде HTML, которые мешают успешному завершению проверки.
Зачем проверять код?
Если сайт выглядит отлично в браузере, то зачем проверять код? Типичный вопрос, который задается перед проверкой кода. Но ведь сайт не ограничивается только тем, что видно пользователю. Страницы HTML предназначены для представления данных, а не графических эффектов. Данные должны быть доступными для чтения для всего огромного сообщества людей, которое использует интернет. И читатели могут использовать совсем другие технологии для получения информации, представленной на вашем сайте - например, они могут использовать программу для воспроизведения данных голосом и просто слушать, что написано на вашей странице.
Страница HTML, которая не содержит ошибок, в основном будет корректно отображаться в большинстве браузеров, а также будет соответствовать требованиям будущих технологий. Здесь стоит упомянуть поисковые механизмы, действие которых очень важно для целей SEO. Никто не хочет создавать для них препятствий, а чистый и правильный код гораздо легче воспринимается поисковыми ботами.
Это также вопрос профессионализма. Неправильный код HTML очень похож на грамматические ошибки в надписях на сайте. И хотя клиент может и не заметить ошибок в коде - это не изменяет сущности вопроса. Никто не любит грамматические ошибки в дизайне, но оставлять код HTML с ошибками почему-то не считается таким же постыдным деянием.
Общие ошибки
Ниже представлены ошибки, которые выловлены в шаблонах с первой страницы известной галереи CSS шаблонов. Множество сайтов выглядят отлично и даже великолепно, но очень часто качество кода не соответствует качеству дизайна. Хотя большинство таких ошибок может быть исправлено очень быстро и просто.
Самая плохая ошибка - не использовать Doctype ! Отсутствие тега Doctype означает, что браузер будет "догадываться", какой язык использовался для создания документа. Для исправления ошибки нужно указать тип документа вашей страницы .
Не закрыт элемент
Если вы открыли тег где-то в вашем документе HTML, его нужно закрыть в соответствующем месте. Забывчивость в данном вопросе не только приводит к ошибкам при проверке кода, но и может вызвать серьезные проблемы с шаблоном. На рисунке представлена ситуация, когда автор забыл закрыть тег
Опускается символ / в самозакрывающихся элементах
Большинство элементов HTML имеет отдельные закрывающие теги, например: