Микроразметка: инструмент улучшения сайта

31.12.2015  08:46

Решил, наконец-то, сделать на своём сайте микроразметку. Зачем? Во-первых, ссылки из соцсетей и всяких твитторов стали привлекательнее. Во-вторых, вангую новые фильтры ПС, в которых оное будет учитываться положительным образом. Тут дело времени, но будет обязательно: есть микроразметка +, нет — извиняйте, минус сайту в поисковой выдаче.

Итак, первое, что категорически необходимо сделать — мета-теги:

<meta content="summary" property="twitter:card" />
<meta content="@panevin_ru" property="twitter:site" />
<meta content="Photograph" property="og:type" />
<meta content="Простыл" property="og:title" />
<meta content="http://panevin.ru/photo/detali/prostil.html" property="og:url" />
<meta content="http://panevin.ru/uploads/photo/2015/prostil_1024.jpg" property="og:image" />
<meta content="Простыл, детали,зима,Санкт-Петербург,стрелка Васильевского острова, Фотографии Петербурга, путешествия, Европа, природа и пейзажные зарисовки." property="og:description" />

<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@panevin_ru" />
<meta name="twitter:url" content="http://panevin.ru/photo/detali/prostil.html" />
<meta name="twitter:title" content="Простыл" />
<meta name="twitter:image" content="http://panevin.ru/uploads/photo/2015/prostil_1024.jpg" />
<meta name="twitter:description" content="Простыл, детали,зима,Санкт-Петербург,стрелка Васильевского острова, Фотографии Петербурга, путешествия, Европа, природа и пейзажные зарисовки." />
<link rel="image_src" href="<a href="view-source:http://panevin.ru/uploads/photo/2015/prostil_1024.jpg">http://panevin.ru/uploads/photo/2015/prostil_1024.jpg</a>" />

<meta name="mrc__share_title" content="Простыл" />
<meta name="mrc__share_description" content="Простыл, детали,зима,Санкт-Петербург,стрелка Васильевского острова, Фотографии Петербурга, путешествия, Европа, природа и пейзажные зарисовки." />

<meta itemprop="name" content="Простыл" />
<meta itemprop="description" content="Простыл, детали,зима,Санкт-Петербург,стрелка Васильевского острова, Фотографии Петербурга, путешествия, Европа, природа и пейзажные зарисовки." />
<meta itemprop="image" content="http://panevin.ru/uploads/photo/2015/prostil_1024.jpg" />



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

А если больше, то так:
Запись в твиттер со ссылкой и картинкой

Второе — разметка внутри страницы. Я сделал только для конечных страниц, на которые приходится 90% поискового траффика (редко кто приходит на страницы с постраничным выводом). На моём сайте 2 типа страниц: с единственной фотографией или запись в блоге (статья).
Для фото я использовал стандарт http://schema.org/Photograph:
<div itemscope itemtype="http://schema.org/Photograph"><br /><br />
<h1 itemprop="name">Простыл</h1><br /><br />
<a href="http://panevin.ru/uploads/photo/2015/prostil_1024.jpg" target="_blank"><img src="http://panevin.ru/uploads/photo/2015/prostil_600.jpg" width="600" height="400" border="0" alt="Простыл фото - Детали" itemprop="image" /></a><br /><br />
<span itemprop="description">Простыл</span><br /><br />
</div>

Для статей стандарт http://schema.org/BlogPosting:
<div itemscope itemtype="http://schema.org/BlogPosting">
<h1 itemprop="name">Петербург, приметы времени</h1>
<span itemprop="articleBody">Текст поста</span>
</div>

Готово! Собственно, какую схему использовать — выбор за вами.


перейти в Блог | Блог (стр. 7)

Ударим лайками по бездорожью, разгильдяйству и бюрократизму!


Ключевые слова (тэги): HTML 3  web-программирование 46  молодым домохозяйкам 36  

Вам есть что сказать — ну я же чую.
Высказаться о наболевшем, я выслушаю:
Имя


email (не публикуется)