Ко всем материалам
#Веб-разработка#SEO

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

1061 
 

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

Что такое исходный код страницы и кому он нужен

Исходный код страницы — это вид страницы на языке кода. Он выглядит как список пронумерованных строк, где каждая содержит информацию о конкретном объекте на сайте. Код страницы состоит из трех элементов:

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

  • CSS — работает в связке с HTML через теги и отвечает за визуализацию: размер, стиль, шрифты, форму, фон.

  • JavaScript — логический язык программирования, который отвечает за более сложные элементы. Например, анимацию, аналитику или интерактив.

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

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

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

  • Как собран текст страницы и какие ссылки используются.

  • Какие метатеги и ключевые слова использованы.

  • Какое описание (description) и название (title) страницы.

  • Подключены ли страницы к «Яндекс.Метрике», Google Analytics, скрипты, счетчики, плагины, пиксели.

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

  • Отступы у кнопок, размеры блоков, цвета и используемые шрифты.

  • Как встроены изображения, графика и другие медиа.

  • Как использован JavaScript, какие атрибуты кода применены, есть ли баги.

Как посмотреть исходный код страницы Читайте также: 76 ссылок, которые помогут сделать концепцию дизайна эффективнее и быстрее

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

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

Код страницы можно посмотреть в двух режимах:

  • Исходный код — загружается версия страница в формате HTML-кода.

  • Инспектор — запускается консоль для просмотра и управления кода.

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

Два способа посмотреть код: в отдельной вкладке или через консоль

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

  • Ctrl+U — посмотреть код в новой вкладе на Windows.

  • Ctrl+Shift+C — открыть инспектор кода на Windows.

  • cmd+U — открыть исходный код на MacOS.

  • alt+cmd+U — открыть инспектор кода на MacOS.

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

Google Chrome

Нажмите правой кнопкой мыши на странице и выберите:

  • Посмотреть код страницы. Код откроется в отдельной вкладке.

  • Посмотреть код. Откроется инспектор для просмотра кода в текущей вкладке.

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

Как посмотреть исходный код страницы в Chrome

Safari

Чтобы пункт «Посмотреть исходный код» появился, сначала потребуется включить опцию его просмотра:

  • Откройте настройки браузера в меню Safari.

  • Перейдите во вкладку «Дополнение».

  • Поставьте галочку на пункте «Показывать меню „Разработка“ в строке меню».

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

Как включить просмотр кода в браузере Safari

После этого открываете страницу в интернете, щелкаете правой кнопкой мыши и выбираете:

  • Показать программный код страницы. Открыть код страницы в новой вкладке.

  • Проверить объект. Включить инспектора.

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

Как посмотреть исходный код страницы в Safari

Opera

Откройте страницу и кликните правой мышкой по любой области на экране. Выберите:

  • Исходный текст страницы. Код откроется отдельной вкладкой.

  • Просмотреть код элемента. Запустить инспектора.

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

Как посмотреть исходный код страницы в Opera

Mozilla Firefox

Откройте страницу и кликните правой мышкой. Выберите:

  • Исходный код страницы. Посмотреть код в новой вкладке.

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

  • Исследовать. Включает доступ к инспектору для просмотра кода страницы.

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

Как посмотреть исходный код страницы в Mozilla Firefox

Microsoft Edge

Откройте страницу и нажмите правой кнопкой мыши по любой области. В меню доступно:

  • Просмотреть исходный код. Открыть код страницы в отдельной вкладке браузера.

  • Проверить. Включить инспектора на странице.

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

Как посмотреть исходный код страницы в Microsoft Edge

«Яндекс.Браузер»

Откройте страницу и нажмите правой клавишей мыши:

  • Просмотреть код страницы. Открыть код в новой вкладке.

  • Исследовать элемент. Запустить инспектор кода.

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

Как посмотреть исходный код страницы в «Яндекс.Браузере»

Браузер на телефоне

На телефоне инспектор недоступен, но можно открыть исходный код с помощью строки «view-source:url-сайта». Например, вот так можно посмотреть страницу Workspace — «view-source:workspace.ru».

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

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

Как использовать исходный код

Вы можете редактировать сайт и изучать его структуру.

Редактирование страницы

Через инспектор можно менять код страницы внутри своего браузера — это никак не влияет на сам сайт: после перезагрузки сайт вернется в исходное положение. Редактирование страницы может пригодится, чтобы:

  • менять блоки и их содержимое для проверки их отображения или тестирования;

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

Как отредактировать код на сайте:

  • В режиме инспектора нажмите на курсор около вкладки «Элементы» (Elements).

  • Выберите курсором интересующий элемент сайта: блок, текст, картинку, заголовок.

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

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

В итоге над элементом появится информация о примененных CSS-стилях, а во вкладке «Элементы» (Elements) — конкретная строка в HTML-коде. Ее можно редактировать. Например, изменить текст — в нашем примере это строка h1.

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

Как найти элемента сайта в его исходном коде

Кликаем два раза и в окне «Элементы» (Elements) пишем что угодно. Изменение сразу отобразится на сайте.

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

Как изменить элемент сайта с помощью инспектора

Также можно менять CSS-стили. Например, изменить размер отображаемой картинки. Выберите элемент сайта и в разделе Стили (Styles) пролистайте в самый низ, где предлагают изменить размер изображения. Введите новые значения и сохраните.

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

Как изменить CSS-стиль через исходный код

Как посмотреть исходный код страницы Читайте также: 10 лучших бесплатных платформ для создания сайтов для писателей

Проверить SEO-оптимизацию

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

  • title — название страницы,

  • description — описание страницы,

  • h1-h6 — заголовки,

  • alt — теги для изображений.

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

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

Эти данные отвечают за продвижение статей через поисковики. Тайтл и дескрипшн отображается в заголовке и сниппете карточки в поисковике, а h1-h2 отвечают за логику всего документа, что тоже влияет на выдачу. Alt — описывают содержимое картинок, что пригодится для соответствующего поиска.

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

Параметры страницы, который можно найти в ее исходном коде

Подробнее о SEO-продвижении и способах улучшить свои позиции в поисковиках читайте в статьях:

Заключение

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

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

Задачи на тендерной площадке Workspace в категории «SEO»

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

Разместить

Вакансии

Смотреть все

Выскажите мнение

Спасибо! Подписка успешно оформлена

Подписка

Отлично! Мы отправили письмо на указанный вами электронный ящик с инструкцией по подтверждению.

Если письмо с подтвержением вашего e-mail не будет получено в течение 10 минут, пожалуйста, проверьте папку СПАМ в соответствующем почтовом ящике.

1075

Похожие статьи