Как найти свой сайт html

Войти на сайт

или

Забыли пароль?
Еще не зарегистрированы?

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

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

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

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

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

Как найти и изменить html и css код сайта

Если не любите длинные статьи, для вас в конце статьи видеоурок, в котором рассказывается, как можно увидеть код html сайта с помощью Notepad++ и внести изменения в дизайн любого шаблона на примере, как поменять цвет шрифта. В видео найдутся и другие тонкости обращения с блогом. А для тех, кому ближе и понятнее текст, внизу подробный разбор темы со скриншотами.
httpv://youtu.be/uIlVvwCt2ho

Термины и понятия

Было бы точнее называть статью «Как найти код css«, но я решил остановиться на «неправильном» названии, потому что в основном ответ на этот вопрос ищут в html. CSS и HTML — очень разные вещи, хоть и являются двумя частями одной системы. В интернете много технических статей, нам здесь достаточно будет понять, что:

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

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

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

Однажды я посмотрел, что именно делает мастер. До сих пор не знаю, как устроен предохранитель. Но знаю, где его менять). Мотор я чинить сам бы не стал, а уж предохранитель заменить не сложно. Так же и с сайтами.

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

Нужно ли быть специалистом во всем

В seo-блогах часто ведутся дискуссии, нужно ли новичку глубоко разбираться в html, а еще лучше — научиться самим писать сайты, чтобы было все уникальное.. Ну, не знаю — каждому свое и тут уж кому что ближе. Мне интересно чуть больше, поэтому я сейчас дополнительно учусь у Владимира. В ноябре этого года Владимир открыл свой авторский блог. Его блог сделан на самом простом, бесплатном шаблоне, он его лишь чуть изменил под себя.

Через 10 дней существования блог занял 104-е место в рейтинге всех сайтов Рунета с посещаемостью около 1,5 тысяч человек в сутки. За 10 дней. Так в чем же дело? Владимир прекрасно разбирается в html, может заказать и купить себе уникальный шаблон. Вот и вы должны понять, что секрет кроется не в шаблонах, а в полезности информации.

Где прячется код html

Простите за отступление, вернемся к нашим кодам). Допустим, вы хотите изменить цвет шрифта заголовка блога. Будем рассматривать на примере моего тестового сайта.

1. Открываем сайт в браузере Google Chrome (если еще не пользуетесь им, установите — он хорошо заточен для работы с сайтами, в нем много встроенных инструментов).
2. Наводим курсор мышки на элемент, который собираемся изменить. В данном случае — на название блога. Щелкаем по нему «правой» мышкой и в появившемся окне выбираем ПРОСМОТР КОДА ЭЛЕМЕНТА.

ВАЖНО: не перепутайте с ПРОСМОТРОМ КОДА СТРАНИЦЫ! Вся страница нам сейчас не нужна, только отдельный элемент.

Щелкаем по нему  — в нижней части браузера появляется окно просмотра кода:

Красным выделена строка кода, которую мы меняем.

А вот в области, выделенной синим, содержится то, что мы ищем. Именно здесь вы можете найти точную (а не приблизительную) строчку кода, отвечающую за шрифты, цвет, размер, выделение и прочее. Таким образом вы можете узнать ЛЮБОЙ код любого элемента любого шаблона.

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

Общий принцип, где что ищется:

Название шрифта — в строке FONT FAMILY

Размер шрифта — в строке FONT SIZE

Цвет шрифта — в строке COLOR

Вот три основные строчки, в которых меняется название, размер и цвет шрифта любого элемента. Справа в строке style css дается позиция строчки в документе. Если вам нужно изменить какой-то другой элемент (например, нужно узнать, где находится строчка. в которой можно изменить цвет панели меню или цвет ссылок), все делается абсолютно так же.

ВНИМАНИЕ:

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

чтобы потом найти ее в таблице стилей.

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

#header h1 a, #header h1 a:visited {

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

Итак, заходим в админпанель: КОНСОЛЬ — ВНЕШНИЙ ВИД — РЕДАКТОР. В правом сайдбаре находим файл ТАБЛИЦА СТИЛЕЙ (STYLE.CSS), открываем его.

Теперь открываем строку поиска клавишами CTRL + F: в верхнем окне появится пустая строчка-окошко. Вставляем  в него ту строку, что скопировали в пункте 4.

И вы увидите, как в таблице стилей эта строчка выделится (на рисунке — оранжевым цветом):

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

#282828

Выбрать цвет можно в любом сервисе палитр веб-цветов: наберите в поисковике «Палитра веб-цветов» и подберите тот, что хотите. Выбираем цвет, копируем его цифровое значение и аккуратно подставляем взамен старого. после чего нажимаем ОБНОВИТЬ ФАЙЛ и переходим смотреть, что получилось.

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

Описывается это долго, но на практике все делается быстро, особенно когда появляется начальный навык.

Более подробно, как изменить те или иные элементы:

Как изменить шрифт в заголовке блога

Как изменить шрифт в заголовке поста

Как изменить Home на Главную

Как изменить «читать далее»

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

Предлагаю посмотреть видео Артема Абрамовича, как искать и находить в любой теме/шаблоне, для любого движка (wordpress, joomla и т.п.) любое слово или элемент и заменить на то, что вам надо:

Часто возникают ситуации, когда необходимо проанализировать содержимое веб-страницы: посмотреть 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-элементы сайта, выгрузить из него картинки, посмотреть используемые элементы и узнать много другой полезной информации.

Время на прочтение
7 мин

Количество просмотров 11K

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

Берем в учет то, что сайт уже разработан и просто лежит где-то на тесте.

Честно сказать, задачка не из простых.

Итак, поехали: выберете тематику вашего сайта и точно определитесь с тем, что хотите продвигать. Это нужно для того, чтобы у вашего сайта в последствии было максимально релевантное доменное имя к основному запросу. Затем выберете доменное имя, это можно сделать на таких площадках как: nic.ru, reg.ru, beget.com/ru и многих других.

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

1. Домен должен быть коротким

2. Если вы продвигаете проект по РФ или любом регионе России, то доменная зона должна быть .ru (это будет правильнее, нежели для сайта с регионом продвижения к примеру «Владимир» использовать домен с зоной .kz)

3. Очень хорошо, если выберете домен под тематику сайта, к примеру если у вас будет интернет-магазин светильников или других световых приборов, то в названии было бы круто это использовать и делать домен формата:

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

Где будут храниться файлы моего сайта?

Файлы сайтов обычно хранятся на хостинге или сервере.

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

Бывает, что нет финансовой возможности оплачивать сервер. В этом случае, вам помогут хостинги, коих огромное количество. Один из самых стабильных хостингов, что мне попадались — это как раз Beget. Есть хостинги лучше, есть хуже, но его можно посоветовать для маленьких и средних по размерам (до 10 гигабайт) и трафику (до 5000 уников в сутки) проектов.

Если же у вас большие планы, то всё-таки нужен сервер.

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

Выкладываем на хостинг

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

Настроить ответы сервера

1. чтобы 404 ответ отдавался для страниц, которые должны отдавать 404 ответ (проверяется со стороны сервера)

2. чтобы страницы, которые должны отдавать 200ок, отдавали этот ответ. (проверяется со стороны сервера)

3. настроить 304 ответ Last-Modified (проверить эту настройку можно тут: https://last-modified.com/ )

4. Также нужно использовать http 2 версии (проверяется тут: https://http2.pro/ )

Настройте апачи или nginx:

1. 301 редирект всех URL с http на https

2. 301 редирект всех URL с www на без www

3. 301 редирект всех URL без / на конце на со / , либо редирект со / на конце на без /

3 пункт вариативный для новых сайтов, а первые 2 советую оставить в таком формате.

Расписывать по коду нет смысла, так как для разных систем настраивается по-разному и это отдельная тема для статьи.

Robots.txt

Генерируем файл robots.txt, в него нужно прописать закрывающие директивы, исключающие системные файлы и страницы, которые не нужны поисковым роботам. Полностью всё о настройке можно будет найти в статье.

Автогенерирующийся Sitemap.xml

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

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

Фавиконки

Фавиконка по требованиям яндекса должна быть размером: 120 × 120, 32 × 32 или 16 × 16 пикселей или в формате svg.

Ещё фавикон хорошо устанавливать для всех устройств и разрешений:

Подробнее о том, как вставит фавикон для всех устройств: тут.

Настройка микроразметки Open Graph

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

Пример:

<meta property=»og:title» content=»title страницы» />

<meta property=»og:description» content=»description страницы» />

<meta property=»og:site_name» content=»Winrating» />

<meta property=»og:type» content=»website» />

<meta property=»og:url» content=»URL страницы»>

<meta property=»og:image» content=»картинка для страницы» />

<meta property=»og:image:width» content=»310″>

<meta property=»og:image:height» content=»310″>

<meta name=»twitter:card» content=»summary_large_image»>

<meta property=»twitter:title» content=»title страницы»>

<meta property=»twitter:description» content=»description страницы»>

<meta name=»twitter:image» content=»картинка для страницы»>

<meta name=»twitter:image:src» content=»картинка для страницы»>

<meta property=»twitter:image:width» content=»310″>

<meta property=»twitter:image:height» content=»310″> <meta property=»twitter:site» content=»@твиттер проекта»>

Настройка микроразметки Schema.org

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

Подробнее о настройке schema.org можно прочитать тут.

Настройка canonical

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

<meta name=»robots» content=»noindex, follow»/>

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

Настройка страниц пагинаций (если есть)

Для стараниц пагинаций нужно в title, description и h1 дописать: страница пагинации номер и номер пагинации на которой находимся.

Если у вас страницы статей, то можно выводить по 40-60 статей на 1 страницу пагинации

Если карточки товаров, то выводим по 80-120 карточек товаров на 1 страницу.

Добавление сайта в поисковую систему Яндекс

Для добавления сайта в поисковую систему Яндекс, нужно встроить код на все страницы проекта / вставить файл верификации в корень сайта или прописать dns.

Заходим на сайт https://webmaster.yandex.ru/

Нажимаем на кнопку с плюсиком:

Добавляем в вебмастер

Вариант 1: Скачиваем файл верификации

Вот он скачался:

Теперь этот файл нужно залить на FTP (доступ к ftp выдается вместе с правами на хостинг, посмотрите на почте). Очень важно залить файл или в корень сайта или в шаблон (в зависимости от того как сайт сделан). В этом очень хорошо помогает софт: Filezilla

Итак мы залили файл верификации, теперь возвращаемся в вебмастер и нажимаем на кнопку проверить:

Это был описан первый из трех способов, давайте опишу и другие:

Вариант 2: Добавляем код html в код главной страницы вашего сайта (в раздел head)

Чтобы добавить его на сайт, нужно просто его скопировать, найти код главной страницы, к примеру в нашем случае это index.php и встроить его внутрь.

После чего идем по стандартной схеме и подтверждаем в вебмастере права на сайт:

Вариант 3: DNS запись.

Очень часто бывает, что в популярных cms (система управления сайтом) сисемах, есть возможность встроить DNS запись. Либо же на хостингах имеется такая возможность. Вам потребуется только код файла верификации:

Встраиваем его в админку:

Затем снова возвращаемся в вебмастер и нажимаем на подтверждение.

Добавление в ПС GOOGLE

Процедура верификации проектов в Google ничем не отличается от процедуры верификации проектов в Яндекс.

Также заходим на сайт: https://www.google.com/webmasters/tools/home?hl=ru

Добавляем сайт:

И делаем абсолютно те-же действия на выбор что и для яндекса:

1. заливаем файл верификации

2. Или встраиваем в head код для главной страницы

3. Или прописываем DNS

Если все действия выполнены правильно, то сайт обязательно добавится.

У меня не получилось добавить сайт в вебматер, что делать?

Очень часто люди сталкиваются с проблемой того, что вроде всё сделали, но почему-то яндекс не видит верификации и не пропускает после нажатия на кнопку «проверить».

Основными причинами этого могут стать такие моменты как:

1. Файл верификации залит не в корень сайта или не в папку с шаблоном сайта

2. DNS запись пока не обновилась

3. Встроили код верификации не в head главной страницы, а к примеру в body))) и такое бывает.

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

Я всё сделал, что дальше?

Итак мы настроили ответы сервера, настроили пагинации, сделали редиректы там, где они нужны, всё проверили и залили файлы верификации.

Далее для поисковой системы Яндекс необходимо присвоить региональность, это можно сделать тут:

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

Адрес в формате: Индекс, страна, город, улица, дом, номер офиса

Если у вас ООО, то указываем: Юридический адрес и Фактический адрес (если разные, то пишем разные адреса, если один, то пишем один.)

Данные о ИП или ООО: ИНН, ОГРН или ОГРНИП

Данные счета: Расчетный счет, БИК банка, Корреспондентский счет

Также делаем заголовок h2: Как добраться?

И ниже размещаем яндекс и гугл карты

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

Далее переходим снова в вебмастер и указываем страницу контакты, на которой размещена вся эта информация.

Следующим шагом регистрируемся в Яндекс-Бизнес

Карточка яндекс-бизнес должна быть максимально заполненной, для этого перейдите на сайт: https://yandex.ru/sprav/companies

Добавьте компанию

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

Для поисковой системы Google делаем также в Google my business

Заходим на сайт: https://business.google.com/

И также в нем заполняем полностью всё, что только возможно!

Для более быстрого обхода роботами

Для более быстрого обхода поисковыми роботами нужно подключить связку с яндекс метрикой и google Analitics. Также добавить в вебмастер яндекса и google файл sitemap.xml.

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

Затем следим ежедневно за ошибками и исправляем их при возникновении. Читайте другие статьи моего блога и я расскажу более подробно обо всех нюансах seo. Всем спасибо за внимание, пишите комментарии.

Довольно часто новый сайт не получается найти в Яндексе. Даже если набрать в поисковой строке его название. Причины этого могут быть разные. Иногда поисковики просто еще не знают о том, что появился новый ресурс. Чтобы разобраться, в чём дело и решить проблему, нужно зарегистрировать сайт в Яндекс.Вебмастере.

Что такое индексация сайта в Яндексе

Сначала разберёмся, как поисковики вообще узнают о новых сайтах или изменениях на них. У Яндекса есть специальная программа, которая называется поисковым роботом. Этот робот гуляет по интернету и ищет новые страницы. Иногда он заходит на старые – проверяет, не появилось ли на них что-то новое.

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

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

Что такое Яндекс.Вебмастер и зачем он нужен

Яндекс.Вебмастер – это официальный сервис от Яндекса. В него нужно добавить сайт, чтобы робот узнал о его существовании. С его помощью владельцы ресурсов (веб-мастера) могут доказать, что это именно их сайт.

Ещё в Вебмастере можно посмотреть:

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

Через этот сервис можно настроить сайт: задать регион, цены товаров, защитить свои тексты от воровства. Можно попросить робота заново зайти на страницы, на которых вы внесли изменения. Яндекс.Вебмастер упрощает переезд на https или другой домен.

Как добавить новый сайт в Яндекс.Вебмастер

Зайдите в панель Вебмастера. Нажмите «Войти». Логин и пароль можно ввести те, которые вы используете для входа на почту Яндекса. Если у вас еще нет учетной записи, придётся зарегистрироваться.

После входа вы попадёте на страницу со списком добавленных ресурсов. Если вы ранее не пользовались сервисом, то список будет пуст. Для добавления нового ресурса нажмите кнопку «+».

На следующей странице введите адрес вашего сайта и подтвердите его добавление.

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

Как подтвердить права на сайт в Яндекс.Вебмастер

Самый простой способ подтверждения прав в Яндекс.Вебмастер – добавить файл на сайт. Для этого нажмите на вкладку «HTML-файл».

Нажмите на ссылку, выделенную красным прямоугольником на скриншоте ниже:

Скачается небольшой файл. Этот файл сейчас понадобится, поэтому сохраните его куда-нибудь на видное место. Например, на Рабочий стол. Не переименовывайте файл! В нём ничего менять не нужно.

Теперь загрузите этот файл на ваш сайт. Обычно для этого используют файловые менеджеры, но для пользователей InSales ничего этого делать не нужно. Просто зайдите в бэк-офис, нажмите «Файлы». Затем наверху страницы – «Добавить файл». Выберите скачанный ранее файл.

Затем вернитесь в панель Яндекс.Вебмастер и нажмите кнопку «Проверить». После успешного подтверждения прав доступа ваш сайт появится в списке добавленных. Таким образом, вы сообщили в Яндекс.Вебмастер о новом сайте.

Мета-тег Яндекс.Вебмастер

Иногда описанный выше способ не срабатывает, и владельцы не могут подтвердить права на сайт в Вебмастере. В таком случае можно попробовать другой способ: добавить строку кода в шаблон.

В Вебмастере перейдите на вкладку «Мета-тег». Вы увидите строчку, которую нужно добавить в HTML-код.

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

Когда они сделают это, в Вебмастере нажмите кнопку «Проверить». Поздравляем, вы зарегистрировали сайт в поисковике!

Предварительная настройка Яндекс.Вебмастер

Сайт добавлен в поиск, теперь робот точно зайдёт к вам и проиндексирует его. Обычно это занимает до 7 дней.

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

Добавьте ссылку на sitemap

Для того чтобы робот быстрее индексировал ресурс, добавьте в Вебмастер файл sitemap.xml. В этом файле содержатся адреса всех страницах ресурса.

У интернет-магазинов на InSales этот файл уже настроен и должен добавляться в Вебмастер автоматически. Если этого не произошло, добавьте ссылку на sitemap.xml в разделе «Индексирование» — «Файлы Sitemap».

Проверьте robots.txt

В файле robots.txt указывают страницы, на которые роботу заходить не нужно. Это корзина, оформление заказа, бэк-офис и другие технические документы.

InSales по умолчанию создаёт robots.txt, в который не нужно вносить изменения. На всякий случай рекомендуем проверить, нет ли ошибок в robots. Для этого зайдите в «Инструменты» — «Анализ robots.txt».

Задайте регион сайта

На странице «Информация о сайте» — «Региональность» вы можете задать регион сайта. Для интернет-магазинов это те города, регионы и страны, по которым доставляются купленные товары. Если у вас не магазин, а справочник или блог, то регионом будет весь мир.

Задайте регион продаж как показано на скриншоте:

Чем ещё полезен Вебмастер?

На странице «Поисковые запросы» можно видеть фразы, по которым попадают к вам из поиска.

В разделе «Индексирование» выводится информация о том, когда робот был на сайте и сколько страниц он нашёл. Подраздел «Переезд сайта» поможет вам, если вы решили установить SSL сертификат и перейти на https. Также крайне полезен подраздел «Переобход страниц». В нём вы можете указать роботу страницы, на которых изменилась информация. Тогда при следующем визите робот проиндексирует их в первую очередь.

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

Если вы хотите улучшить видимость вашей компании в сервисах Яндекса, следует воспользоваться разделом «Полезные сервисы». В Яндекс.Справочнике можно указать телефон и адрес вашего магазина, часы работы. Эта информация будет отображаться прямо в выдаче Яндекса. Также это добавит вас на Яндекс.Карты.

Яндекс.Метрика — еще один важный инструмент владельца интернет-ресурса, показывающий данные о посещаемости. Статистика и динамика посещаемости сайта отображается в удобных для анализа таблицах, диаграммах и графиках.

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

Следующий шаг в продвижении сайта — добавить его в Гугл через аналогичный сервис Search Console. На этом все, удачи в продвижении! 

Возможно вам также будет интересно: