7 способов использовать инструмент «Проверка элемента» для SEO
Функция Проверка в Chrome (также называемая «проверка элемента») позволяет вам проверить «под капотом» любой страницы или веб-сайта. Вы можете использовать его для диагностики проблем, тестирования изменений на своем сайте и даже слежки за конкурентами.
Нажмите правой кнопкой мыши на любой странице и прокрутите вниз до пункта «Проверить», чтобы увидеть код, с помощью которого создан сайт.
Вы увидите страницу в левом окне и различные вкладки справа со всем кодом сайта. Вы можете разворачивать и сворачивать элементы для просмотра кода этой страницы.
На вкладке Элементы вы можете увидеть, как будет выглядеть страница, если вы отредактируете, удалите или добавите элементы. Вы также можете найти информацию о том, как настроить веб-сайт. Вкладки «Консоль», «Источники», «Сеть» и другие также могут помочь в проведении более сложного технического аудита.
Полезно знать основы HTML и CSS, но вы можете ответить на многие основные вопросы, просто используя вкладку Элементы, если знаете, какой код искать.
1. Какого это цвета?
Найдите в Интернете уникальный шестнадцатеричный код любого цвета с помощью Inspect.
Щелкните правой кнопкой мыши элемент, который вы хотите увидеть.
Прокрутите вниз, чтобы найти образец цвета и шестнадцатеричный код.
Нажмите на образец, чтобы поиграть с разными цветами этого элемента.
Каждый цвет имеет уникальный шестнадцатеричный код или универсальную комбинацию из шести цифр, обозначающую цвет. Например, чисто белый — #FFFFFF, чисто черный — #000000, а мятно-зеленый — #98FF98.
Если вы не видите нужный цвет, проверьте настройки цвета родительского элемента, которые могут переопределять дочерние элементы.
Это удобно для решения таких вопросов, как:
Какие цвета предпочитают пользователи? Могу ли я найти свежий цвет, чтобы попробовать?
Какой цвет мой конкурент тестирует на призыв к действию?
Соответствуют ли цвета моего сайта рекомендациям бренда?
Соответствует ли эта цветовая комбинация рекомендациям по удобству использования?
2. Что это за шрифт?
Шрифты с засечками сейчас на пике популярности. Вы можете найти новые шрифты на любом сайте, щелкнув элемент правой кнопкой мыши и найдя CSS шрифта.
Щелкните копию правой кнопкой мыши.
На вкладке «Стили» внизу найдите тот же тег.
Прокрутите вниз до тегов шрифтов.
Если вы видите в коде несколько шрифтов, это резервные шрифты. Первый шрифт — это шрифт по умолчанию, который появится, если браузер пользователя имеет доступ к этому шрифту. Если этот шрифт по какой-то причине недоступен, браузер вернется к использованию второго шрифта из списка и так далее по списку.
Вы также можете проверить размер шрифта и высоту строки.
Выбор подходящего размера шрифта зависит от шрифта, высоты строки и жирности. Хорошее практическое правило — стремиться к минимуму 14 пикселей для основного текста и 20 пикселей для шрифтов заголовков.
H1: 30–34 пикселя.
H2: 28–30 пикселей
H3: 24–26 пикселей
H4: 20–22 пикселей
Тело: 16-18 пикселей
3. Будет ли такое изменение контента выглядеть хорошо?
Используйте «Проверку», чтобы увидеть, как будет выглядеть изменение, прежде чем оно будет опубликовано. Это особенно полезно, если вам нужно сделать снимок экрана, чтобы получить одобрение до или после того, как вы начнете редактировать страницу, или если вы хотите сначала проверить, как изменение будет выглядеть на настольном компьютере и мобильном устройстве.
Осмотрите элемент, который вы хотите изменить.
Дважды щелкните копию, которую хотите отредактировать.
Отредактируйте копию.
Щелкните за пределами элемента.
Вносите изменения, пока не будете довольны.
Если элемент, который вы редактируете, содержит несколько фрагментов кода, например ссылку в абзаце, вы можете щелкнуть копию правой кнопкой мыши и выбрать «Редактировать как HTML», чтобы отредактировать весь выделенный фрагмент.
