Как найти тег на своем сайте

Часто возникают ситуации, когда необходимо проанализировать содержимое веб-страницы: посмотреть description, узнать размер какого-то элемента или просто выяснить, какой используется шрифт. С помощью опции «Просмотреть код» можно узнать не только это, но и многое другое – практически всю подноготную сайта.

Для каких целей нужен навык чтения кода и как в несколько кликов посмотреть содержимое сайта? Об этом и многом другом поговорим в сегодняшней статье.

Зачем мне нужен исходный код сайта?

Думаете, если вы не программист или верстальщик, то код вам вряд ли понадобится? На самом деле, он может помочь в разных ситуациях. Код может быть полезен:

• SEO-специалистам. Не всегда есть возможность проанализировать страницу и узнать, есть ли с ней какие-либо проблемы. Например, чтобы узнать Description страницы, можно не пользоваться специальными плагинами и прочими средствами – достаточно открыть исходный код, и описание будет перед глазами. Аналогичным образом можно посмотреть заголовок страницы, узнать, подключена ли Яндекс.Метрика и другие скрипты.
• Для более глубокого анализа конкурентов. Посмотреть, какими способами продвигается сайт, мы можем через код: ключевые слова, мета-теги и прочее – все это доступно для обычного пользователя.
• Веб-дизайнерам. Речь снова идет о конкуренции, но и не только. Когда дизайнер создает свой сайт, он часто обращается к различным ресурсам, чтобы посмотреть, как расположены те или иные элементы. Все это мы можем узнать на любом сайте: какой отступ у этой кнопки, какого она размера, сколько пикселей та фотография и так далее.
• Для лучшего понимания кода. Изучив основы HTML-кода и CSS-стилей, вы сможете понять, как работает ваш верстальщик и какие элементы следует оптимизировать.

Еще несколько возможностей при просмотре кода страницы: выгрузка картинок с исходным размером, просмотр сайта в адаптивном режиме, возможность изменять содержимое веб-страницы. Последнее работает в локальном режиме – изменения будут применены только на текущем ПК до тех пор, пока страница не будет обновлена.

Как узнать код сайта

Прежде чем переходить к просмотру кода сайта, давайте сначала разберемся, что же включает в себя код любого веб-ресурса. Как правило, это список пронумерованных строк с информацией о том или ином элементе сайта. Если открыть код главной страницы Timeweb, то мы увидим, что в четвертой строке установлен заголовок документа:

Как видите, здесь все логично и понятно.

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

Способ 1: Функция «Посмотреть код»

Открываем страницу, код которой нужно просмотреть, и кликаем по любой области правой кнопкой мыши. В отобразившемся меню выбираем «Посмотреть код». Также вы можете воспользоваться комбинацией клавиш «CTRL+SHIFT+I».

В результате мы попадаем в инспектор браузера – на экране появляется дополнительное окно, где сверху находится код страницы, а снизу – CSS-стили.

Обратите внимание на то, что запуск инструмента разработчика выполнялся в Google Chrome. В другом браузере название кнопки запуска может отличаться.

Способ 2: «Просмотр кода страницы»

Если в предыдущем случае мы могли открыть всю подноготную сайта, то сейчас нам будет доступен лишь HTML-код. Чтобы его посмотреть, находим на сайте пустое поле и кликаем по нему правой кнопкой мыши, затем выбираем «Просмотр кода страницы» (можно воспользоваться комбинацией клавиш «CTRL+U»). Если вы кликните правой кнопкой по элементу сайта, то кнопка «Просмотр кода страницы» будет отсутствовать.

После этого нас перенаправит на новую страницу со всем исходным кодом:

Здесь мы также можем посмотреть все содержимое страницы, однако узнать CSS и изменить данные у нас не получится.

Что такое HTML и CSS

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

<tag> … </tag> <! Вводится открывающий тег, прописывается содержимое, а затем тег закрывается >

Например, часто используется такая конструкция: <h1> Это мой первый сайт! </h1>, где h1 – тег, обозначающий заголовок первого уровня, внутри которого находится текст, отображаемый на странице.

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

CSS – это помощник HTML, который позволяет преображать страницу как угодно: можно настраивать цвета элементов, изменять их положение, размер и форму, добавлять адаптивность и многое другое. Подключение CSS выполняется непосредственно в HTML-файле с помощью специального тега.

Рассмотрим на небольшом примере, как работают стили:

1. Допустим, у нас есть HTML-тег <body> с текстом «Привет! Это мой первый сайт»:
2. Мы хотим, чтобы текст стал другого цвета. Давайте сделаем его красным! Для этого используются каскадные стили (CSS), в данном случае достаточно для тега body прописать стиль «color: red;». В результате текстовый элемент преобразится, а информацию о его стилях мы можем посмотреть в инспекторе браузера:

Каждый сайт, который вы встречаете, использует связку HTML и CSS. Стоит упомянуть, что еще есть язык программирования JavaScript, который позволяет оживлять страницу. Например, он может активировать формы обратной связи, создать сложную анимацию, установить всплывающие окна и многое другое. Обычным пользователям разбираться в нем не нужно от слова совсем. Если вы собираетесь вести аналитику сайта или просто интересуетесь его содержимым, то в знаниях JavaScript нет никакой необходимости.

Как я могу использовать код

Выше мы рассмотрели лишь основные моменты, связанные с кодом сайта – научились просматривать его и узнали, что такое HTML и CSS. Теперь давайте применим полученные знания на практике – посмотрим, как всем этим пользоваться.

Вариант 1: Редактирование контента

Как мы уже говорили ранее, можно поменять контент страницы внутри своего браузера. Изменения будем видеть лишь мы, но это дает нам возможность посмотреть альтернативный вариант размещения элементов.

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

В среде разработчика мы можем заменить текст, расположенный в данном теге. Чтобы это сделать, находим его в коде, кликаем по нему двойным щелчком мыши и заменяем на другой. Ниже пример: мы поменяли «Виртуальный хостинг» на «Классное решение».

Чтобы отменить внесенные изменения, достаточно воспользоваться клавишей «F5» – страница будет обновлена, а весь контент станет исходным.

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

Вариант 2: Скачивание картинок

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

1. Выбираем картинку, которую нужно скачать, кликаем по ней правой кнопкой мыши и переходим в «Посмотреть код». После это перед нами откроется инспектор браузера с выделенным тегом – в нем нас интересует значение «src». Там содержится ссылка на картинку, которую нужно скопировать и вставить в браузер.
2. Мы попадаем в окно с необходимым изображением в полном размере. Чтобы его скачать, достаточно кликнуть правой кнопкой мыши и выбрать «Сохранить картинку как…».

Аналогичным образом мы можем выгрузить и фоновое изображение, но его стоит искать через CSS-стили в атрибуте background.

Вариант 3: Просмотр SEO-элементов

С помощью кода можно посмотреть основные SEO-теги. Сделать это можно следующим образом:

1. Открываем страницу, которую нужно проанализировать, и кликаем по пустой области правой кнопкой мыши. Затем выбираем «Просмотр кода страницы».
2. Далее нас перенаправляет на страницу с кодом – здесь мы можем найти такие элементы, как H1, Description, Title и другие. Для удобства рекомендую использовать поиск по странице, который запускается с помощью комбинации клавиш «CTRL+F».

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

Как посмотреть исходный код на телефоне

Функционал мобильных браузеров сильно ограничен – посмотреть код сайт через инспектор мы не можем. Доступен только вариант с отображением всего HTML-кода страницы. Чтобы им воспользоваться, необходимо перед ссылкой прописать «view-source:». Например, для https://timeweb.com/ru это будет выглядеть так: 

view-source:https://timeweb.com/ru

Если нужны расширенные возможности для устройства на Android, то можно поискать специальные приложения, например, VT View Source.

Заключение

Подведем итоги:

• Просматривать и читать исходный код страницы может каждый, и для этого не нужно обладать навыками программирования.
• Код страницы состоит из HTML-элементов и CSS-стилей, изучить которые может любой пользователь.
• Базовые знания позволят изучить SEO-элементы сайта, выгрузить из него картинки, посмотреть используемые элементы и узнать много другой полезной информации.

Теги важные для оптимизации и продвижения сайта

Почти в любом руководстве, в любой рекомендации по продвижению сайта говорится о важности использования тегов Title, Description, Keywords и H1. В этом блоге тоже есть статья о внутренних факторах оптимизации, но там не сказано где найти и как отредактировать эти теги, об этом мы сейчас и узнаем.

Не смотря на то, что эти теги действительно очень важны для оптимизации, многие разработчики сайтов их не заполняют, а некоторые теги даже физически отсутствуют в коде страниц. Возможно это делается специально, чтобы не нагружать себя дополнительной работой, а возможно по незнанию. К сожалению, даже талантливый верстальщик (человек, который из изображения делает веб-страницу — «натягивает дизайн») может совершенно не знать о правилах и стандартах верстки.

В лучшем случае теги будут не заполнены или заполнены неправильно. В худшем придется эти теги встраивать в сайт. А в самом худшем случае эти теги могут использоваться для декоративного оформления (имеются ввиду теги заголовков h1-h6) и придется это тоже исправлять.

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

Как посмотреть Title, Description и другие теги своего или чужого сайта

Для продвижения сайта вам необходимо уметь работать с этими тегами и не забывать про них при создании новых страниц.

Чтобы посмотреть эти теги, надо находясь на веб-странице нажать правой кнопкой и выбрать пункт «Просмотр кода страницы» или «Исходный код» и т.п. варианты. Должна открыться простыня текста и его будет намного больше, чем на самой странице. Это нормально, т.к. всё это отвечает за то, как будет выглядеть страница в вашем браузере.

И вот в этом тексте нужно найти начала этих тегов (сразу вспомним зачем они нужны):

• <Title> — заголовок окна браузера, а так же отображается как название странице в результатах поисковых систем
• <meta name=»description» — описание страницы, часто отображается как описание страницы в результата поиска
• <meta name=»Keywords» — ключевые слова страницы, возможно помогают поисковым роботам сортировать страницы (среди оптимизаторов считается, что это пустая трата времени)
• <H1> — заголовок статьи. Должен быть обязательно в единственно экземпляре и отражать суть статьи.

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

Как изменить теги Title, Description, Keywords

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

Если используется какая то CMS (система управления сайтом), то скорей всего отредактировать теги Title, Description, Keywords получится в редакторе страницы.

Если сайт состоит из простых HTML страниц (что встречается очень редко), то вам надо будет редактировать файлы по FTP.

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

Подробно про метатеги

Title

Title — это метатег, HTML-атрибут страницы. Его не видно на самой странице, но он отображается в заголовке браузера и в результатах поиска.

Большинство систем управления сайтами заполняют Title автоматически, используя заголовок текста на странице. Оставлять их одинаковыми не рекомендую, ведь они служат для разных целей. Главный заголовок в тексте (H1- о нем ниже) может быть ярким и вызывающим, но при этом не подходить для отображения в результатах поиска.

Старайтесь сделать заголовок Title привлекательным и помните, что его увидят люди, когда будут просматривать результаты поиска. Поисковые системы обращают внимание на содержимое title при ранжировании сайтов, поэтому SEO-оптимизаторы часто просто перечисляют в нем ключевые слова. Постарайтесь указать 1-2 главных ключевых слова, отразив суть страницы — это поможет в продвижении этих запросов.

Ниже пример: заголовок оптимизирован под запросы «как продвинуть сайт«,  «как занять первое место». http://ilyapronin.ru/prodvizhenie/kak-prodvinut-zapros-v-top.html

Почти все современные движки позволяют редактировать метатег Title. Ищите это поле в редакторе, или в SEO-настройках страницы.

H1

H1 — это тег для HTML-разметки страницы. Теги H1-H6 используются для отображения заголовков и подзаголовков на странице, а так же они отражают иерархию текста на странице. (Бывает заголовки используются не по назначению дизайнерами и верстальщиками, это создает проблемы для продвижения сайта)

Главный заголовок (название статьи, товара, категории) должен быть отмечен тегом H1, а далее заголовки отмечаются уже тегами H2-H6. Опять же, в нормальных движках это реализовано автоматически.

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

Всегда отмечайте заголовки и подзаголовки этими тегами, а не жирным шрифтом или размером! (теги H1-H6 как раз и отвечают за отображение)

Description

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

Если вы не заполняете этот тег, то поисковая система выводит кусок текста со страницы на свое усмотрение. Т.е. какое-то описание все равно будет показано, но лучше, чтобы вы сами его задавали.

Всегда используйте эти 3 элемента SEO

Запомните, что для любой страницы на сайте надо указать Title, Description, H1.

Тегирование сайта — процесс создания страниц для группировки материалов/товаров по схожим признакам.

Этот метод подходит для таких типов сайтов, как:

• интернет-магазины,
•  доски объявлений,
• информационные сайты с большим количеством статей,
• порталы.

Целями создания тегов являются:

• увеличение трафика путем создания дополнительных страниц (точек входа);
• улучшение навигации;
• рост конверсии и удовлетворенности пользователя.

В данной статье мы рассмотрим способы, как можно быстро собрать теги для сайта.

Как быстро собрать теги

1. Собрать список сайтов для сбора тегов.

2. Получить теги с выбранного списка сайтов.

3. Подготовить файл с названием тега, URL страницы, h1, title, description, хлебными крошками.

Как найти сайты для сбора тегов

1. Выдача поисковых систем по основному запросу

Вводим в поисковую систему (Яндекс, Google) основной запрос, изучаем сайты на предмет тегов.

Пример основного запроса — «платья».

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

2. Выдача поисковых систем по запросу для страницы тега

Вводим в поисковую систему (Яндекс, Google) запрос для страницы тега, изучаем сайты на предмет тегов.

Пример запроса для страницы тега — «платья с длинным рукавом».

3. Сервисы

Можно использовать сервисы, где видно конкурентов со схожими ключами.

Например — keys.so.

В качестве примера приведу список сайтов-конкурентов для интернет-магазина по продаже одежды. Параметры похожести и тематичности подбираются в зависимости от проекта.

В данном примере:

• Мы оставляем сайты с тематичностью от 30 %. Тематичность — сколько процентов наших ключей имеется на сайте конкурента.
• Фильтрацию по похожести не производим, так как наш сайт находится на начальной стадии развития, а конкуренты, продающие одежду, имеют очень большое количество запросов в топе. Похожесть — процент общих ключей от всех ключей сайта конкурента.
• Проходимся по сайтам и убираем те, которые нам не подходят.

Выгрузка по фильтрам из сервиса keys.so

Как получить теги с выбранного списка сайтов

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

1. Скопировать вручную

Заходим на сайты конкурентов и вручную копируем названия.

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

Создаем Excel-файл, «столбик А» называем «Название». Копируем туда теги с разных сайтов.

Теги с разных сайтов

Далее удаляем явные дубли (на молнии = на молнии), понимая, что у нас еще останутся неявные дубли.

Теги без явных дублей

Заполняем названия остальных столбиков:

B — URL

C — h1

D — description

E — Ч

F — Ч “”

G — Путь

Заголовки таблицы

В итоге получаем поля:

Название — название тега, которое будет показываться на странице, где на него будет стоять ссылка. Например, на странице «Платья» выводятся ссылки на теги.

Вывод тегов на сайте

URL — URL тега

h1 — h1, он же заголовок страницы

description — поле, данные из которого будут использоваться для генерации метатега description

Ч — общая частотность по Вордстату (запрос)

«Ч» — частотность данной фразы с учетом всех морфологических форм («запрос»)

Путь — расположение тега на сайте = хлебные крошки

Заполняем по порядку.

h1 — к значению в поле «Название» добавляем слово «платья».

Таблица со значениями h1

В данном случае для генерации title используется значение из поля h1, поэтому он не представлен в таблице.

description — используем данные из столбика h1 и делаем первую букву маленькой. Для этого используем функцию «СТРОЧН» в Excel.

Таблица со значениями h1 и description

С использованием значений из этого поля пишем генератор description.

Запросы из столбика description добавляем в Key Collector. Отмечаем неявные дубли.

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

В итоге остается:

Столбик description

URL — генерируем, используя функцию URL от Seo-Excel из поля description.

Поля для ввода данных при генерации URL в SEO-Excel

Получаем:

Сгенерированные URL

Ч и «Ч» — снимаем частотность любым удобным инструментом или сервисом.

Ч — используем для удаления запросов, не имеющих частотности. Для сезонных запросов можно дополнительно снимать частотность по месяцам.

«Ч» — используем для понимания, не является ли данный запрос составляющей другого запроса (возможно такого запроса не существует).

Путь — для данного проекта теги лежат внутри основного раздела.

Добавляем «Главная — Платья — » и потом то, что идет в h1.

В случае с вложенными тегами (когда один тег вложен в другой) путь может меняться.

Например, для запроса «Короткие вечерние платья» путь будет «Главная — Платья — Вечерние платья — Короткие вечерние платья».

Таблица с заполненным столбиком «Путь»

Там же в зависимости от выбранного метода вывода ссылок может меняться название:

• если оно выводится на странице всех платьев, оно может иметь название «короткие вечерние»;
• если на странице вечерних платьев, то «короткие».

С примером, разобранным в задаче, можно ознакомиться в Google Docs.

Плюсы:

• просто;
• не требуются дополнительные программы;
• хорошо подходит для сайтов с нестандартной URL-структурой.

Минусы:

• больше ручной работы.

2. Парсинг программой Screaming Frog SEO Spider

Для выполнения данного пункта потребуется программа Screaming Frog SEO Spider (платная).

Настройка

Рассмотрим пример парсинга тегов со страницы Платья на сайте www.wildberries.ru.

Для начала в программе нам нужно заполнить две настройки.

Configuration — Include (Правила включения)

Сюда мы добавим URL, с которых начинаются теги. Эти теги будет добавлять программа.

Все теги на странице платьев начинаются с такого URL: https://www.wildberries.ru/catalog/zhenshchinam/odezhda/platya/tags/

Добавляем таким образом:

Окно для ввода параметров в «Правила включения» в Screaming Frog SEO Spider

Configuration — Exclude (Правила исключения)

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

Исключаем по элементам, которые содержатся в URL: .*%элемент в URL%.*

У меня получилось так:

Окно для ввода параметров в «Правила исключения» в Screaming Frog SEO Spider

Со временем соберется большой список таких параметров, и это упростит работу.

Парсинг

Вбиваем URL основной страницы и нажимаем «Start»: https://www.wildberries.ru/catalog/zhenshchinam/odezhda/platya

Окно ввода URL в Screaming Frog SEO Spider

Получаем список из 313 страниц тегов по Платьям с названиями.

Значения вкладки «h1» в Screaming Frog SEO Spider

Дальше уже можем работать с тегами h1.

Значения столбика H1-1 вкладки «h1» в Screaming Frog SEO Spider

С примером полученного результата можно ознакомиться в Google Docs.

Скорость ответа сервера у большинства сайтов с тегами быстрая. Поэтому скорость парсинга будет зависеть от:

• настроек программы,
• мощности компьютера,
• наличия защиты от DDoS на сайтах.

Плюсы:

• программный сбор информации.

Минусы:

• нужна платная программа Screaming Frog SEO Spider;
• требуется настройка параметров исключения для страниц, дублирующих основную (пагинация, фильтры, сортировки);
• не у всех сайтов удобная URL-структура для парсинга тегов.

3. Парсинг из поисковой системы

Сбор страниц, начинающихся с определенного URL, из выдачи поисковой системы.

Для просмотра страниц нужно задать запрос вида:

Например, чтобы посмотреть теги со страницы Платья на сайте www.wildberries.ru, нужно задать запрос вида:

Ограничение Яндекса — не более 1000 результатов, поэтому если в выдаче более 1000 результатов, то парсим, каким-либо образом ограничивая количество результатов, например, побуквенно.

Если бы у нас было более 1000 результатов, мы собирали таким образом:

Парсить выдачу можно через Key Collector.

Для совсем небольших сайтов при парсинге по буквам или по каким-то небольшим кластерам можно использовать выгрузку ТОП-100 сайтов по запросу в ПС Yandex от сайта Arsenkin.ru (быстро и бесплатно). Далее для этих страниц парсим h1 через SeoPult.

Плюсы:

• программный сбор информации

Минусы:

• не все страницы, которые есть на сайте, могут быть проиндексированы;
• для некоторых сайтов требуется удалить страницы, дублирующие основную (пагинация, фильтры, сортировки);
• не у всех сайтов удобная URL-структура для парсинга тегов.

4. Парсинг по элементу URL в keys.so

Сбор страниц с определенным URL в сервисе keys.so.

1. Делаем отчет по сайту.

2. Смотрим отчет, где показываются все страницы сайта.

3. Фильтруем по полю «Адрес содержит», вбивая нужный элемент URL, чтобы показывались только теги.

Фильтр в примере:

Поле для задания фильтров в сервисе keys.so

Список отфильтрованных страниц в сервисе keys.so

Далее для этих страниц парсим h1 через SeoPult.

Плюсы:

• сбор информации через сервис;
• обычно отсутствуют страницы, дублирующие основную (пагинация, фильтры, сортировки).

Минусы:

• нужен доступ в Keys.so (платный);
• сервис показывает не все страницы, которые есть на сайте, а только те, где есть хотя бы 1 ключевое слово в ТОП 50;
• не у всех сайтов удобная URL-структура для парсинга тегов.

Вывод

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

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