Как открыть код страницы в браузере
Перейти к содержимому

Как открыть код страницы в браузере

  • автор:

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

Что такое исходный код страницы в браузере, зачем его открывать. Как это сделать в Google Chrome, Яндекс.Браузер, Apple Safari, Microsoft Edge, Mozilla, Firefox, Opera.

Любая страница в интернете — это по сути HTML-код, который по-другому называют «исходный код».

В нём можно посмотреть некоторую полезную информацию для SEO. Например, как прописаны теги и метатеги, вроде title, description и Last-Modified, установлены ли счётчики аналитики и многое другое. Посмотреть код можно и с компьютера, и с телефона.

Покажем, как вызвать код страницы и как найти любой элемент в коде.

Что такое исходный код страницы и зачем его смотреть

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

HTML-код сайта выглядит так:

Пример кода страницы сайта

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

Как посмотреть код сайта с компьютера

Покажем на примере самых популярных браузеров: Google Chrome, Яндекс.Браузер, Apple Safari, Microsoft Edge, Mozilla Firefox, Opera. Но принцип одинаковый во всех браузерах.

Google Chrome

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

  • на Windows — Ctrl + U;
  • на Mac — Cmd (⌘) + Option (⌥) + U.

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

Просмотр кода страницы в Google Chrome

Откроется новая вкладка с кодом.

Можно и по-другому — через меню браузера. Для этого нужно кликнуть на три вертикальные точки в правом верхнем углу окна и перейти в «Дополнительные инструменты» → «Инструменты разработчика».

Как открыть «Инструменты разработчика» в Google Chrome

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

Просмотр кода элементов страницы в Google Chrome

Более быстрые способы сделать то же самое:

  • с помощью горячих клавиш Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac;
  • правой кнопки мыши, кликнув «Просмотреть код».

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

Первый способ посмотреть код страницы в Яндекс.Браузере — с помощью правой кнопки мыши. В меню нужно выбрать пункт «Посмотреть код страницы».

Просмотр кода страницы в Яндекс.Браузере

Второй — через меню браузера. Для этого необходимо кликнуть на три горизонтальные полоски в верхнем правом углу, затем «Дополнительно» → «Дополнительные инструменты» → «Посмотреть код страницы».

Просмотр кода через меню Яндекс.Браузера

В обоих случаях код откроется в отдельной вкладке. Также код можно посмотреть с помощью горячих клавиш Ctrl + U.

Чтобы открыть код в той же вкладке, что и просматриваемая страница, вместо «Посмотреть код страницы» нужно выбрать пункт «Инструменты разработчика» или нажать Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac, как и в Chrome.

Apple Safari

Для просмотра кода в Safari необходимо сначала войти в «Настройки» браузера, кликнув по надписи Safari в верхнем левом углу экрана.

Где находятся настройки браузера в Safari

Затем в открывшемся окне выбрать раздел «Дополнительно» и поставить галочку напротив «Показывать меню «Разработка» в строке меню» в нижней части окна:

Включение меню разработчика в Safari

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

Как открыть код в Safari

Код откроется в нижней части страницы:

Код страницы в Safari

Microsoft Edge

Просмотреть код в Microsoft Edge можно с помощью правой кнопки мыши → команда «Просмотреть исходный код»:

Просмотр кода страницы в Microsoft Edge

Код откроется в новой вкладке. Можно и с помощью горячих клавиш Ctrl + U.

Также его можно посмотреть через меню браузера. Для этого нужно в правом верхнем углу кликнуть на три горизонтальные точки и выбрать команду «Другие инструменты» → «Средства разработчика»:

Инструменты разработчика в Microsoft Edge

Панель откроется снизу или справа на просматриваемой странице. Чтобы увидеть код, нужно выбрать вкладку «Элементы»:

Исследование кода отдельных элементов в Microsoft Edge

Горячие клавиши здесь тоже работают: Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac.

Mozilla Firefox

Код открывается в отдельной вкладке с помощью правой кнопкой мыши по команде «Исходный код страницы»:

Просмотр кода в Mozilla Firefox

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

Исходный код в меню Mozilla Firefox

А можно и просто нажать горячие клавиши Ctrl + U — это работает во всех браузерах.

Инструменты разработчика здесь тоже можно открыть горячими клавишами Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac или кликнув правой кнопкой мыши и выбрав пункт «Исследовать»:

Как открыть инструменты разработчика в Mozilla Firefox

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

Opera

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

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

Просмотр кода страницы в браузере Opera

То же самое можно сделать сочетанием клавиш Ctrl + U.

Чтобы открыть инструменты разработчика, в этом же меню можно выбрать «Проверить код элемента» или нажать комбинацию горячих клавиш Ctrl + Shift + I на Windows, Cmd (⌘) + Option (⌥) + I на Mac.

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

Способы отличаются в зависимости от операционной системы телефона.

Android

Открыть код элемента на телефоне можно с помощью команды view-source, которую необходимо добавить перед URL в адресную строку:

view-source:https://site.ru/page-1

Во вкладке откроется исходный код страницы:

Просмотр кода страницы с мобильного на Android

Открыть инструменты разработчика подобным способом не получится. Если это необходимо, установите специальные приложения. Например, VT View Source.

iOS

На iPhone ни в Safari, ни в Google Chrome по команде «view-source:» код не откроется. Необходимо установить специальные приложения для просмотра кода. Например, HTML Viewer Q или iSource Browser.

iSource Browser — полноценный браузер для iOS, с помощью которого можно просматривать HTML-код страниц:

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

Как найти любой элемент в коде

Чтобы найти что угодно в открытом исходном коде, откройте поиск по странице. Обычно это можно сделать сочетанием клавиш Ctrl + F или через меню браузера и команду «Найти…» или «Найти на странице…»:

Поиск элементов в коде страницы

В открывшемся окошке введите начало фразы или тег, который хотите найти. Например, viewport:

Как выглядят найденные элементы

Найденный элемент браузер выделит цветом.

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

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

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

Если вам нужно проанализировать содержимое страницы в формате HTML, самый простой способ — это открыть её исходный код. С его помощью можно посмотреть метатеги, скопировать часть кода для парсинга, изучить стили оформления страницы, узнать о наличии подключённых счётчиков аналитики, dofollow и nofollow ссылках. Коды страниц доступны для просмотра любому пользователю. Из этого поста вы узнаете, как открыть исходный код в разных браузерах.

1. Что такое исходный код страницы, и как его посмотреть

Исходный код страницы отображается как набор HTML-описаний, CSS-стилей и Java-скриптов. Это список команд, которые сервер передаёт браузеру в ответ на запрос пользователя. Посмотреть можно код практически любой страницы, даже не являясь владельцем сайта, но внести постоянные корректировки в код могут хостинг-провайдер, владелец сайта или администратор.

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

Перейдите на страницу, которую нужно проанализировать. Для отображения кода используйте сочетание клавиш Ctrl + U . Откроется подробное описание страницы в формате HTML-разметки, тегов и скриптов.

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

  • названия title, description;
  • данные микроразметки Schema.org, Open Graph или других словарей;
  • данные JavaScript;
  • язык отображения контента на странице;
  • подключенные счётчиков аналитики, генераторов заявок и других сервисов;
  • исходящие ссылки на другие страницы и сайты;
  • расположение картинок, заголовков и текстовых блоков;
  • размеры и тип шрифтов, цвета элементов.

Для детального анализа откройте код страницы вместе с инструментами разработчика. Это можно сделать в любом браузере через настройки или сочетание клавиш Ctrl + Shift + I . Например, в Яндекс.Браузере нужно открыть меню параметров, выбрать дополнительные инструменты и пункт «Инструменты разработчика».

Как открыть пункт «Инструменты разработчика» в Яндекс.Браузере

Инструменты для вебмастеров появляются в том же окне рядом с открытой страницей.

Как открыть инструменты для вебмастеров в браузере

При наведении курсора мыши на участке HTML в тексте слева подсветится элемент, который описан этим участком. Для более подробного анализа данных выберите один из разделов в верхней правой части окна:

  • Elements → описывает все элементы страницы.
  • Console → выявляет возможные и критические ошибки кода.
  • Sources → показывает содержимое файлов на странице.
  • Network → указывает код ответа сервера, время загрузки страницы и ее размер.
  • Security → отображает информацию о сертификате SSL.
  • Audits → позволяет провести технический аудит мобильной или десктопной версии страницы.

Дальше рассмотрим, как открыть исходный код страницы в разных браузерах.

1.2. Как посмотреть исходный код страницы в браузере Google Chrome

В меню настроек в правой верхней части экрана выберите «Дополнительные инструменты», затем пункт «Инструменты разработчика».

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

Выбрать соответствующий пункт можно также в контекстном меню правой кнопки мыши.

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

Зайдите в «Инструменты» → «Веб-разработка» → «Исходный код страницы».

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

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

Нажмите в верхней панели «Меню» → «Разработка» → «Исходный код страницы».

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

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

Откройте раздел «Разработка» в верхнем меню браузера.

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

Safari, кстати, ещё отображает коды веб-страниц через смартфон. Зайдите в параметры мобильного браузера и выберите «View Source».

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

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

В Microsoft Edge источник страницы открывается через параметры (три точки) → «Дополнительные средства» → «Средства разработчика».

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

В каждом браузере также доступен просмотр кода элемента: логотипа, картинки, заголовка. Для анализа HTML-разметки отдельного объекта необходимо навести курсор и выбрать в контекстном меню правой кнопки мыши пункт «Исследовать код элемента».

1.7. Как посмотреть исходный код страницы с помощью Netpeak Spider

  1. Если вам нужно посмотреть код уже проскариванного краулером URL, выделите его и воспользуйтесь комбинацией клавиш Ctrl + U либо откройте контекстное меню и выберите пункт «Исходный код и HTTP-заголовки». Как посмотреть исходный код страницы с помощью Netpeak Spider
  2. Затем откроется окно инструмента, где вы можете детально изучить исходный код. Инструмент «Анализ исходного кода и HTTP-заголовков» в Netpeak Spider
  3. Чтобы посмотреть код страницы, которая не была просканирована Netpeak Spider, откройте инструмент через меню «Запустить». Как открыть окно инструмента «Анализ исходного кода и HTTP-заголовков» в Netpeak Spider
  4. Вставьте нужный URL и нажмите «Старт» для начала анализа. Как проанализировать URL в инструменте «Анализ исходного кода и HTTP-заголовков» в Netpeak Spider

У Netpeak Spider есть бесплатная версия без ограничений по времени, в которой у вас будет возможность проанализировать исходный код и HTTP-заголовки URL. Также в Freemium-версии доступно много других базовых функций.

Чтобы начать пользоваться бесплатным Netpeak Spider, просто зарегистрируйтесь, скачайте и установите программу — и вперёд! ��

Ознакомиться со всеми особенностями инструмента «Анализ исходного кода и HTTP-заголовков» вы можете в посте на нашем блоге.

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

Исходный код страницы открывается в разных браузерах и доступен для просмотра всем пользователям. Чтобы открыть код в отдельном окне, используйте сочетание клавиш Ctrl + U или выберите соответствующий пункт в параметрах браузера. Код страницы состоит из элементов HTML, описаний стилей CSS и JavaScript. По этим данным можно изучить разметку страницы, и узнать множество других сведений о странице и её содержании

А для чего вы просматриваете исходный код страницы? Делитесь в комментариях 🙂

Как посмотреть исходный код страницы: выбирайте подходящий для вас способ

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

Если вы работаете на десктопе

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

Google Chrome

Собираетесь открыть код страницы через браузер Google Chrome? Вот 4 варианта, как это сделать:

Находясь на нужной странице, зажмите одновременно Ctrl и U. Для ОС macOS действует другая комбинация. А именно COMMAND+OPTION+U. После того, как вы примените подходящее сочетание горячих клавиш, появится новая вкладка с HTML.Как видите, у источника цветная кодировка и четкая структура, что упрощает поиск нужных элементов. Чтобы найти требующееся значение ещё быстрее, можете задействовать клавиши Crtl+F. Обнаруженный фрагмент будет выделен ярким цветом.

1Скриншот

Второй способ просмотреть код страницы — через вызов контекстного меню. Достаточно нажать на правую кнопку мыши, и вы откроете контекстное меню, где вам нужно будет выбрать строку «Просмотр кода страницы».

4Crhbyijn

Открыть исходный код страницы, можно забив в адресную строку «view-source:», а потом УРЛ самой страницы.

1561456

Требуется изучить код страницы более детально? Задействуйте инструменты разработчика Google Chrome.

  • Для начала войдите в основное меню браузера. Для этого справа вверху найдите иконку, на которой изображены три вертикально расположенные точки.
  • Затем выберите раздел «Дополнительные инструменты».
  • Отобразится подменю, в котором находится требующийся вам пункт — «Инструменты разработчика».

3Crhbyijn

Этот же путь можно проделать просто нажав на клавиши быстрого доступа Ctrl+Shift+I. Если вы пользуетесь macOS, зажимайте COMMAND+OPTION+I.

Mozilla Firefox

  1. Один из способов открыть исходный код страницы в Mozilla Firefox — вызвать контекстное меню, в котором содержится строчка «Исходный код страницы». Как и в случае с Google Ghrome, страница с кодом появится в отдельной вкладке.

5Скриншот

6Crhbyijn

7Crhbyijn

Opera

  1. Чтобы посмотреть исходный код страницы в этом браузере, вы также можете зажать Ctrl+U.
  2. Или указать перед УРЛом страницы «view-source:».
  3. Держа курсор в любом месте страницы, нажмите на правую кнопку мыши. В возникшем окне выберите строчку «Исходный код страницы».

8Скриншот

9Скриншотjpg

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

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

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

Как открыть код элемента в Google Chrome

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

10Скриншот

Для этого открываем меню панели и в разделе «Dock Side» выбираем, где будет находиться консоль (можно даже открыть её в отдельном окне).

Нас интересует первая вкладка «Elements», где и отображается код страницы. Код представлен в удобном виде — каждый элемент при необходимости раскрывается. Это позволяет оценить иерархию.

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

11Скриншот

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

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

12Скриншот

Если хотите просмотреть исходный код страницы сайта через смартфон?

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

  1. Пропишите перед УРЛом параметр «view-source:». Этот способ мы уже опробовали при работе с исходным кодом через десктопную версию браузеров.
  2. Вооружитесь специальными приложениями. Например, если у вас Android, вы можете задействовать приложение VT View Source. Запуская его, укажите ссылку на ту страницу, код которой хотите посмотреть. Приложение способно выполнять поиск по коду, проверку валидности, копирование фрагментов, сохранение кода в отдельный документ и пр. Важный нюанс — приложение англоязычное.

Специальные приложения разработаны, конечно, и для iOS. Например, Web Inspector, View Source, просмоторщик HTML и другие. Достаточно указать в AppStore название одного из этих приложений, и на экране появится целый список схожих по функционалу инструментов.

5545646464646

Ещё больше интересных и полезных статей ищите в новостном разделе на сайте Студии ЯЛ. Там мы регулярно публикуем материалы на разные темы: разработка сайтов, поисковое продвижение, контекстная реклама, SMM, SERM и др.

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

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

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

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

  • 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-стиль через исходный код

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

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

  • title — название страницы,
  • description — описание страницы,
  • h1-h6 — заголовки,
  • alt — теги для изображений.

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

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

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

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

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

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

  • «Внутренняя оптимизация сайта: все, что нужно знать о техническом SEO»
  • «Как оптимизировать картинки для SEO-продвижения и привлечь дополнительный трафик»
  • «Как сделать расширенные сниппеты в выдаче „Яндекса“ и Google»

Заключение

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

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

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

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

Workspace.LIVE — мы в Телеграме

Новости в мире диджитал, ответы экспертов на злободневные темы, опросы, статьи и многое другое. Подписывайтесь: https://t.me/workspace

Вакансии

  • Senior Account / Синьор аккаунт-менеджер
    REDKEDS Москва от 170 000
  • Senior strategist / стратегический директор
    REDKEDS Москва до 350 000
  • Bitrix-разработчик (удаленно)
    Lucky Site Удаленная работа По договоренности
  • SMM-менеджер в команду IvlevGroup
    Ivlev Group Москва По договоренности
  • Младший проектный менеджер (корпоративные издания, полиграфия)
    Zebra Corporate Communications Удаленная работа до 50 000

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *