Урок 3п.  Продвижение сайта. Верхнее меню конструктора  timeweb. Правое меню – SEO. Часть вторая.

Добрый день! Меня зовут Светлана. Я буду вашим гидом по ресурсу lsitel.ru.

 

Продолжим наш урок по внутренней адаптации сайта с помощью инструмента SEO конструктора timeweb.

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

Как выглядит код-html с разметкой для сниппетов?

Откройте ваш сайт по домену, к которому он привязан. Я буду это делать вместе с вами в Яндекс-браузере. Нажмите клавишу F12.

Справа от вас открылось окно. Это html-код вашего сайта. С помощью этого кода написан практически любой сайт, а конструктор – это оболочка, которая позволяет изменять его внешний вид без редактирования кода напрямую. Наш конструктор сайта, который мы используем в браузере, тоже состоит из кода, просто мы его не видим. Да он нам и не нужен, чтобы создавать хорошие сайты. Для этого и придумали конструкторы, которые облегчают и упрощают нам работу при создании сайтов.

html код сайта

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

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

Html  - код, на котором пишут сайт. Он содержит заголовки, содержимое, некоторые стили, разметку. Одним словом, все параметры и условия, которые требуются для корректного отображения и функционирования сайта.

Есть ещё такой параметр CSS. Это отдельный файл, в котором прописан тоже свой определенный код, который задает стиль нашему сайту. Как правило, если нужно сделать сайт более красивым и разнообразным, то описание стилей выносят в отдельный файл, а в коде html ссылаются на стили, которые хранятся в файле CSS.

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

Самый простой пример: <p>Мы занимаемся обучением студентов</p>. Так выглядит текст в коде html, а на сайте посетители  это видят так: Мы занимаемся обучением студентов.

<p>  - это открывающий тег.

</p> - это закрывающий тег.

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

Вернемся к нашему скриншоту, что я показала выше. Обратите внимание, там есть теги <head></head> и <body></body>. Первые два – это «голова» нашего сайта, а вторые – «тело».

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

Между тегами <head></head> располагаются важные мета-теги, которые помогают продвигать наш сайт.

Мы уже рассмотрели содержимое тега  <title></title>, между которым отображается заголовок страницы и мета-тег description, который в коде отображает описание сайта.  (Смотрите предыдущий урок).

Если мы откроем код между тегами <head></head>, то увидим, что наше наименование и описание, которое мы писали на прошлом уроке к странице «Главная» нашего сайта попали в код html. Для лучшей наглядности разверните окно кода сайта на весь экран (нажмите на точки в правом углу окна). И нажмите на развороте треугольник рядом с тегом.

Развернем код сайта.

В развернутом окне мы видим теги <head></head>. Я их выделила желтым.  Между ними есть, код, который мы частично рассмотрим.

Код сайта теги <head></head> и <body></body>

Обратите внимание на теги <title></title>, между ними вы видите текст – это заголовок страницы «Главная», который мы указали в разделе SEO. Если мы не укажем заголовок в разделе, то конструктор по умолчанию перенесет заголовок H1 (заголовок первого уровня)  из  содержимого сайта, потому что тот должен быть обязательно.

Кратко о заголовках. В коде текста есть определенные стандарты, которые задают стиль сайта и влияние на индексацию. Один из таких стандартов – это стиль заголовков.

H1, H2, H3, как правило, самые важные заголовки. Они задают иерархию текста сайта. Реже используют заголовки H4, H5, H6…

Важно при внутренней оптимизации сайта соблюдать порядок заголовков и придерживаться единого стиля. Так поисковому роботу будет проще прочитать его. Заголовки робот индексирует первыми. Порядок задается номерами. Например, заголовок H1 желательно использовать один раз и самым первым в статье. Заголовок H2 (заголовок второго уровня) применяется после H1. Его можно применить, допустим , два раза в тексте. Заголовок Н3 (заголовок третьего уровня) идет после H2. Его можно применять в тексте, например, 3-4 раза и более. Главное, не перестараться. Обратите внимание, что в моей статье текущего урока есть всего лишь два заголовка Н1 и Н2. Когда мы будем работать с текстом сайта, мы к этому вернемся.

Теперь вы видите, что описание из раздела SEO, которое мы задали для главной страницы нашего сайта попало в мета-тег description.

Таким образом, теги <title></title> и мета-тег description индексирует поисковой робот Яндекс в коде и выводит сниппеты в поисковой выдаче для более удобного прочтения информации о странице нашего сайта.

Заголовок и наименование в коде сайта

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

А теперь, подведем итоги:  сегодня мы узнали, где отображаются в коде заголовок и описание страницы, которое мы ввели в разделе SEO конструктора сайтов его внутренней оптимизации под поисковик. Вспомнили про заголовки Н1, Н2, Н3… Для чего они нужны.

 

Резюме к уроку 3п: Продвижение сайта. Верхнее меню конструктора  timeweb. Правая  часть – SEO. Часть вторая.»:

Вам понравились наши бесплатные уроки?

Вы можете отправить комплимент нашему преподавателю: