Разметка сайта


За окном 2016 год. Микроразметка сайта это давно уже не ноу-хау и в этом должен разобраться каждый владелец сайта, который хочет свой ресурс продвинуть в ТОП. Кроме этого, разобравшись в микроразметке сайта, Вы сможете управлять сниппетом на поисковой выдаче и тем самым увеличить кликабельность.

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

  • 3 показателя поведенческих факторов, которые имеют важное значение
  • Изменения SEO 2016

Если Вы попали на данную статью, то, возможно, пришла пора раз и навсегда разобраться с микроразметкой сайта и понять что и как необходимо сделать. Из данной статьи Вы поймете что в этом нет ничего сложного и каждому по силам сделать это. Я в этом прекрасно убедился, когда наши ученики, зная лишь правильную инструкцию, делают действительно сложные вещи с технической стороны. Поэтому отговорка "Это тяжело сделать технически" здесь не работает ? !

Важна ли микроразметка сайта?


Основная суть микроразметки на сайте: предоставить поисковым системам структурированную информацию, которая находится на странице.

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

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

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

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

А Вы видели вот такие звездочки на поисковой выдаче, как на изображении ниже?

Так вот делаются они также с помощью микроразметки сайта. Но об этом читайте ниже.

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

Поэтому переходим в следующей логической части: виды микроразметки сайта.

Виды микроразметки сайта

Всего видов микроразметки больше, но мы рассмотрим 3 самые распространенные:


  1. Open Graph — для социальных сетей
  2. Schema.org — для поисковых систем
  3. Микроформаты — для поисковых систем (устаревает)

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

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

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

Хочу начать с того, что сказать кто разработал данную микроразметку. А разработал ее Facebook. Сейчас многие, наверное, догадались для чего она предназначена. Догадались?

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

В нынешние дни аккаунты в социальных сетях есть практически у каждого пользователя. Мы постоянно общаемся с друзьями, смотрим видео, обмениваемся информацией внутри социальных сетей: Вконтакте, Facebook, Instagram и т.д. Они очень тесно вошли в нашу жизнь. Но как же это все связано с сайтом и статьями на сайте?


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

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

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

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

Микроразметка — Schema.org


Данная семантическая разметка была создана поисковыми системами для поисковых систем. Объявили о ней в 2010 году. Если Вы поняли для чего необходима микроразметка Open Graph, тогда с легкостью поймете для чего же нужно и данная микроразметка.

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

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

Почему это может нанести вред для SEO Вашему сайту? А потому что увеличивается показатель отказов, один из важнейших поведенческих факторов. Поэтому и необходимо сразу показать пользователю что его ждет на сайте.

Вот основной список форматов, который поддерживает данная микроразметка:

  • Адреса и организации
  • Видео
  • Вопросы и ответы
  • Другие творческие работы
  • Отзывы об автомобилях
  • Отзывы об организациях
  • Программы
  • Рефераты
  • Рецепты
  • Словарные статьи
  • Тест-драйвы
  • Товары и цены
  • Картинки
  • Фильмы

Если Вам мало данных форматов, то вот полный список с официального источника — Полный перечень форматов Schema.org.

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

Микроформаты

Хотя я рекомендую Вам сосредоточиться лишь на первых двух типах микроразметки, все же данный вид микроразметки необходимо хотя бы "знать в лицо". Потому что его Вы могли встретить в шаблонах для CMS (WordPress, Joomla и т.д.), которыми Вы пользуетесь.

Несколько слов о том, где же применяется данная микроразметка. А применяется она все там же где и Schema.org: разметка данных для поисковых систем.

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

Но где Вы могли видеть данную микроразметку? А хотя бы в исходном коде комментариев в шаблоне WordPress. Там могло Вам встретиться вот такое слово "hCard". Оно отвечает за формат данных с контактной информацией.

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

  • hCard — контактная информация
  • hRecipe — кулинарные рецепты
  • hReview — отзывы
  • hProduct — товары

Пока что Вам нет необходимости знать что внутри данных форматов до мелочей. Все это Вы узнаете из последующих статей. Но данную микроразметку мы не будем смотреть, так как она устаревает и все внимание сместилось на Schema.org.

Я понял что и где применяется — что дальше делать?

Поняли для чего нужна микроразметка? Замечательно! Но это еще не все, ведь ее необходимо еще внедрить и проверить на валидность ("правильность"). Об этом Вы узнаете из следующих статей, потому что данная статья была бы очень длинной и ее чтение с маленьким скроллом стало бы не очень удобным.

Содержание

  • Важна ли микроразметка сайта?
  • Виды микроразметки сайта
  • Микроразметка сайта — Open Graph
  • Микроразметка — Schema.org
  • Микроформаты

Вывод

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

www.sitehere.ru

Верстка сайта – ремесло для посвященных


Есть в верстке сайта что-то таинственное. Но это до тех пор, пока не познакомишься с этим ремеслом поближе. Начинаем наше посвящение:

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

В процессе верстки кодом html происходит разбивка «скелета» сайта на части. А с помощью css (каскадных таблиц стилей) задаются размеры его «костей», цвет и расположение.

Различают несколько видов верстки:

I. Табличная – ранее была основным способом верстки. В табличной верстке для задания структуры сайта используется тег <table> и его дочерние теги. Верстка с помощью таблиц позволяет наиболее пропорционально расположить все элементы дизайна относительно друг друга. Но в тоже время такой код получается слишком объемным:

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

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

II. Блочная – в данный момент является основным способом верстки. В отличие от табличной блочная верстка обладает рядом преимуществ:


  • Отделение стиля элементов от кода html;
  • Возможность наложения одного слоя на другой – такая возможность во многом облегчает позиционирование элементов.
  • Лучшая индексация поисковиками;
  • Высокая скорость загрузки страницы, состоящей от взаимно независимых элементов;
  • Легкость создания визуальных эффектов (выпадающих меню, списков, всплывающих подсказок).

Основным недостатком блочной верстки является некая «двусмысленность» понимания ее кода различными браузерами. Поэтому часто html страницы приходится «доводить» путем использования специальных хаков.

Основным элементом, применяемым в блочной верстке, является тег <div>. Участок кода, отделенный этим тегом, называется слоем. Все стилевые решения вынесены за границы кода html в каскадные таблицы стилей. Доступ к ним осуществляется через идентификаторы или классы css:

Как происходит блочная верстка?

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

Для примера возьмем вот такой макет сайта, созданный в Photoshop. Сначала в текстовом редакторе с помощью div задаем структуру будущего ресурса и присваиваем каждому слою свой селектор id. Получается такая структура:


Затем к готовой структуре сайта на html строкой <link rel=»stylesheet» type=»text/css» href=»style.css» /> прикрепляем файл css. После чего добавляем в него стилевое описание каждого слоя, позиционирование относительно других элементов и его размеры.

Полный код примера index.html:

Содержимое файла style.css:

Вот так наш пример блочной верстки сайта выглядит в окне браузера:

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

Для редактирования кода страниц сайта используются специальные редакторы html. Многие из них способны автоматически генерировать код визуальных элементов, создаваемых в них пользователем в режиме «дизайн». Но такой код не является валидным, и чаще всего нуждается в «ручной» доводке:

Свое роднее!

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

www.internet-technologies.ru


 

 

У нас имеются следующие селекторы:

 

Свойства и возможные значения CSS:

 

Фон (background) может быть задан изображением или цветом, либо и тем и другим одновременно. Чтобы отобразилось изображение, необходимо прописать путь к нему. Если фон задан цветом, то используется шестнадцатеричная система (#ffffff для белого цвета и тд.).

Свойство color используется для определения цвета текста.


font-family

— это свойство определяет семейство шрифтов, которыми будет отображаться текст. Как правило задается сразу три типа шрифтов. Поэтому, если браузер не смог отобразить первый, ему есть из чего выбирать (Trebuchet MS, Arial, Times New Roman).

font-size — размер текста, задается в различных системах измерения, здесь мы будем использовать пиксели.

 

margin — определяет местоположение блока. За точку отсчета при этом может выступать как окно браузера, так и границы других элементов веб страницы. Так как мы хотим разместить свою страницы посредине окна браузера, то запишем такие значения для данного свойства: 0px auto 0px auto. Запись может выглядеть проще 0px auto. Отсчет в случае задания данных значений идет по часовой стрелке: верх — право- низ — лево. Поскольку верх — низ, право — лево у нас совпадают, то дублировать их нет потребности.

 

width — ширина блока.

 

height — высота.

 

float — свойство, которое позволяет нам позиционировать элементы селектора, главным образом по левую или по правую сторону.

 

Теперь добавим код в наш файл стилей style.css (ведь вы его уже создали, да?):

 

body {
background: #f3f2f3;
color: #000000;
font-family: Trebuchet MS, Arial, Times New Roman;
font-size: 12px;
}

#container {
background: #FFFFFF;
margin: 30px auto;
width: 900px;
height: 1000px;
}

#header {
background: #838283;
height: 200px;
width: 900px;
}

#navigation {
background: #a2a2a2;
width: 900px;
height: 20px;
}

#menu {
background: #333333;
float: left;
width: 200px;
height: 600px;
}

#content {
background: #d2d0d2;
float: right;
width: 700px;
height: 600px;
}

#footer {
background: #838283;
height: 180px;
width: 900px;
}

www.web-lesson.ru

Что такое CSS?

Тем, кто знаком с HTML, не нужно рассказывать, что это язык разметки страницы. Но его создатели решили добавить в него теги, отвечающие за внешний вид и дизайн. Вот только при таком подходе код страницы становился слишком объемным и практически нечитабельным. Естественно, этот путь вел в никуда, поэтому было принято комплексное решение: HTML отвечает за разметку страниц, CSS – за визуальное оформление.

css разметка страницы

Аббревиатура CSS расшифровывается как Cascading Style Sheets (каскадная таблица стилей). Она состоит из параметров, что отвечают за визуальное оформление объектов на странице.

Преимущества CSS

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

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

Подключение CSS

Говоря о базовых принципах CSS, первым делом нужно научиться подключать каскадную таблицу стилей к HTML-файлу. Этот процесс достаточно прост. Первым делом необходимо создать HTML-документ. Для тех, кто еще не знает, его создают в программе «Блокнот». Потом при помощи функции «Сохранить как» необходимо задать расширение HTML.

Точно таким же образом создается и каскадная таблица стилей, только файлу следует задать расширение css. Полученный документ нужно сохранить в той же папке, где и HTML файлы. Допустим, документ таблицы стилей носит название style.css. Чтобы подключить его к HTML-документу, необходимо воспользоваться тегом <link>, что отвечает за подключение внешних файлов. Между тегами <head>, необходимо вписать следующее:

разметка страниц css

Пожалуй, это один из самых удобных способов подключения внешних файлов.

Правило CSS

Изучение CSS разметки должно начинаться с изучения синтаксиса. В каскадной таблице стилей не существует тегов, скриптов или параметров. Здесь есть только правило, которому необходимо следовать. Состоит оно из селектора и блока стилей. Допустим, в каскадной таблице стилей задана позиция: body{background:black; color:white}.

Здесь body и есть селектором, отвечающим за стилевое форматирование тела сайта; background:black и color:white — это свойства и их значения. Они записываются через точку с запятой. Такая позиция делает фон сайта черным, а текст белым.

блочная разметка страниц средствами css

Селекторы

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

Что же нужно знать о селекторах? Во-первых, их разновидности:

  • Идентификатор. В качестве селекторов могут использоваться названия элементов страниц. В случае, когда, к примеру, необходимо выделить какой-то абзац текста другим цветом, добавляют идентификатор. Его задают параметром id.

интенсивное введение в css разметка страницыСтоит помнить, что один идентификатор можно использовать только раз. В этом примере селектор получил название pink, если нужен еще один идентификатор, то ему просто нужно присвоить другое имя (pink2, green и т. д.).

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

блоки css позиционирование разметка страницы

Объектов с классами может быть сколько угодно.

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

Идентификаторы и классы можно применять для любых объектов. И если возникает необходимость задать один стиль для текста и картинки, то можно не указывать имя элемента, как это было в примере (p#pink, p.red). Можно просто поставить точку или решетку. Также селекторы можно группировать. Например, h1, h2, h3{color:red; font-sixe:17px}.

изучение css разметки

Разметка страниц

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

  • Табличная. Когда еще не было каскадной таблицы стилей, эта разметка была основной. Она позволяла максимально точно разместить объекты ресурса друг от друга. Но код получается слишком большим и плохо индексируется поисковиками. Еще один недостаток такого метода – скорость загрузки. Пока не загрузится вся таблица, пользователь не увидит даже начало текста.
  • Блочная. Сейчас это основной способ разметки страниц. Его использование стало возможным только благодаря развитию и совершенствованию таблицы стилей.

о базовых принципах css

Преимущества блочной верстки

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

Единственный недостаток такого подхода – разное «понимание» браузерами. Некоторые отображают ресурс в таком виде, в каком видит его веб-мастер. Но есть браузеры, что искажают изображение, поэтому при большом количестве классов и селекторов необходимо использовать хаки, что сделают код кроссбраузерным.

css разметка страницы

Как сделать блочную верстку сайта?

Первое, с чего стоит начать, — с создания макета. Это должно быть обычное изображение с расширением psd. После его создания (приобретения или скачивания) необходимо разрезать изображение на блоки и поместить в одну папку (желательно отдельную). Эти фрагменты будут использоваться, как фон для блоков.

В HTML документе для блочной верстки используют тег <div>. Все, что находится в его пределах, принято называть слоем, и формат этого слоя задается в каскадной таблице стилей при помощи классов или идентификаторов.

Первое, что нужно сделать после того, как макет сайта будет разрезан на части, в HTML задать структуру сайта, используя тег <div>, и присвоить для каждого слоя свой селектор. Например, если это меню, то так и написать: id=menu. После чего нужно подключить каскадную таблицу стилей и задать для каждого слоя свои параметры. Самый простой код имеет следующий вид.

разметка страниц css

Задаем параметры

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

блочная разметка страниц средствами css

Между тегами <div> можно писать любую необходимую информацию с нужным форматированием. Любой текст, написанный в пределах этого тэга, сразу же накладывается слоем на форматированный блок. Объекты между <div> будут автоматически уменьшаться, чтобы не выходить за размеры блока.

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

интенсивное введение в css разметка страницы

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

fb.ru

Как создать структуру страницы с помощью блоков (блочная вёрстка)

  • Содержание:
  • 1. Как разбить макет страницы на секции
  • 2. Разметка шапки сайта и позиционирование её элементов
  • 3. Создание сетки для основной части страницы
  • 4. Разметка подвала страницы

1. Как разбить макет страницы на секции

Чтобы создать макет страницы, необходимо выделить основные разделы (секции) документа. Подробнее о секционных элементах вы можете прочитать в статье 1.11. HTML5 семантические элементы.

Стандартная веб-страница содержит следующие секции:

<body>  <header></header>  <div class="main"></div>  <footer></footer>  </body>
structure-main
Рис. 1. Основные секции страницы

Мы не будем использовать элемент <main>, так как он поддерживается не всеми браузерами.

Элементы <header>, <div> и <footer> — блочные, поэтому они будут занимать всю ширину их блока-контейнера — элемента <body>. Страница с такой разметкой будет хорошо смотреться на небольших экранах, но на устройствах с большим разрешением текст таких страниц будет неудобно читать. Поэтому необходимо добавить тег-контейнер для контента — содержимого каждой секции:

container-main
Рис. 2. Основные секции страницы с тегом-контейнером

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

.container {   width: 100%;   max-width: 1024px; /*максимальная ширина может иметь другое значение*/   padding: 0 15px;   margin: 0 auto;  }

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

2. Разметка шапки сайта и позиционирование её элементов

Приступим к разметке первой секции, так называемой шапки веб-страницы. Элемент <header> предназначен для группировки вводной информации и навигационных средств по странице/сайту. Добавим внутрь тега <header> логотип сайта и навигационные ссылки:

<header>   <div class="container">   <a href="/" class="logo">LOGO</a>   <nav>   <ul>   <li><a href="">Главная</a></li>   <li><a href="">О нас</a></li>   <li><a href="">Контакты</a></li>   </ul>   </nav>   </div>  </header>
container-header
Рис. 3. Шапка сайта с добавленными логотипом и ссылками

Разместим логотип слева, а ссылки навигации — с выравниванием по правому краю шапки (для наглядности я добавила элементам белую границу):

.logo {   float: left;  }  nav {   float: right;  }  nav ul {   margin: 0;   padding: 0;   list-style: none;  }  nav li {   display: inline-block; /*один из способов разместить элементы в строку*/  }

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

header-collapse
Рис. 4. Эффект схлопывания блока-контейнера

Обратите внимание, что после того, как мы применили обтекание, шапка исчезла. Это произошло потому, что плавающие элементы (для которых задано свойство float) изымаются из нормального потока и родительский контейнер больше не видит их высоту, поэтому и элемент <header> и элемент внутри него с классом .container схлопнулись. Чтобы исправить эту ситуацию, воспользуемся очисткой потока для элемента с классом .container:

.container:after {   content: "";   display: table;   clear: both;  }

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

.container {   width: 100%;   max-width: 1024px;   padding: 15px;   margin: 0 auto;  }
header-clearfix
Рис. 5. Очистка потока

Рассмотрим ситуацию, когда в качестве логотипа выступает картинка. Она может быть добавлена непосредственно внутрь тега или же в качестве фонового изображения. Картинка будет иметь свою высоту, которая может сильно отличаться от высоты меню навигации, поэтому перед нами встанет проблема вертикального выравнивания элементов шапки.

logo-header
Рис. 6. Логотип-картинка

В нашем примере высота логотипа равна 38px, поэтому чтобы выровнять ссылки меню по высоте по середине шапки, нужно задать для них соответствующую высоту строки:

nav a {   text-decoration: none;   line-height: 38px;  }
hyperlinks-header
Рис. 7. Выравнивание ссылок меню шапки

3. Создание сетки для основной части страницы

Основная часть страницы чаще всего представляет собой сетку из блоков разной ширины. Позиционирование таких блоков осуществляется также с помощью свойства float. Каждую строку блоков обернём дополнительным блоком с классом .row:

<div class="main">   <div class="container">   <div class="row">   <div class="col-1-3"></div>   <div class="col-2-3"></div>   </div>   <div class="row">   <div class="col-1-2"></div>   <div class="col-1-2"></div>   </div>   <div class="row">   <div class="col-1-4"></div>   <div class="col-1-4"></div>   <div class="col-1-2"></div>   </div>   </div>  </div>
layout-main
Рис. 7. Сетка основной части страницы
.col-1-2 {   width: 50%;   float: left;  }  .col-1-3 {   width: 33.3333333333%;   float: left;  }  .col-1-4 {   width: 25%;   float: left;  }  .col-2-3 {   width: 66.6666666667%;   float: left;  }

Для элемента с классом .row также применим очистку потока:

.container:after, .row:after {   content: "";   display: table;   clear: both;  }

Чтобы отделить ряды друг от друга, можно добавить нижний внешний отступ:

.row {   margin-bottom: 15px;  }

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

different-height
Рис. 8. Разная высота элементов сетки

Высоту блоков можно зафиксировать, указав её явно, например, .row div {height: 100px}. Но в этом случае нужно быть уверенным, что при добавлении адаптивности макету содержимое блоков не будет выходить за край блока.

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

<div class="row row-one">   <div class="col-1-3">Lorem ipsum dolor sit amet.</div>   <div class="col-2-3">Duis lobortis tempor tortor vel iaculis. Fusce volutpat commodo lacus, eget vestibulum lorem semper at.</div>  </div>
.row-one {   background: lightblue;  }  .col-2-3 {   width: 66.6666666667%;   float: left;    background: seashell;  }
equal-height
Рис. 9. Фоновая подложка

Если основная секция страницы содержит только два блока, то дополнительный ряд-обёртку можно не добавлять:

<div class="main">   <div class="container">   <div class="col-2-3"></div>   <div class="col-1-3"></div>   </div>   </div>

4. Разметка подвала страницы

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

<footer>   <div class="container">   <div class="col-1-3"></div>   <div class="col-1-3"></div>   <div class="col-1-3"></div>   </div>  </footer>

html5book.ru

Адреса и организации

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

Разметка сайта

Словарные статьи

Если сайт справочного или словарного типа, то размечая страницу по этой схеме, можно принять участие в программе «Яндекс.Словарей» (подробнее тут), что улучшит отображение сниппета:

Разметка сайта

Отзывы об автомобилях

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

Разметка сайтаИ в результатах поиска:

Разметка сайта

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

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

У Google таких ограничений нет. Например, схема Review будет работать не только для автомобильных сайтов (как у Яндекса), но и для любых ресурсов, которые содержат отзывы.

 

Примеры разметки по схемам, поддерживаемым Google

Отзывы

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

Пример сниппета отдельного отзыва:

Разметка сайта

Пример сниппета сводного отзыва:

Разметка сайта

Мероприятия

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

Разметка сайта

Товары

Это необходимая схема разметки для любого интернет-магазина. С ее помощью Google сможет показать в результатах поиска дополнительную информацию о вашем товаре (цена, размеры, наличие и т.д.):

Разметка сайта

Такой сниппет становится заметнее и будет привлекать больше покупателей.

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

Полезные инструменты

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

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

Маркер – если вы не знаете, как внедрить микроразметку в код вашего сайта, этот инструмент поможет разметить и отправить данные, используя только мышь, редактировать сам код не нужно. Главный минус данного сервиса в том, что структурированные данные отправляются только в Google, Яндекс их не увидит.

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

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

siteclinic.ru

Отличия блочной вёрстки от табличной

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

Блочная вёрстка лишена недостатков табличной — поисковыми системами она индексируется лучше, её код не такой развесистый, да и блоки <div>, которые так любят называть «слоями», изначально задумывались универсальными, то есть «для всего», тогда как <table> — это таблица, которую нужно использовать для отображения табличных данных и не более того.

Единственный ощутимый минус блочной вёрстки — сделанные на ней сайты могут по-разному отображаться в обозревателях. Чтобы этого избежать, нужно делать вёрстку «кроссбраузерной», то есть одинаково отображаемой любым обозревателем.

Суть блочной вёрстки

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

Каждая часть страницы помещается в свой блок <div>: верх сайта — в первый, меню — во второй, контент — в третий и т. д. Каждый блок наполняется содержимым средствами HTML, а также позиционируется и оформляется с помощью CSS-разметки.

Конечный HTML-документ представляет собой набор блоков <div> с контентом внутри. Оформление зачастую находится в отдельном CSS-файле, подключенном к странице тегом <link>, или как минимум в контейнере <style> секции <head>.

Принципы блочной вёрстки

Первый — конечно же, повсеместное использование тега <div>, который можно назвать базовым элементом блочной структуры, но об этом было сказано уже достаточно много.

Второе правило — принцип разделения кода, согласно которому содержимое от оформления нужно отделять. Говоря проще и ближе к нашему случаю: HTML — отдельно, CSS — отдельно (желательно в разные файлы). Такой подход делает структуру понятней. Программисту не нужно открывать CSS, дизайнеру — HTML. Все смотрят свой код и не мешают друг другу. Идеально.

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

Пример блочной вёрстки

Но, сколько не теоретизируй, а понимать всё проще на примере.

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

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

Сначала создадим HTML-страницу: обозначим структуру, разметим её. HTML-код будет таким:

Разберём некоторые моменты.

<div id=»container»> — это блок-родитель, внутри которого расположились все остальные блоки. Как ячейки таблицы внутри <table>. Назначение дочерних контейнеров должно быть понятно, за исключением разве что блока <div id=»clear»>. Это вспомогательный слой, его смысл будет понятен, когда вы увидите код CSS.

Если открыть HTML-файл в браузере, не подключая таблицу стилей, страница будет выглядеть так.

Теперь добавим файл CSS, код которого приведён ниже.

С помощью стилей мы последовательно оформляем содержимое тега <body> и всех находящихся внутри контейнеров с помощью ранее изученных правил.

#clear { clear:both; } запрещает обтекание элемента слева и справа. Если убрать это правило, вёрстка «поедет» и низ сайта перестанет корректно отображаться.

CSS творит чудеса, и с ним наша HTML-страница примет уже совсем другой вид.

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

www.seostop.ru

Что такое семантическая разметка?

Подходящего определения на просторах Интернета мне найти не удалось, поэтому я его решил составить его из 4 наиболее подходящих определений.

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

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

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

Виды разметки данных

  1. Data Vocabulary – стандарт разметки данных, которая разрабатывала компания Google до июня 2011 года.

    Официальный сайт: http://www.data-vocabulary.org/

    Развитие стандарта приостановлено в связи с созданием словаря Schema.org. Поисковый робот Google может использовать данные, полученные с помощью данной разметки, но рекомендации сводятся к смене стандарта на Schema.org.

  2. Dublin Core, или Дублинское ядро – стандарт, разработанный в 1995 году. Семантика Дублинского ядра была создана международной междисциплинарной группой профессионалов библиотечного и музейного дела, компьютерных наук. Представляет собой набор из метатегов, 15 основных и 3-х дополнительных свойств.

    Официальный сайт: http://dublincore.org/

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

  3. FOAF, или Friend of a Friend – «друг друга» – стандарт, созданный Либби Миллером и Дэном Брикли в 2000 году. Используется в основном для домашних страниц и социальных сетей. Решает задачу построения связей между людьми и объединению их.

    Официальный сайт: http://www.foaf-project.org/

  4. Microformats, или же микроформаты – стандарт, созданный в 2005 году сообществом заинтересованных энтузиастов из WC3.

    Официальный сайт: http://microformats.org/

    Данный стандарт был очень популярным до появления Schema.org и на многих сайтах используется до сих пор. На момент написания статьи Яндекс поддерживает следующие Microformats: hCard – формат разметки контактов (адресов, телефонов и т.д.); hRecipe – формат описания кулинарных рецептов; hReview – формат разметки отзывов.

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

  1. Open Graph – стандарт семантической разметки веб-документов, разработанный компанией Фейсбук с первоначальной целью контроля превью при размещении в социальных сетях.

    Официальный сайт: http://ogp.me/

    Русскоязычный сайт: http://ruogp.me/

    Данная разметка представляет собой набор метатегов, находящихся между элементами <head> и </head>.

    Также хочется отметить, что в стандарте Open Graph одна страница описывает только один объект – человека, продукт, фильм или другую сущность.

    Давайте рассмотрим основные теги более подробно.

    <meta property=»og:title» content=»Заголовок»/>
    <meta property=»og:description» content=»Описание страницы»/>
    <meta property=»og:image» content=»изображение.jpg»>
    <meta property=»og:type» content=»Тип обьекта»/>
    <meta property=»og:url» content= «Идентификатор адреса страницы» />

    Пример использования:

    <meta property=»og:type» content=»article» />
    <meta property=»og:title» content=»Яйца фаршированные тунцом — ********- Как готовить вкусно!» />
    <meta property=»og:description» content=»Если вам хочется порадовать себя и своих родных чем-то вкусным, легким и несложным в приготовлении блюдом, то воспользуйтесь нашим чудесным рецептом. Яйца, фаршированные тунцом, выглядят потрясающе аппетитными, на вкус – удовлетворят любого гурмана, плюс – полезны и калорий не так, чтобы много. Зато удовольствия будет с избытком. Особенно, если к готовке подключить свою «вторую половинку»,…Подробнее» />
    <meta property=»og:url» content=»http://****/recipe/yajca-farshirovannye-tuncom/»/>
    <meta property=»og:image» content=»http://***/wp-content/uploads/2016/11/Tuna-Deviled-Eggs-1-15.jpg»/>

    Получаем при шаринге в соцсетях следующее:

    Формат опенграф шаринг в Фейсбук

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

  2. И вот, наконец, мы подобрались, на мой взгляд, к основному стандарту shema.org, который поисковые системы рекомендуют использовать (но не стоит думать, что вы можете использовать только данный формат – не забывайте, что всё зависит от целей).

    Shema.org – стандарт, разработанный 2 июня 2011 года при совместном участии ведущих поисковых систем мира (Google, Yahoo, Microsoft), а 1 ноября 2011 года к ним присоединился и Яндекс.

    Официальный сайт: https://schema.org/

    Русскоязычный сайт: http://ruschema.org/ (на данный момент содержит не все сущности).

    Прежде чем перейти дальше, рассмотрим, что такое синтаксис микроразметки.

    Синтаксис микроразметки (формат) — способ использования стандарта (словаря). Формат устанавливает, при помощи каких тегов и как будут описываться сущности и их свойства на веб-документах.

    Для shema.org на данный момент описано 3 основных синтаксиса: Microdata, RDFa и JSON-LD (рекомендуемый компанией Google).

    Но в данном случае советом от Google мы всё же рекомендуем пренебречь и использовать синтаксис Microdata. Это связано с тем, что синтаксис JSON-LD (офицальный сайт http://json-ld.org/) на данный момент используется Яндекс.Почтой, но пока не отображается в результатах поиска Яндекса (то есть сформировать расширенный сниппет в Яндексе при использовании JSON-LD у вас не получится).

Вроде со стандартом определились, с синтаксисом тоже.

Для начала определимся, какая основная цель разметки. Если вы прочитали статью о том, что с разметкой вам гарантировано место в топ-10, то это не так. Цель микроразметки – улучшить понимание сайта в глазах робота, отправить в базы знаний поисковых систем информацию, повысить CTR вашего сниппета (что косвенно может увеличить и ваш трафик и позиции). Но надо понимать, что это всё косвенные показатели. Сайты с использованием микроразметки и без неё ранжируются одинаково.

Теперь давайте разберем, какие данные на сайте стоит разметить и какие поддерживаются поисковыми системами на данный момент (так как поддерживаемых сущностей с каждым днем становится всё больше).

Более подробно разберем три наиболее встречаемых примера:

Разметка карточки товаров schema.org

Товарные карточки – размечаем по сущности Product. Реализация данного вида поможет получить нам следующий сниппет в Яндексе:

Товарный сниппет schema.org в Яндексе

Не путать с товарным сниппетом в выдаче Яндекса, полученным при использовании .yml файла из Яндекс.Маркета или сервиса «Товары и цены» вебмастера Яндекса.

Товарный сниппет .YML в Яндексе

В Google:

Товарный сниппет в Google

Каким образом получить данный сниппет?

Используя словарь schema.org и синтаксис Microdata, добавляем к существующему html-коду следующее.

<!—Указывается схема Product.—>
<div itemscope itemtype=»http://schema.org/Product»>
<!—В поле name указывается наименование товара.—>
<h1 itemprop=»name»>COTTON DREAMS Наволочки </h1>
<!—В поле image указывается ссылка на картинку товара.—>
<a itemprop=»image» class=»fancyboxitem» href=»/userfiles/cotton-dreams.jpeg» title=»COTTON DREAMS Наволочки » ><img src=»/userfiles/cotton-dreams.jpeg» alt=»Наволочка COTTON DREAMS «></a>
<!—В поле description дается описание товара.—>
<p itemprop=»description»>Добавьте еще больше уюта в доме с наволочками «Cotton Dreams»! …<
<!—Указывается схема Offer.—>
<div itemprop=»offers» itemscope itemtype=»http://schema.org/Offer» class=»addtocartsuc»>
<!—В поле price указывается цена товара.—>
<span itemprop=»price» content=»929.00″ class=»strong»>929,00 <small>р.</small>
<!—В поле priceCurrency указывается валюта данные выводим мета информацией так как на странице она не где не присутствует.—>
<meta itemprop=»priceCurrency» content=»RUB»>
<!—Указывается свойство InStock, которое свидетельствует о том, что товар в наличии, данные выводим также метаинформацией —>
<meta itemprop=»availability» content=»http://schema.org/InStock»/>

Разметка отзывов в товарной карточке schema.org

Отзывы о товаре или услуге размечаем по сущности Review.

<!—Указывается схема Review.—>
<div class=»comment» itemprop=»review» itemscope itemtype=»http://schema.org/Review»>
<!—В поле date указывается дата публикации отзыва.—>
<span class=»date» itemprop=»datePublished» content=»2017-03-21T08:27:00″>21.03.2017 08:27
<div class=»rating-person»>
<input type=»hidden» name=»val» value=»5″/>
<input type=»hidden» name=»vote-id» value=»Array»/>
</div>
</span>
<!—Указывается схема Rating.—>
<span itemprop=»reviewRating» itemscope itemtype=»http://schema.org/Rating»>
<!—В поле worstRating метаинформацией указываем минимально возможный рейтинг.—>
<meta itemprop=»worstRating» content = «1»/>
<!—В поле ratingValue мета информацией указываем текущий рейтинг.—>
<meta itemprop=»ratingValue» content = «5»/>
<!—В поле bestRating метаинформацией указываем максимально возможный рейтинг.—>
<meta itemprop=»bestRating» content = «5»/>
</span>
<!—Указывается схема Person.—>
<span itemprop=»author» itemscope itemtype=»http://schema.org/Person»>
<!—В поле name указываем имя автора.—>
<span itemprop=»name» class=»name»>Наталья</span>
</span>
<!—В поле reviewBody указываем сам отзыв на товар.—>
<p itemprop=»reviewBody»>Супер вещь!) Эффект сразу и налицо)</p>
</div>
</div>

Без разметки наш сниппет выглядел в Google так:

Сниппет без разметки Google

С использованием разметки по сущности Person и Review сниппет выглядит так:

Красивый товарный с рейтингом сниппет Google

Согласитесь, сниппет стал намного привлекательней. С таким сниппетом гарантированно повышение CTR.

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

Красивый сниппет мобильная выдача Google

Разметка рецептов по schema.org

Отойдем от коммерческой тематики и попробуем разметить сущность Recipe.

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

Сниппет рецептов Google

А в Яндексе как было, так и осталось. При том, что сайт чист, без санкций, дизайн шикарный, сайт посещаем, разметка выполнена верно, в валидаторе ошибок не наблюдалось. Поискав причину ещё пару дней, решили отписать Платону.

На вопрос, почему такая ситуация с данным сайтом, мы получили следующий ответ.

Ответ Яндекса

У кого есть подобная проблема на кулинарных сайтах, возможно, у вас такая же причина. Каждый раз убеждаюсь, что справка – наше всё.)) Также хочется отметить качество саппорта Яндекса, выразить благодарность за оперативные ответы – переписка происходила практически в реальном времени.

Теперь перейдем к реализации разметки кулинарных сайтов.

<!—Указывается схема Recipe.—>
<div class=»single-panel» itemscope itemtype=»http://schema.org/Recipe»>
<!—В поле totalTime указывается время приготовления в формате ISO 8601.—>
</i><meta itemprop=»totalTime» content=»PT40M»/><span> 40 мин.</span></li>
<!—В поле name название рецепта или блюда.—>
<h1 itemprop=»name»>Название рецепта</h1>
<!—В поле recipeYield количество порций на выходе—>
<span itemprop=»recipeYield»>Порций 6</span>
<!—В поле ingredients количество ингредиентов рецепта (как правило, несколько) —>
<div class=»print-ingredient» itemprop=»ingredients»>
<span class=»ingredient-amount»>6шт.</span>
<span class=»ingredient-name»>Яйца</span>br> </div> <div class=»print-ingredient» itemprop=»ingredients»>
<span class=»ingredient-amount»>400гр.</span>
<span class=»ingredient-name»>Сахарный песок</span>
</div>
……………………И т.д ингредиенты……………………………
<div class=»print-ingredient» itemprop=»ingredients»>
<span class=»ingredient-amount»>100гр.</span>
<span class=»ingredient-name»>Какао</span>
</div>
<!—В поле description дается описание рецепта.—>
<div class=»single-content-self» itemprop=»description»>
<p>Торт Черепаха готовится не трудно, к тому же он бесспорно станет любимым тортом для ваших детей, поскольку выглядит он как симпатичная черепашка.</p>
</div>
<!—В поле recipeInstructions инструкция по приготовлению.—>
<table class=»recipe-steps-table» itemprop=»recipeInstructions»>
<!—В поле image изображение процесса приготовления, может быть несколько. Рекомендуем указать данное поле для формирования улучшенного сниппета.—>
<img itemprop=»image» src=»/адрес изображения.jpg» alt=»»>
<p>…….</p>
</table>
<!—В схема nutrition описывается энергетическая или пищевая ценность блюда—>
<div class=»single-nutritions-list» itemprop=»nutrition» itemscope itemtype=»http://schema.org/NutritionInformation»>
<!—В поле calories указывается калорийность блюда—>
<div class=»single-nutrition-value» itemprop=»calories»>2100</div>
</div>
<!—В поле author указывается указывается автор, написавший данный рецепт—>
<h3 class=»author-name» itemprop=»author»><a rel=»nofollow» href=»****/»>Victory</a></h3>
…..
</div>
</p>
<p><a class=»photos p-zoom» href=»/files/blog/2017/social-partners_13.jpg» rel=»imgs»>
<img class=»shadowed» src=»/files/blog/2017/social-partners_13-mini.jpg» alt=»Формат опенграф шаринг в Фейсбук»>
<span class=»zoom»></span> </a>

В Гугле наш красивый сниппет:

Сниппет рецептов Google с выводом калорий

Мы разместим скриншот снипетта в Яндексе, когда информация обновится (ориентировочно через две недели).

UPD от 05.06.2017: Как и обещали, добавляем скрин из Яндекса:

Сниппет рецептов в Яндексе

1ps.ru


You May Also Like

About the Author: admind

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

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

Этот сайт использует Akismet для борьбы со спамом. Узнайте как обрабатываются ваши данные комментариев.