Под всеми красивыми изображениями, совершенной типографией, и чудесно размещенными призывами к действию, расположен исходный код вашего сайта.
Ежедневно, этот код ваш браузер превращает во впечатляющие страницы для ваших посетителей и клиентов.
Google и другие поисковые системы «читают» этот код, чтобы определить, где ваши веб-страницы должны появиться в их индексах для данного поискового запроса.
Следовательно, очень большое значение для поисковой оптимизации (SEO) имеет то, что находится в исходном коде.
Это краткое руководство, продемонстрирует вам, как читать исходный код вашего сайта для того, чтобы вы были уверены, в правильности SEO и чтобы научить вас проверять ваши условия SEO.
Также рассмотрим несколько других ситуаций, когда знания, как просмотреть и изучить главные части исходного кода, помогут в других маркетинговых изысканиях.
Как просмотреть исходный код.
Первый шаг в проверке исходного кода вашего сайта, это посмотреть реальный исходный код. Любой веб-браузер позволяет сделать это легко.
Ниже перечислены клавиатурные команды для просмотра исходного кода вашей веб-страницы для PC
и Mac
.
- Firefox — CTRL + U (Удерживая нажатой клавишу CTRL, нажмите клавишу»U») Кроме того, вы можете пойти в меню «Firefox», затем нажмите » Web Developer «, а затем» Исходный код страницы «.
- Internet Explorer — CTRL + U. Или щелкните правой кнопкой мыши и выберите пункт «View Source».
- Хром — CTRL + U. Вы можете нажать на изображение ключа с тремя горизонтальными линиями в правом верхнем углу. Затем нажмите на «Инструменты» и выберите «View Source».
- Опера — CTRL + U. Вы также можете щелкнуть правой кнопкой на веб-странице и выбрать «Просмотр исходного кода страницы.»
Макинтош
- Safari — сочетание клавиш Option + Command + U. Вы также можете щелкнуть правой кнопкой на веб-странице и выберите «Показать Page Source».
- Firefox — Вы можете щелкнуть правой кнопкой и выберите пункт «исходный текст» или вы можете перемещаться в меню «Сервис», выберите «Web Developer», и нажмите «Page Source.» Сочетание клавиш Ctrl + U.
- Хром — Перейдите в «Вид», затем нажмите «разработчик», а затем «View Source». Вы также можете щелкнуть правой кнопкой и выберать пункт «Просмотр исходного кода страницы.» Сочетание клавиш Option + Command + U.
После того, как вы знаете, как просмотреть исходный код, вы должны знать, как осуществить поиск в нем.
Как правило, одни и те же функции поиска, которые вы используете при нормальном просмотре веб-страниц, применяются и к поиску в исходном коде.
Команды, CTRL + F (найти) поможет Вам быстро просмотреть исходный код важных элементов SEO.
Теги заголовков.
Тег заголовка является самым главным элементом SEO.
Это самое главное в исходном коде.
Если вы собираетесь взять одну лишь ценную вещь из этой статьи, обратите внимание на это:
Вы знаете, эти результаты Google предоставляет, когда вы ищете что-то.
Все эти результаты берутся из тегов заголовков веб-страниц. Так что, если у вас нет тегов заголовков в исходном коде, вы можете не появиться в Google (или в любой другой поисковой системе).
Верите или нет, я на самом деле видел веб-сайты без тегов заголовков. Давайте попробуем сделать быстрый поиск в Google для термина «Marketing Guides
«. Что мы видим: 
Вы можете видеть, первый результат поиска для блога KISSmetrics
раздел Marketing Guides
.
Если мы перейдем по ссылке первого результата поиска и просмотрим исходный код страницы, то можно увидеть в заголовке тег:
Тег заголовка обозначается открывающим тегом:
</b>. и заканчивается закрывающим тегом: <b></ <i>title
</i>>
</b>. Тег заголовка, расположен как правило, в верхней части исходного кода в разделе <b><head>
</b>.
</i></p>
<p>И мы видим, что содержание внутри тега заголовка соответствует тому, что используется в заголовке результата поиска Google.</p>
<p>Но не только теги заголовков необходимы для того чтобы быть включенными в результаты поиска Google.</p>
<p>Google еще и идентифицирует слова в тегах заголовков в качестве важных ключевых слов, которые, по его мнению актуальны для поиска пользователей.</p>
<p>Так что если вы хотите получить определенное ранжирование веб-страницы для конкретной темы, то вам лучше убедиться, что слова, которые описывают предмет включены в тег заголовок.
</p>
<p>Существует целый ряд онлайновых ресурсов, где вы можете узнать больше о том, как ключевые слова и теги заголовков играют важную роль в <a href="/mikroprocessory-referat-arhitektura-mikroprocessora--/">общей архитектуре</a> вашего сайта.</p>
<p>Вот некоторые важные пункты, которые позволят вам помнить о важности ваших Тег заголовков:</p>
<ul><li>Убедитесь, что у вас есть только один тег заголовка на веб-страницу.</li>
<li>Убедитесь в том, что каждая веб-страница на сайте имеет свой тег заголовок.</li>
<li>Убедитесь, что каждый тег заголовок на сайте уникален. Никогда не дублируйте контент определенного тега заголовка.</li>
</ul><h3></h3>
<p>Следующий <a href="/gde-stavit-heshtegi-v-instagramm-heshtegi-v-instagramm---samyi/">важный элемент</a> головной части вашей веб-страницы является мета-тег описания.
</p>
<p>Это фрагмент вашего контента из 160 символов, который отображается под вашим заголовком в поисковых системах.
</p>
<p><img src='https://i1.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/read-website.png' height="511" width="500" loading=lazy></p>
<p>Я видел сотни сайтов, которые полностью игнорируют этот тег.
</span><span>Его очень легко найти в исходном коде:
</p>
<p><img src='https://i1.wp.com/infobiz-tools.com/wp-content/uploads/2014/02/how-read1.png' width="100%" loading=lazy></p>
<p>Таким образом, проверьте и убедитесь, что этот тег присутствует на всех веб-страницах вашего сайта. Что еще более важно, убедитесь, что вы не дублируете его на нескольких страницах.</p>
<p>Дублирование мета-тег описания не пинальти для <a href="/kakie-byvayut-poiskovye-sistemy-kakie-est-poiskovye-sistemy/">поисковой системы</a>, но это очень большая маркетинговая ошибка.</p>
<p>Многие игнорируют мета тег описания, но вы действительно должны поработать в этом направлении, потому что он считывается поисковой системой.</p>
<p>Подумайте о том, что мета-тег описания будет помощью привлечь больше посетителей и увеличить целевые переходы на сайт.</p>
<p>Как изменить код элемента на сайте — для начала нужно узнать в каком файле находится этот код. Есть много способов, но опишу один, наиболее мне приглянувшийся и который использую сам.</p>
<p>Вы можете увидеть код <a href="/elementy-yandeksa-dlya-internet-explorer-chto-eto-za-programma-i-nuzhna-li-ona/">нужного элемента</a> нажав правой кнопкой мыши и исследовать его или посмотреть исходный код страницы. Во всех браузерах аналогичный способ, для каждого существуют определённые дополнения, осуществляющие эти процессы.</p>
<p>Каждому что-то удобно или нет — этот вопрос обсуждать не будем. Наша задача — найти файл с расположенным кодом.</p>
<h2>Как найти файл:</h2>
<p>Я использую <a href="/failovyi-menedzher-android-vybiraem-luchshii-failovyi-menedzher-i/">файловый менеджер</a> <a href="/plaginy-total-commander-rasshiryaem-funkcionalnost-total-commander/">Total Commander</a>. Нахожу это очень удобным методом.</p>
<p>Итак, например мы нашли элемент, подсветив его в браузере и увидели, что он заключен в <<span>div
<span>class
=»wpb_wrapper
«
</span>>
</p>
<p>Для начала лучше скопировать папку с вашим сайтом с сервера и расположить её в удобном месте, рабочий стол к примеру.</p>
<p>Копируем <<span>div
<span>class
=»wpb_wrapper
«
</span>>
</span> и открываем Commander. Выбираем инструменты — поиск</p>
<p>Место поиска — выбираете ранее сохранённую папку с сайтом. Ставите галочку с текстом и вводите искомый <div> или что вам нужно.</p>
<p>Программа выдаст расположение всех файлов, в которых он присутствует. Как изменить код сайта — вы уже знаете какой файл нужно редактировать.</p>
<p>Если на сервере нет редактора — меняете на компьютере и загружаете по FTP.</p>
<p>Экспериментируйте, сокращайте или увеличивайте запрос — найдётся всё, но не стоит искать динамически подгружаемые данные. Естественно они не покажутся.</p>
<p>Также с помощью браузера изменяются и стили. Подсветили, увидели номер строки, открыли файл стилей и ввели <a href="/chto-takoe-funkciya-srznach-v-excel-i-dlya-chego-ona-nuzhna-raschet-srednego/">нужное значение</a>. Успехов!</p>
<p>Эта статья - дополнение к статье про деобфускацию скриптов. Здесь будут рассмотрены основные принципы шифровки и упаковки, <a href="/trolling-vkontakte-neskolko-pervyh-shagov-trolling-vkontakte/">слабые места</a> защит, способы ручного снятия, а также <a href="/vk-udalos-proiti-avtorizaciyu-zashchishchennomu-problemy/">универсальные инструменты</a> для автоматического снятия упаковщиков и навесной защиты со <a href="/ajax-skripty-ajax-primery-na-javascript-otpravka-dannyh-na-server/">скриптов JavaScript</a>. В <a href="/vkontakte-ne-pokazyvaet-vremya-poslednego-poseshcheniya-rezhim/">последнее время</a> все чаще исходный код скриптов шифруется или пакуется. Этим начали увлекаться Яндекс, DLE и другие популярные проекты, а красивые байки про "заботу о пользователях", "экономию трафика" и прочую чушь выглядят очень смешно. Что ж, если кому-то есть что скрывать, значит наша задача вывести их на чистую воду.</p><p>Начнем с теории. Из-за особенностей выполнения JavaScript все шифровщики и упаковщики, несмотря на их разнообразие, имеют всего два варианта алгоритма:или как вариант:Второй способ чаще всего используется для защиты <a href="/kak-prosmotret-html-kod-stranicy-kak-posmotret-ishodnyi-kod-stranicy-i/">исходного html-кода</a> страницы, а также разными троянами для внедрения в страницу <a href="/vredonosnyi-kod-wordpress-moral-pro-besplatnyi-syr-podmena/">вредоносного кода</a>, например скрытого фрейма. Оба алгоритма могут комбинироваться, "навороченность" и запутанность расшифровщика может быть любой, неизменным остается только сам принцип.</p><p>В обеих случаях получается, что функциям <b>eval()
</b> и <b>document.write()
</b> передаются полностью расшифрованные данные. Как их перехватить? Попробуйте заменить <b>eval()
</b> на <b>alert()
</b>, и в открывшемся MessageBox"е вы сразу увидите расшифрованный текст. Некоторые браузеры позволяют копировать текст из MessageBox"ов, но лучше воспользоваться таким вот полуавтоматическим декодером:</p><ol><li>
<span><
html
>
</span></li>
<li>
<span><
head
><
title
>
JavaScript Decoder
</
title
></
head
>
</span></li>
<li>
<span><
body
>
</span></li>
<li>
<span><
script type
=
"text/javascript"
>
</span></li>
<li><span>// Функция записи в лог результатов расшифровки
</span></li>
<li>
<span>function
decoder
(str
) {
</span></li>
<li>
<span> document
.
getElementById
("decoded"
).
value
+=
str
+
"\n"
;
</span></li>
<li>
<span></script>
</span></li>
<li>
<span><!--
Окно лога
-->
</span></li>
<li>
<span><
textarea id
=
"decoded"
style
=
"width:900px; height:500px;"
></
textarea
>
</span></li>
<li>
<span><
script type
=
"text/javascript"
>
</span></li>
<li>
<span></script>
</span></li>
<li>
<span></
body
>
</span></li>
<li>
<span></
html
>
</span></li>
</ol><p>Для примера возьмем какой-нибудь скрипт с Яндекса, посмотрев исходный код видим что-то нездоровое:</p><p>Eval(function(p,a,c,k,e,r){e=function(c){return(c<a?"":e(parseInt(<br>
c/a)))+((c=c%a)>35?String.fromCharCode(c+29):c.toString(36))};if(!<br>
"".replace(/^/,String)){while(c--)r=k[c]||e(c);k=}];e=function(){return"\w+"};c=1};while(c--)if(k[c])<br>
p=p.replace(new RegExp("\b"+e(c)+"\b","g"),k[c]);return p}("$.1e<br>
.18=8(j){3 k=j["6-9"]||"#6-9";3 l=j["6-L"]||".u-L";3 m=j["6-L-17"]<br>
||"";3 n=j["1d"]||0;$(5).2(".6-9").14("7");$(5).2(".6-9").Z("7",8(<br>){3 a=$(5).x();3 o=$(5).x();3 h=$(5).B("C");$(5).v("g-4");$(5).16(<br>
$(k).q());3 t=$(o).2("15");3 c=$(o).2(".b-r");3 d=$(o).2(".b-12");<br>
[остальной такой же бред отрезан]</p><p>Сразу скажу, что этот скрипт обработан JavaScript Compressor , его легко узнать по сигнатуре - характерному названию фукнции в начале скрипта. Копируем целиком исходный текст скрипта, заменяем первый <b>eval
</b> на <b>decoder
</b>, вставляем в декодер и сохраняем его как html-страничку.Открываем ее в любом браузере и видим, что в textarea сразу появился распакованный скрипт. Радоваться пока рано, в нем убраны все переносы строчек и форматирование кода. Как с этим бороться написано в статье про деобфускацию .</p><p>Второй пример. Вот html-страничка , накрытая <a href="/fotolaboratoriya-osnovnye-harakteristiki-slaid-shou-html-zachem-polzovatsya/">программой HTML</a> Protector. Это страница, демонстрирующая возможности программы, поэтому там задействованы все опции: блокировка выделения и копирования текста, запрет правой кнопки мыши, защита картинок, скрытие строки состояния, шифрование html-кода и т.д. Открываем исходный код, смотрим. В самом верху уже знакомый нам document.write и зашифрованный скрипт. Запускаем его через декодер, получаем функцию расшифровки основного содержимого:</p><p>Code (JavaScript) :</p>
<ol><li>
<span>hp_ok
=
true
;function
hp_d01
(s
){ ...
вырезано
...
o
=
ar
.
join
(""
)+
os
;
document
.
write
(o
)
</span></li>
</ol><p>Заменяем в функции последний document.write на decoder и вставляем после нее все три оставшихся зашифрованных скрипта:</p><ol><li>
<span><
script type
=
"text/javascript"
>
</span></li>
<li><span>// Сюда вставить зашифрованный скрипт, предварительно
</span></li>
<li><span>// заменить в нем все вызовы eval() и document.write() на decoder().
</span></li>
<li>
<span>hp_ok
=
true
;function
hp_d01
(s
){ ....
o
=
ar
.
join
(""
)+
os
;
decoder
(o
);
</span></li>
<li>
<span>hp_d01
(unescape
(">QAPKRV%22NCLEWC ....
</span></li>
<li>
<span>hp_d01
(unescape
(<span>">QAPKRV%22NCLEWCEG? HctcQa ...
</span></li>
<li>
<span>hp_d01
(unescape
(<span>">`mf{%22`eamnmp? !DDDDDD %22v ...
</span></li>
<li>
<span></script>
</span></li>
</ol><p>Для удобства в статье скрипты приводятся не полностью, вы же должны копировать их целиком. Открываем декодер в браузере и видим защитные скрипты, добавленные программой, и расшифрованный исходный текст страницы. Для удобства можно расшифровывать только третий скрипт, в котором содержится html-код страницы. Вот и вся защита. Как видите, ничего сложного. Аналогично снимаются и другие защиты html-страниц.</p><p>От ручной расшифровки перейдем к автоматической. Для снятия защит первого типа я немного модифицировал уже известный вам скрипт Beautify Javascript и откомпилировал его в exe-файл. Он без проблем справляется с большинством виденных мной защит и упаковщиков JavaScript.</p><p>Eval.JavaScript.Unpacker.1.1-PCL.rar (12,124 bytes)<br class="clean"></p><br>
Для более <a href="/kak-vybrat-chernyi-cvet-v-fotoshope-bystryi-instrument-dlya/">сложных случаев</a> придется пускать в ход тяжелую артиллерию. Это <a href="/kakim-dolzhno-byt-portfolio-veb-dizainera-ispolzuite-kachestvennye/">бесплатный проект</a> , предназначенный для исследования троянов и другого вредоносного кода. Поскольку все программы, предназначенные для защиты авторского права, являются однозначно вредоносными, Malzilla поможет нам в борьбе с ними. Качаем (на сегодняшний день это 1.2.0), распаковываем, запускаем. Открываем вторую вкладку Decoder, в <a href="/rabota-v-programme-finder-chto-takoe-finder-v-macos-verhnee-menyu-okna-finder/">верхнее окно</a> вставляем код зашифрованного скрипта, нажимаем кнопочку <b>Run script
</b>.<p><img src='https://i2.wp.com/manhunter.ru/upload/1a/87/1a870b5012697202749e9805fa585605.jpg' width="100%" loading=lazy><br></p><br>
В папке <b>eval_temp
</b> складываются все результаты выполнения функций eval(), в том числе и промежуточные. Их можно посмотреть, нажав на кнопку <b>Show eval() results
</b>, текст откроется в нижнем окне. Его можно скопировать, вставить в верхнее окно и сразу же отформатировать нажатием кнопки <b>Format code
</b>. Кроме декодера Malzilla имеет еще множество инструментов и настроек, позволяющих легко снять любую защиту со скриптов JavaScript.<p><img src='https://i2.wp.com/manhunter.ru/upload/ac/a3/aca3d2c4d32a52d784fbb6b0bdecad0e.jpg' width="100%" loading=lazy><br></p><br>
Также можно обратить внимание на еще один <a href="/kak-proverit-skolko-pamyati-zanimayut-opredelennye/">бесплатный инструмент</a> для работы с зашифрованными скриптами - FreShow . Функций в нем поменьше, но вполне имеет место быть. С офсайта можно скачать демонстрационный ролик, показывающий пример работы с программой.<p>Как видите, нет ничего сложного в снятии защиты со скриптов JavaScript и с html-страниц. Вы все еще продолжаете защищать свои поганые "аффтарские права"? Тогда мы идем к вам!
</p>
<p>Мы выпустили <a href="/periskop-chto-eto-za-prilozhenie-i-s-chem-ego-edyat-kseniya-nova-kniga/">новую книгу</a> «Контент-маркетинг в <a href="/registraciya-vkontakte-socialnaya-set-kak-zaregistrirovatsya-v-socialnoi-seti-facebook-registraci/">социальных сетях</a>: Как засесть в голову подписчиков и влюбить их в свой бренд».</p>
<form onsubmit="return false;" class="innerContentSubscribe_form swpmc-js-form" data-container=".innerContentSubscribe" data-on-success="swptEvents.blogSubscribeSuccess()">
<p> <input class="inputText js-placeholder" type="text" name="email" id="innerContentSubscribeEmail" value=""></p>
<p>Подписаться</p>
</form>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2017/11/code-3.png' align="center" width="100%" loading=lazy></p>
<p>Исходный код сайта – это совокупность HTML-разметки, CSS стилей и скриптов JavaScript, которые браузер получает от веб-сервера.</p>
<p><span class="YLlDA5uz9EU"></span></p>
<p><b>Больше видео на нашем канале - изучайте интернет-маркетинг с SEMANTICA
</b></p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2017/12/yutub.png' height="37" width="178" loading=lazy></p>
<p>Его можно сравнить с набором команд, которые дает солдатам командир. Представьте, что зрители не видят и не слышат начальника. С их точки зрения военные самостоятельно выполняют действия. В нашем случае командир – это браузер, команды – это исходный код, а марширующие солдаты – это конечный результат.</p>
<p>Хранится сайт на веб-сервере, который отправляет страницу по запросу пользователя. Запрос – это ввод URL в строке адреса, щелчок по ссылке или нажатие на кнопку отправки данных в форме. Не важно, на каком языке написаны веб-страницы, включают ли они <a href="/ne-rabotayut-porty-usb-pk-pochemu-ne-rabotayut-usb-porty-na-noutbuke-i/">программную часть</a>. Конечным результатом работы любого серверного алгоритма является набор html-тегов и текста.<br>
Исходный код страницы – это набор данных, включающий в себя:</p>
<ul><li>html-разметку;</li>
<li>стилевую таблицу или ссылку на файл ;</li>
<li>программы, написанные на JavaScript или ссылки на файлы с кодом.</li>
</ul><p>Эти три раздела обрабатываются браузером. Для сервера это просто текст, который необходимо отправить в ответ на запрос.</p>
<h2>Зачем нам может понадобиться изучать исходный код</h2>
<p>Все, что мы увидим, мы сможем проанализировать и применить для решения тех или иных задач, которые возникают в ходе работы с сайтом, особенно при его оптимизации. Просмотрев исходный код, мы можем:</p>
<ul><li>Увидеть мета-теги своего или чужого сайта для их анализа.</li>
<li>Увидеть наличие или отсутствие некоторых элементов на сайте: счетчиков, кодов идентификации в <a href="/summa-sistem-schisleniya-onlain-schet-v-razlichnyh-sistemah-schisleniya/">различных системах</a>, определенных скриптов и прочего.</li>
<li>Узнать параметры элементов: размеры, цвета, шрифты.</li>
<li>Найти путь к фотографиям и другим элементам, располагающимся на странице.</li>
<li>Изучить ссылки со страницы.</li>
<li>Найти проблемы с кодом, мешающие в процессе оптимизации сайта: невынесенные в <a href="/kak-v-fotoshope-eksportirovat-vse-sloi-v-otdelnye-faily/">отдельные файлы</a> стили, скрипты, невалидный код.</li>
</ul><p>Это основные возможности, но на самом деле, умея читать код, вы сможете узнать о странице намного больше.</p>
<h2>Как посмотреть исходный код сайта</h2>
<p>Полностью в том виде, в каком он выложен на сервере, из браузера это сделать не удастся. А вот увидеть всю разметку можно, нажав на странице <a href="/perestala-rabotat-pravaya-knopka-myshi-chto-delat-chto-delat-esli-ne/">правую кнопку</a> мыши. Здесь и далее на <a href="/kak-ustanovit-melodii-na-samsung-galaksi-kak-postavit-svoi-rington-na/">примере Google</a> Chrome.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/09ffa0c60f.png' align="center" width="100%" loading=lazy></p>
<p>Выбираем опцию «Просмотр кода страницы» и получаем полный листинг в отдельной вкладке.</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/11e92d1f09.png' align="center" width="100%" loading=lazy></p>
<p>Это просто текст, который придется анализировать, чтобы понять. А вот получить интерактивный код можно с помощью инструментов разработчика.</p>
<h2>Как найти исходный код страницы сайта</h2>
<p>Нажимаем на значок меню в браузере. Чаще всего он находится справа и имеет вид трех точек или полосок.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/712414eef9.png' align="center" width="100%" loading=lazy></p>
<p>В разделе <a href="/kak-zashchitit-kompyuter-ot-virusov-pamyatka-ustanovit/">дополнительных инструментов</a> выбираем «Инструменты разработчика».</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/48cb60e66c.png' align="center" width="100%" loading=lazy></p>
<p>Откроется окно, в котором отображается активное состояние кода. Это значит, что при щелчке мыши на разметке рядом отобразится стиль элемента, а на странице будут подсвечиваться выбранные блоки.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/b5c5367f08.png' align="center" width="100%" loading=lazy></p>
<p>Во вкладке «Source» можно просмотреть содержимое некоторых файлов: скрипты, шрифты, изображения.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/8fb9f8a3b8.png' align="center" width="100%" loading=lazy></p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/3bab1ab266.png' align="center" width="100%" loading=lazy></p>
<p>Во вкладке «Security» доступна проверка сертификата сайта.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/6d29a11c3b.png' align="center" width="100%" loading=lazy></p>
<p>Вкладка «Audits» поможет провести проверку выложенного на хостинг ресурса.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/1330f57b87.png' align="center" width="100%" loading=lazy></p>
<p>Если расположение панели справа неудобно, можно нажать три точки и поменять его, выбрав желаемый пункт.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/7a0e8305f4.png' align="center" width="100%" loading=lazy></p>
<h2>Как посмотреть мета-теги</h2>
<p>Каждый html-документ включает в себя теги структуры. Вот некоторые из них:</p>
<ol><li>Html – весь документ.</li>
<li><span>Head – раздел служебных заголовков.
</span></li>
<li><span>Title – заголовок страницы (отображается на вкладке).
</span></li>
<li><span>Body – тело документа.
</span></li>
<li><span>H1-H6 – заголовки текста страницы.
</span></li>
<li>Article – статья.
</li>
<li>Section – раздел.
</li>
<li>Menu – меню.
</li>
<li>Div – блок.
</li>
<li>Span – строка.
</li>
<li>P – абзац.
</li>
<li>Table – таблица.
</li>
</ol><p>Элементы предназначены для логического разграничения разделов на странице, при необходимости они оформляются с помощью стилей. В них размещается текст, который так или иначе виден на странице. Но в теге Head присутствует служебная информация. Для ее указания служат мета-теги. Все что в них записано, предназначено для сервера и поисковых систем.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/b34bb79f96.png' align="center" width="100%" loading=lazy></p>
<p>Их содержимое другим способом узнать невозможно.</p>
<p>Обратим внимание на <a href="/nastroika-canonical-chto-eto-zachem-i-kak-rel-canonical-atribut-tega/">тег Link</a>. С его помощью указываются ссылки на внешние подключаемые файлы. При желании можно увидеть содержимое и сохранить на диск. Для этого наведите указатель на адрес и нажмите ПКМ. Выберите пункт «Open in new Tab».</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/1685995ee1.png' align="center" width="100%" loading=lazy></p>
<p>В новой вкладке откроется <a href="/ne-udaetsya-naiti-ukazannyi-fail-0x80070002-udalenie-vremennyh-failov/">указанный файл</a>, который можно просмотреть или сохранить.</p>
<h2>Как посмотреть исходный код страницы для отладки скрипта</h2>
<p>В этом случае удобнее всего открывать страницу на локальной машине. Если необходимо только исправить разметку, стили и скрипты, то это можно делать прямо из папки. Html-код просматривается таким же образом. А вот ошибки <a href="/skachat-programmu-javascript-dlya-windows-7-chto-takoe-javascript-primer-razmeshcheniya/">кода JavaScript</a> можно увидеть во вкладке «Console». Здесь показывает описание ошибки и номер строки, в которой она возникла.</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/990abb1c76.png' align="center" width="100%" loading=lazy></p>
<p>Синтаксическую можно увидеть непосредственно в коде. Для этого предназначена вкладка «Source».</p>
<p><img src='https://i2.wp.com/semantica.in/wp-content/uploads/2018/02/0961303a76.png' align="center" width="100%" loading=lazy></p>
<h2>Как посмотреть код конкретного элемента</h2>
<p>Для <a href="/posadochnaya-stranica-landing-page-bolshii-obem-teksta-po-moemu-eto/">больших страниц</a> с <a href="/vse-chto-nuzhno-znat-o-macbook-pro-touch-bar---novoe-nashe-vse-displei-obladaet-bolshim/">большим количеством</a> элементов сложно найти <a href="/chto-takoe-qr-kod-dlya-chego-nuzhen-qr-kod-kak-sozdat-qr-kod-i-zachem-eto-nuzhno/">нужный код</a> во всей разметке. В таком случае следует воспользоваться <a href="/ustanovochnyi-vindovs-7-na-fleshku-vvod-specialnyh-komand-menyaem-standartnoe/">специальной командой</a> <a href="/udalit-dobavit-v-biblioteku-iz-kontekstnogo-menyu-nastraivaem/">контекстного меню</a>. Наведем мышь на фрагмент и нажмем ПКМ. Выберем команду «Просмотреть код».</p>
<p><img src='https://i0.wp.com/semantica.in/wp-content/uploads/2018/02/296c218cf5.png' align="center" width="100%" loading=lazy></p>
<p>Откроется то же окно, но с фокусировкой на выбранном объекте.</p>
<p><img src='https://i1.wp.com/semantica.in/wp-content/uploads/2018/02/2eb093fc23.png' align="center" width="100%" loading=lazy></p>
<h2>Резюме</h2>
<p>Мы рассказали, что такое исходный код страницы. Достаточно освоить элементарные знания HTML и CSS, и пользуясь <a href="/rezervnaya-kopiya-draiverov-windows-xp-double-driver-udobnyi-i-moshchnyi-instrument-dlya/">удобными инструментами</a> разработчика, вы сможете проводить отладку своих собственных html-документов.</p>
<p>Просмотр кода ресурсов в интернете позволит вам учиться не только на <a href="/razrushayu-mify-na-sobstvennom-opyte-realno-li-zarabotat-na-birzhe-sposob/">собственном опыте</a>, но и использовать реальные рабочие примеры. А для seo-специалистов будут полезны мета-теги, информация в которых может сказать о сайте многое.</p>
<p>Просматривая бесчисленное множество сайтов в интернете, можно встретить такие, которые очень нам нравятся. Сразу же возникает ряд вопросов. Сайт сделан с помощью самописного кода или какой-нибудь CMS? Какие у него <a href="/vneshnii-vid-nazvaniya-polei-ili-kak-izmenit-placeholder-kak-izmenit-cvet/">CSS стили</a>? Какие у него мета-теги? И так далее.</p>
<p>Существует много инструментов, с помощью которых можно извлечь информацию о коде страницы сайта. Но под рукой у нас всегда есть правая кнопка мыши. Её-то мы и будем использовать, на примере моего сайта.</p>
<h2>Как просмотреть код страницы?</h2>
<p>Чтобы посмотреть исходный код страницы сайта, нужно навести курсор мыши на любую область веб-страницы (за исключением изображений и ссылок). После этого нажать на правую кнопку мыши. Перед нами откроется окно с несколькими опциями (в <a href="/yandeks-brauzer-parol-na-vhod-kak-postavit-parol-na-raznye-brauzery/">разных браузерах</a> они могут немного отличаться). В <a href="/vosstanovlenie-udalennoi-istorii-v-google-chrome-istoriya-brauzera-google-chrome/">браузере Google</a> Chrome, например, это команды:</p>
<ul><li>назад;</li>
<li>вперёд;</li>
<li>перезагрузить;</li>
<li>сохранить как;</li>
<li>печать;</li>
<li>перевести на русский;</li>
<li><b>просмотр кода страницы
</b>;</li>
<li>просмотреть код.</li>
</ul><p>Нам нужно кликнуть на <b>просмотр кода страницы
</b>, и перед нами откроется html код страницы сайта.</p>
<h2>Просмотр кода страницы: на что обратить внимание?</h2>
<p>Итак, Html код страницы представляет собой пронумерованный список строк, каждая из которых несёт информацию о том, как сделан данный сайт. Чтобы быстрей научиться разбираться в этом <a href="/ne-zaryazhaetsya-telefon-vozmozhnye-prichiny-i-sposoby-ih/">огромном количестве</a> знаков и <a href="/lyubovnye-simvoly-dlya-vk-specialnye-simvoly-vkontakte/">специальных символов</a>, нужно различать разные участки кода.</p>
<p>Например, строки кода, находящиеся в внутри тега head содержат информацию для <a href="/kak-zaiti-zapreshchennyi-sposoby-dlya-mobilnyh-telefonov-kesh-poiskovyh/">поисковых машин</a> и веб-мастеров. Они не выводятся на сайт. Здесь можно увидеть, по каким <a href="/poiskovaya-sistema-bing-chto-vazhen-kontent-i-plotnost-klyuchevyh-slov/">ключевым словам</a> продвигается эта страница, как написаны её title и description. Также здесь можно встретить ссылку, перейдя по которой узнаем о семействе <a href="/gugl-shrifty-russkie-ispolzovanie-v-css-c-vnedrenie-shriftov-google-s-pomoshchyu/">google шрифтов</a>, используемых на сайте.</p>
<p>Если сайт сделан на <a href="/kak-sozdat-i-vyvesti-menyu-v-wordpress-eto-prosto-s-funkciei-wp-nav-menu/">CMS WordPress</a> или Joomla, то это также будет видно здесь. Например, в этой области выводится информация о <a href="/wordpress-shablony-wordpress-shablony-tema-stroitelnoi-tematiki-dlya-wordpress/">теме WordPress</a> или <a href="/gde-mozhno-skachat-shablony-dlya-joomla-gde-vzyat-wordpress-temy-wordpress/">шаблоне Joomla</a> сайта. Увидеть её можно, прочитав содержание ссылок, выделенных синим цветом. В одной ссылке виден шаблон сайта.</p>
<p>Например:</p>
<p><i>//fonts.googleapis.com/css?family=Source+Sans+Pro%3A400%2C400italic%2C600&ver=4.5.3
</i></p>
<p>Мы увидим CSS стили шрифтов страницы. В <a href="/internet-s-postoplatnoi-sistemoi-mezhdunarodnyi-rouming-tarificiruetsya-v-dannom-sluchae-soglasno-dru/">данном случае</a> используется шрифт. Это видно здесь – font-family: ‘Source Sans Pro’.</p>
<p>Данный сайт оптимизируется с помощью сео-плагина <a href="/nastroika-yoast-seo-versiya-8-1-yoast-ili-all-in-one-seo-pack-kakoi-plagin-vybrat-kak-rabotaet/">Yoast SEO</a>. Это видно из этого закомментированного участка кода:</p>
<p><i>This site is optimized with the Yoast <a href="/seo-rukovodstvo-po-poiskovoi-optimizacii-bloga-na-wordpress-vazhnye/">SEO plugin</a> v3.4.2 — https://yoast.com/wordpress/plugins/seo/
</i></p>
<p>Вся информация, находящаяся внутри тега body, выводится браузером на экране монитора. Здесь мы видим html код страницы, а в самом низу находится код скрипта Яндекс метрики. Он облечён закомментированным тегом с текстом:</p>
<p><i>/Yandex.Metrika counter
</i></p>
<p><img src='https://i1.wp.com/vlad-tver.ru/wp-content/uploads/2016/08/metrika.jpg' width="100%" loading=lazy></p>
<h2>Подводим итоги</h2>
<p>Проведя довольно поверхностный анализ кода <a href="/zapomnit-yandeks-startovoi-stranicei-kak-sdelat-glavnuyu/">главной страницы</a> сайта, можно сделать вывод о том, с помощью каких инструментов сделана эта страница. Мы увидели на ней:</p>
<ul><li>CMS WordPress;</li>
<li>Google шрифт Source Sans Pro;</li>
<li>тема WordPress – Sydney;</li>
<li>плагины Yoast;</li>
<li>счётчик Яндекс метрики.</li>
</ul><p>Теперь принцип анализа <a href="/vklyuchenie-css-v-html-kod-oformlenie-html-tegov-atributom-style-vstroennye/">html кода</a> страницы сайта вполне понятен. Совсем необязательно держать исследуемую страницу открытой в браузере. Сохранить код страницы себе на компьютер можно с помощью комбинаций клавиш ctrl+a, ctrl+c, ctrl+v. Вставьте её в любой <a href="/dlya-obrabotki-tekstovoi-informacii-na-kompyutere-ispolzuyutsya-tekstovye/">текстовый редактор</a> (лучше Notepad++) и сохраните с <a href="/html-kod-kody-cvetov-html-html---chto-eto-za-rasshirenie-html-dlya/">расширением html</a>. Таким образом, вы в любое время сможете изучить её глубже и найти больше полезной для себя информации.</p>
<script>document.write("<img style='display:none;' src='//counter.yadro.ru/hit;artfast_after?t44.1;r"+
escape(document.referrer)+((typeof(screen)=="undefined")?"":
";s"+screen.width+"*"+screen.height+"*"+(screen.colorDepth?
screen.colorDepth:screen.pixelDepth))+";u"+escape(document.URL)+";h"+escape(document.title.substring(0,150))+
";"+Math.random()+
"border='0' width='1' height='1' loading=lazy>");</script>
</article>
<div id="disqus_thread">
<div id="dsq-content">
<ul id="dsq-comments">
<li class="comment even thread-even depth-1" id="dsq-comment-2">
<div id="dsq-comment-header-2" class="dsq-comment-header">
<cite id="dsq-cite-2">
<span id="dsq-author-user-2">Сергей Савенков</span>
</cite>
</div>
<div id="dsq-comment-body-2" class="dsq-comment-body">
<div id="dsq-comment-message-2" class="dsq-comment-message">
<p>какой то “куцый” обзор… как будто спешили куда то</p>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</div>
<div class="wpb_column vc_column_container td-pb-span4">
<div class="vc_column-inner ">
<div class="wpb_wrapper">
<div class="wpb_widgetised_column wpb_content_element">
<div class="wpb_wrapper">
<div class="td-a-rec td-a-rec-id-sidebar td-rec-hide-on-p ">
<div id="adriver_banner_1494422254"></div>
</div>
<div class="td-a-rec td-a-rec-id-custom_ad_1 td-rec-hide-on-p ">
<div>
</div>
<div id='div-gpt-ad-1491821174306-2' style='height:600px; width:300px;'>
</div>
</div>
<div class="td-a-rec td-a-rec-id-custom_ad_2 td-rec-hide-on-p ">
<div>
</div>
<div id='div-gpt-ad-1491821174306-3' style='height:600px; width:300px;'>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="td-footer-wrapper td-footer-template-14">
<div class="td-container td-footer-bottom-full">
<div class="td-pb-row">
<div class="td-pb-span3">
<aside class="footer-logo-wrap"><a href="/"><img class="td-retina-data" src="/uploads/logo.png" data-retina="/wp-content/uploads/2017/02/logo_544x180_bw.png" alt="Техника. Новости. Телефоны. Ноутбуки. Сравнение. Windows" title="Техника. Новости. Телефоны. Ноутбуки. Сравнение. Windows"/ loading=lazy></a></aside>
</div>
<div class="td-pb-span5">
<aside class="footer-text-wrap">
<div class="block-title"><span>Общая информация</span></div>.</aside>
</div>
<div class="td-pb-span4">
<aside class="footer-social-wrap td-social-style-2">
<div class="block-title"><span>Сайт в социальных сетей</span></div>
<span class="td-social-icon-wrap">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https://danykom.ru/rasshifrovat-kod-stranicy-v-kontakte-onlain-kak-izmenit/" title="Facebook">
<i class="td-icon-font td-icon-facebook"></i>
</a>
</span>
<span class="td-social-icon-wrap">
<a target="_blank" href="" title="Instagram">
<i class="td-icon-font td-icon-instagram"></i>
</a>
</span>
<span class="td-social-icon-wrap">
<a target="_blank" href="" title="RSS">
<i class="td-icon-font td-icon-rss"></i>
</a>
</span></aside>
</div>
</div>
</div>
</div>
<div class="td-sub-footer-container">
<div class="td-container">
<div class="td-pb-row">
<div class="td-pb-span7 td-sub-footer-menu">
<div class="menu-td-demo-footer-menu-container">
<ul id="menu-td-demo-footer-menu" class="td-subfooter-menu">
</ul>
</div>
</div>
<div class="td-pb-span5 td-sub-footer-copy">
© 2024 Техника. Новости. Телефоны. Ноутбуки. Сравнение. Windows </div>
</div>
</div>
</div>
</div>
<link rel='stylesheet' id='css-5-css' href='/wp-content/mmr/ffba0e2b-1516146715.min.css' type='text/css' media='all' />
<script type='text/javascript' src='https://danykom.ru/wp-content/mmr/4ab436a1-1516146715.min.js'></script>
<script>
(function() {
var html_jquery_obj = jQuery('html');
if (html_jquery_obj.length && (html_jquery_obj.is('.ie8') || html_jquery_obj.is('.ie9'))) {
var path = '/wp-content/themes/Newspaper/style.css';
jQuery.get(path, function(data) {
var str_split_separator = '#td_css_split_separator';
var arr_splits = data.split(str_split_separator);
var arr_length = arr_splits.length;
if (arr_length > 1) {
var dir_path = '/wp-content/themes/Newspaper';
var splited_css = '';
for (var i = 0; i < arr_length; i++) {
if (i > 0) {
arr_splits[i] = str_split_separator + ' ' + arr_splits[i];
}
//jQuery('head').append('<style>' + arr_splits[i] + '</style>');
var formated_str = arr_splits[i].replace(/\surl\(\'(?!data\:)/gi, function regex_function(str) {
return ' url(\'' + dir_path + '/' + str.replace(/url\(\'/gi, '').replace(/^\s+|\s+$/gm, '');
});
splited_css += "<style>" + formated_str + "</style>";
}
var td_theme_css = jQuery('link#td-theme-css');
if (td_theme_css.length) {
td_theme_css.after(splited_css);
}
}
});
}
})();
</script>
</body>
</html>
