Поисковая консоль гугла. Google Search Console — бывшие инструменты для веб-мастеров Google

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

В России по мимо Яндекса, пользователи активно используют и поисковую систему Google, на ее долю приходиться порядка 35% доли рынка поискового трафика. Поэтому добавить сайт в Гугл не менее важно, чем в Яндекс.

Google Search Console

Для управления индексацией сайта и добавления его в поиск Google предоставляет удобный инструмент Google Search Console (ранее он назывался Google Webmasters Tool, часто его называют «Гугл Вебмастер», по аналогии с сервисом Яндекса.Вебмастер).

Данный сервис предлагает широкие возможности в управлении сайтами:

• Подробная статистика по индексации вашего сайта;
• Статистика поисковых фраз, по которым пользователи находят ваш сайт;
• Ключевые слова в содержании вашего сайта (по популярности);
• Отчет о внутренних и внешних ссылках вашего сайта;
• Проверка удобства сайта для использования на мобильных устройствах;
• Отчеты об ошибках при сканировании вашего сайта поисковым роботом;
• Возможность добавления файлов Robots.txt и Sitemap.xml;
• Проверка наличия проблем в безопасности сайта.

Также Google Search Console предлагает воспользоваться другими полезными сервисами, например, такими как: PageSpeed Insights (проверка скорости загрузки вашего сайта и полезные советы по ускорению), Мастер разметки структурированных данных и другие.

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

Google Search Console: добавить сайт в Гугл

Как мы уже упоминали, первое, что от вас потребуется - это создание аккаунта в Google. На главной странице Центр Google для вебмастеров нажимаете кнопку «Вход» и попадаете в Google Search Console.

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

1. Нужно нажать кнопку "Добавить ресурс" в панели управления сайтами.

2. В появившемся окошке введите адрес сайта, например, виде http://123..

3. Следующий шаг - выбор способа подтверждения ваших прав на владение сайтом.

На выбор предложены следующие:

• Скачать HTML-файл подтверждения и поместить его в корневой каталог вашего сайта;
• Разместить мета-тег с кодом верификации в HTML-коде главной страницы вашего сайта;
• Выполнить вход в аккаунт системы провайдера доменных имен;
• Авторизоваться с помощью системы Google Analytics (если вы его используете)
• Использовать аккаунт в Диспетчере тегов Google .

4. Мы предлагаем использовать Альтернативный способ Тег HTML, для этого вам необходимо скопировать кода в сроке и разместить на своем сайте в разделе , на примере нашего конструктора Nubex копировать нужно только то, что в кавычках content=”пример”.

5. Разберем подтверждение в системе управления сайта на базе конструктора сайтов Nubex. для этого нужно зайти в раздел «Настройки», подраздел «Вебмастер».

6. Вставляете скопированный код полностью в поле для Google Вебмастера, и нажимаете кнопку «Сохранить»:

7. Затем вернитесь в Google Search Console и нажмите кнопку "подтвердить".

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

Теперь, когда вы добавили сайт в Search Console, вы можете управлять индексацией сайта поисковой системой Google. Вам необходимо будет добавить robots.txt и sitemap.xml для указания роботам Google о страницах и разделах сайта которые можно добавить в поиск.

Пошаговая видео-инструкция: Как добавить сайт в гугл через панель google.webmasters

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

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

Мне очень нравится такое решение. Читаешь и обязательно обращаешь внимание на изображение.

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

Как это реализовать.

Возьмём тот же код и разберём всё остальное.

Здесь анонс или заголовок поста

Как быть с картинкой и ссылкой? В том месте, где предполагаете установить картинку с заголовком, переходим в редакторе сообщения в режим HTML. Устанавливаем этот код и дальше просто пишем своё сообщение. Картинку загружаем обычным способом и потом передвигаем её в полученный блок. Предлагаю скриншот на примере этого сообщения.

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

В строке, выделенной синим цветом, впишите название сообщения или анонс статьи, на которое хотите обратить внимание посетителей. А дальше всё, как обычно. Задавайте тексту цвет, размер шрифта. стиль. И воспользуйтесь функцией ссылка в редакторе.

То же самое делаем с левой стороны.

Заменяем значение right на left.
Тут я ещё просто убрала рамку border-top: 3px solid #000; border-bottom: 3px solid #000;

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

Конечно же, много такого лепить не стоит. Всё же это лишние изображения и ссылки. 2-3 блока, думаю будет достаточно. Так или иначе, мы таким образом делаем ещё и внутреннюю перелинковку. А в этом варианте добавили и визуального эффекта.

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

Доброго времени суток, друзья. Интересное решение для при клике на иконку, которая не будет раздражать посетителей. В нём вы сможете разместить или важные объявления, или другую нужную информацию. Оно появиться только тогда, когда пользователь нажмёт на иконку (в моём случае иконка андроид).

Код абсолютно не сложный, без всяких библиотек и тяжёлых скриптов. И устанавливается элементарно в гаджет HTML/JavaScript. Сама картинка и кнопка "закрыть" в svg формате. Наглядно посмотреть эту "конструкцию" можно на тестовом блоге в правом верхнем углу.

Демонстрация
Весь код

Приветствую, Вас

блог шпаргалки блогерши о создании, настройках, оформлении и ведении блога на платформе BLOGGER Надеюсь, что Вы найдёте здесь много полезной и интересной информации. Очень буду рада вашим отзывам

.app-android-outer {
width: 50px;
position: fixed;
top: 0;
right: 50px;
z-index: 9999
}
.app-android {
width: 50px;
height: 55px;
line-height: 55px;
margin: 0;
text-align: center;
position: relative;
float: right;
cursor: pointer
}
.app-android svg {
vertical-align: middle;
opacity: .7
}
.app-android:hover svg,
.app-android:focus svg,
.app-android:active svg {
opacity: 1
}
.app-android:before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0
}
.app-content {
background: #fff url(https://2.bp.blogspot.com/-sSuAXU_yhVM/XPD3sxcQ8DI/AAAAAAABK4s/CusSSD-sJf8k_B6AuUkF4g5nkmivM6MEACLcBGAs/s300-rw/android-4.png ) no-repeat bottom left;
width: 300px;
padding: 0;
border: 1px solid #ccc;
border-color: rgba(0, 0, 0, .2);
line-height: 1.3;
-webkit-box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
box-shadow: 0 2px 10px rgba(0, 0, 0, .2);
outline: 0;
position: absolute;
right: 50%;
top: 50px;
margin-right: -40px;
-webkit-border-radius: 2px;
border-radius: 2px;
-webkit-user-select: text;
z-index: 2;
display: none;
}
.app-content h3 {
margin: 0;
padding: 5px 20px;
color: #333;
font-size: 18px;
font-weight: 700;
border-bottom: 1px solid #ccc;
border-color: rgba(0, 0, 0, .2)
}
.app-content-on {
padding: 10px 20px 16px;
color: #333;
font-size: 16px;
font-weight: 400
}
.app-content-on svg {
vertical-align: -7px;
}
.app-content:before {
content: "";
border-color: transparent;


position: absolute;
right: 0;
margin-right: 30px;
z-index: 1;
height: 0;
width: 0;
border-bottom-color: #ccc;
border-bottom-color: rgba(0, 0, 0, .2);
top: -9.5px
}
.app-content:after {
content: "";
border-color: transparent;
border-bottom-color: #fff;
border-style: dashed dashed solid;
border-width: 0 8.5px 8.5px;
position: absolute;
right: 0;
margin-right: 30px;
top: -8.5px;
z-index: 1;
height: 0;
width: 0
}
.app-close-button {
position: absolute;
width: 18px;
height: 18px;
line-height: 28px;
text-align: center;
top: 7px;
right: 5px;
background: 0 0;
border: none;
cursor: pointer;
padding: 0
}
.app-close-button:before {
content: "";
position: absolute;
top: -15px;
right: -15px;
bottom: -15px;
left: -15px;
cursor: pointer
}
.slideInUp {
-webkit-animation-name: slideInUp;
animation-name: slideInUp;
-webkit-animation-duration: 1s;
animation-duration: 1s;
-webkit-animation-fill-mode: both;
animation-fill-mode: both
}
@-webkit-keyframes slideInUp {
0% {


visibility: visible
}
100% {

transform: translateY(0)
}
}
@keyframes slideInUp {
0% {
-webkit-transform: translateY(100%);
transform: translateY(100%);
visibility: visible
}
100% {
-webkit-transform: translateY(0);
transform: translateY(0)
}
}
@media screen and (max-width:960px) {
.app-android-outer {
right: 80px
}
}
@media screen and (max-width:375px) {
.app-content {
margin-right: -75px
}
.app-content:after,
.app-content:before {
margin-right: 65px
}
}
@media screen and (max-width:320px) {
.app-content {
margin-right: -95px
}
.app-content:after,
.app-content:before {
margin-right: 85px
}
}

Копируйте готовый код целиком, устанавливайте его в гаджет HTML/JavaScript в любое место макета блога. Иконка будет расположена именно в том месте, как задумано. В строке, отмеченной серым цветом, полупрозрачная фоновая картинка самого всплывающего окна. За ненадобностью можно убрать из кода и задать предпочтительный основной фон на свой вкус, изменив значение background: #fff на желаемое.

Спасибо всем за внимание. Увидимся.

оформите подписку на новые шпаргалки

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

Перейдём к делу. Изначально мой тестовый блог выглядел так. Я отметила пространство (или задний фон всего полотна), который задан был в настройках темы.

Сейчас мы его поменяем на такую картинку

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

Здесь я хочу обратить ваше внимание. Ширина блога в моём случае 1200 px. Размеры фоновой картинки 1450 на 950 px. Картинка заполнила полностью всё пространство.

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

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

Особых навыков не нужно.

1. Подберите нужную картинку и скопируйте её адрес.
2.Копируйте приведённый ниже код и устанавливаете адрес своей картинки

3. Идём во вкладку Тема - Изменить HTML находим ]]> и устанавливаем над этой строкой готовый код.

Результат будет виден при просмотре темы. Если вы остались им довольны смело нажимайте сохранить и любуйтесь новым шаблоном.

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

body {
background: url(http://www.clipartbest.com/cliparts/9iz/EnR/9izEnR56T.png)
no-repeat top fixed ;
background-size: 100%;
}

Со значением background-size: 100%; можно поиграться, меняя его на меньшее, пока не добьётесь желаемого.

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

Возможно Вы пропустили

Всем добра и до встречи.

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

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

Вот сам код.

Дорогие читатели "текст ссылки", Поздравляю вас с наступающим 2020 годомтекст ссылки. Пусть начнется новым взлетом К лучшим жизненным высотам И хорошим в банке счетом текст ссылки Принесет в делах согласье, В личной жизни — много счастья!."

.stage {
display: table-cell;
vertical-align: middle;
}
.tabled, .middled {
text-align: center;
margin: 0 auto;
}
.jumbo {
font-size: 150%;
vertical-align: -25px;
transform: rotate(8deg);
}
.jumbo:first-child {
-webkit-animation: wave 10s infinite ease;
animation: wave 10s infinite ease;
}
.jumbo:last-child {
-webkit-animation: wave 15s infinite ease;
animation: wave 15s infinite ease;
}
@keyframes wave {
0% { transform: rotate(8deg); }
25% { transform: rotate(15deg); }
75% { transform: rotate(-10deg); }
100% { transform: rotate(8deg); }
} @-webkit-keyframes wave {
0% { -webkit-transform: rotate(0deg); }
50% { -webkit-transform: rotate(10deg); }
100% { -webkit-transform: rotate(0deg); }
}
p {
font-size: 110%;
font-family: Helvetica, sans;
max-width: 24em;
margin: 0 auto;
text-align: justify;
color: #00695C;
font-weight: lighter;
line-height: 1.5em;
}
a {
color: #ccc;
text-decoration: none;
border-bottom: solid thin #f7901d;
}
a:hover {
color: #f7901d;
}
.boo {
position: relative;
}
.boo:before, .boo:after {
position: absolute;
transition: all 0.15s ease;
}
.boo:before {
top: -75px;
left: -70px;
-webkit-transform:rotate(0deg) scale(0);
-moz-transform:rotate(0deg) scale(0);
-o-transform:rotate(0deg) scale(0);
-ms-transform:rotate(0deg) scale(0);
transform:rotate(0deg) scale(0);
}
.boo:after {
top: -115px;
right: -70px;
-webkit-transition-delay: 0.05s;
transition-delay: 0.05s;
-webkit-transform:rotateY(180deg) scale(0);
-moz-transform:rotateY(180deg) scale(0);
-o-transform:rotateY(180deg) scale(0);
-ms-transform:rotateY(180deg) scale(0);
transform:rotateY(180deg) scale(0);
}
.boo:hover:before {
top: -140px;
-webkit-transform:rotate(15deg) scale(1);
-moz-transform:rotate(15deg) scale(1);
-o-transform:rotate(15deg) scale(1);
-ms-transform:rotate(15deg) scale(1);
transform:rotate(15deg) scale(1);
}
.boo:hover:after {
-webkit-transform:rotateY(180deg) scale(0.7);
-moz-transform:rotateY(180deg) scale(0.7);
-o-transform:rotateY(180deg) scale(0.7);
-ms-transform:rotateY(180deg) scale(0.7);
transform:rotateY(180deg) scale(0.7);
}
.boo:before, .boo:after {
content: url("ссылка на картинку. png");
}

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

"текст ссылки")

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

С НАСТУПАЮЩИМ, ВСЕХ, НОВЫМ 2020 ГОДОМ!!!

Всем, привет. Навигация в стандартных шаблонах Блоггер вообще не привлекает к себе никакого внимания. Еле заметная панелька в конце страницы не каждый и заметит. Поэтому любой новый посетитель может не увидеть ссылку на предыдущие или следующие статьи блога.
Стилей навигации достаточно много. Но уже не первый раз обращаются, что многие из них "приказали долго жить". А навигация сайта, пожалуй самый основной элемент. Поэтому дам ссылки на статьи, где публиковала уже варианты оформления навигации и предложу ещё один рабочий код. Вот так она будет выглядеть под сообщениями блога.

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

Для установки сначала нужно скопировать этот код

//1J "+i+\" 1H \"+g+"";7 1f=L(i)-1;5(i>1){5(i==2){5(l=="s"){6+=\"\"+Q+\"\"}e{6+=\"\"+Q+\"\"}}e{5(l=="s"){6+=\"\"+Q+\"\"}e{6+=\"\"+Q+\"\"}}}5(E>1){5(l=="s"){6+=\"1\"}e{6+=\"1\"}}5(E>2){6+=\"...\"}1m(7 m=E;m