Как читать код сайта?

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

Зачем понимать исходный код

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

Вот основные задачи, для которых важно понимать код страниц сайта:

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

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

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

Анализировать сайты конкурентов. Чтение кода помогает в анализе конкурентов — можно  определить, какую CMS они используют, какой стратегии продвижения придерживаются.

Как открыть код страницы

Просмотр исходного кода страницы примерно одинаков в большинстве популярных браузеров. Расскажу, как это делать на примере Google Chrome. Есть несколько способов. 

Вызов контекстного меню либо комбинация Ctrl + U

Один из наиболее простых вариантов — кликнуть по правой кнопке мыши, в открывшемся окошке выбрать «Посмотреть исходный код». Страница с кодом будет открыта в новой вкладке.

Сочетание клавиш Ctrl + U работает аналогично. Иногда код сайта пытаются скрыть от стороннего доступа. Для этого блокируют правую кнопку мыши и комбинацию Ctrl + U. Но в этом случае функция «Посмотреть исходный код» продолжает исправно работать.

Средства разработчика или комбинация Ctrl + Shift + I

Необходимо зайти в меню вкладки — нажать на троеточие в правом верхнем углу браузера. Здесь выбираем «Другие инструменты» и затем «Средства разработчика». Код откроется в правой части страницы. Для просмотра разметки нужно перейти на вкладку «Элементы». При наведении мышки на фрагмент кода будет подсвечиваться соответствующая ему область на текущей странице.

Также можно использовать сочетание клавиш Ctrl + Shift + I, которое откроет код для разработчика на этой же странице.

Страницу с кодом можно скачать и сохранить. Это удобно, если надо дальше работать с данными или сравнивать будущие изменения с текущим кодом. Для загрузки сначала открываем код. Затем правой кнопкой мыши вызываем контекстное меню и выбираем «Сохранить как». При загрузке можно выбрать подходящий вариант — только HTML (веб-страница со всеми элементами), один файл (в формате MHTML) или полная страница (папка со всеми элементами).

Как читать код сайта

Код страницы — это структура тегов, в которой зашифрованы все видимые и невидимые элементы контента: текст, ссылки, изображения, скрипты, счётчики и прочее. Состоит код из трёх видов разметки: 

• HTML — гипертекстовая разметка, отвечающая за структуру. С её помощью оформляют текст, блоки и основные элементы страницы. 
• CSS — каскадные таблицы стилей, которые работают в связке с HTML и отвечают за визуализацию. С их помощью оформляют шрифты, размер, форму, фон, стиль. 
• JavaScript — язык программирования, который используют для создания интерактивных элементов, оформления анимации или аналитики. 

В целом, HTML задает разметку сайта, CSS отвечает за внешний вид, а JavaScript всё это оживляет.

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

Чтобы найти какой-то элемент в структуре кода, нужно понимать, под каким тегом его искать. Для поиска используем комбинацию клавиш Ctrl + F. В открывшейся поисковой строке надо ввести нужный тег. Страница будет просканирована на наличие соответствий, и все найденные элементы будут подсвечены.

На что обратить внимание в коде страницы

Вот какая информация из кода страницы будет полезна для SEO и продвижения сайта. 

Заголовок страницы: title

Тег title обозначается открывающим тегом <title> b заканчивается закрывающим тегом: </title>. Тег заголовка обычно находится в верхней части исходного кода в разделе <head>.

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

При проверке тегов title на сайте убедитесь, что: 

• каждая проверяемая страница имеет релевантный title — т.е. формулировка в теге соответствует теме контента; 
• на каждой странице есть только один тег заголовка;
• каждый тег заголовка на сайте уникален и не имеет дублей. 

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

Мета-описание: description

Мета-тег description расположен в блоке <head>. Для его добавления используют непарный тег <meta> с двумя атрибутами name и content, в которых указывают тип информацию и непосредственно текст.

Этот мета-тег кратко описывает тематическое содержание страницы. Поисковики могут использовать эти данные для определения релевантности контента и для формирования сниппета. 

Просматривая description в коде страницы, проверьте, что: 

• длина описания не более 150-170 символов, поскольку текст большего объёма не полностью отобразится в сниппете — отрывке текста, который показывается на страницы выдачи результатов в поисковиках; 
• текст корректно описывает содержание страницы и позволяет понять, какую информацию найдёт пользователь; 
• в описании присутствуют важные ключевые слова, по которым оптимизируется проверяемая страница.

Анализ description на сайтах конкурентов может быть полезен при сборе семантического ядра и составлении технического задания на SEO-статьи: можно посмотреть, какие описания имеют самые популярные материалы. 

Заголовки: h1–h6

Теги от <h1> до <h6> прописывают в контейнере <body>. Они обозначают заголовки разного уровня.

Наличие заголовков важно для правильного структурирования страницы. Анализируя логику тегов h1–h6, поисковики лучше понимают контекст.

При изучении тегов h1–h6 проверьте, что: 

• на каждой странице обязательно есть тег h1;
• на одной странице находится не более одного тега h1;
• заголовок первого уровня соответствует общему содержанию; 
• теги h1–h6 размещены в правильной иерархии. 

Попробуйте прочитать заголовки h1–h6 в порядке их размещения. Они должны быть связаны по смыслу и логике. Если по структуре заголовков можно понять основное содержание материала, то h1–h6 подобраны верно. 

Альтернативный текст изображений: alt

Alt — это один из атрибутов тега <img> в HTML. Его используют для добавления альтернативного текста, который будет показан в случае, если иллюстрация не отобразится.

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

Кроме того, изображения с альтернативной подписью могут попасть в Яндекс Картинки и Google Images по соответствующим запросам. 

При проверке alt стоит проверить, что: 

• текст соответствует изображению; 
• длина описания состоит из 5-6 слов, в среднем не более 125 символов; 
• в описании есть ключевые слова, но без переспама. 

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

Ссылки: dofollow и nofollow

Внутри каждой ссылки есть атрибут rel=»значение_атрибута», который описывает ссылку для поисковых систем. Чаще всего в значении указывают статусы dofollow или nofollow, которые разрешают или запрещают индексацию соответственно.

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

Закрытые ссылки не индексируются и соответственно не влияют на ранжирование. Но нужно учитывать, что если ссылке не присвоен атрибут nofollow, то она по умолчанию считается dofollow. 

Необязательно присваивать тег nofollow каждой ссылке отдельно. Можно закрыть от индексирования все ссылки на веб-странице. Для этого нужно добавить тег rel=”nofollow” в шапку (header) страницы. Например, можно закрыть все ссылки в разделах, где пользователи могут писать комментарии.

При проверке ссылок на собственном сайте убедитесь, что: 

• каждой рекламной ссылке присвоен тег nofollow; 
• все пользовательские ссылки закрыты от индексирования; 
• тегом nofollow помечены ссылки на служебные страницы, не требующие ранжирования; 
• на одной странице размещено не более пяти dofollow-ссылок. 

Также атрибут rel помогает проверить обратные ссылки. В частности, если в бэклинке присутствует nofollow, то такая ссылка не передаёт ссылочный вес и не влияет на ранжирование. Такие закрытые ссылки бесполезны для повышения ссылочного веса.