Social Meta Tags за Facebook, Twitter, Google+…

17 авг. 2014 | Оптимизация
Social Meta Tags за Facebook, Twitter, Google+

Включването на метаданните за социалните мрежи (social media metadata) е важно. Това позволява да се оптимизира показването на информацията от вашите WordPress сайтове при споделянето й в Twitter, Facebook, Google+, Pinterest и други – как да се появяват заглавието, описанието, изображението и други в потока на съответната социална мрежа. Всичко това е полезно и за SEO-то на вашия сайт.

Включването на данните става посредством мета тагове, специфични за отделните социални мрежи. Единият от начините да добавите необходимите мета тагове е като използвате WordPress плъгин, като най-популярният за момента е Yoast’s SEO plugin. Това обаче можете да направите и сами, а отдолу ще ви покажа как точно трябва да изглеждат метаданните за различните социални мрежи (Twitter Card data, Open Graph data, Schema.org markup), подходящи за блогове или сайтове с предимно текстово съдържание. Използвайте шаблоните и ги преработете според вашите нужди. Поставете ги в head частта на сайта си.

1. Минималистичен шаблон
Съдържа минумума информация за споделените ви статии в Twitter, Facebook, Google+ и Pinterest.

<!-- Twitter Card data -->
<meta name="twitter:card" value="summary">

<!-- Open Graph data -->
<meta property="og:title" content="Заглавието на статията" />
<meta property="og:type" content="article" />
<meta property="og:url" content="http://www.yoursite.com/" />
<meta property="og:image" content="http://yoursite.com/image.jpg" />
<meta property="og:description" content="Описание на статията" />

2. Стандартен шаблон
Разширява минималистичния със следните данни: The basic Twitter Summary card, Twitter thumbnail image и Facebook Page Insights.

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Заглавието на статията">
<meta name="twitter:description" content="Описание на статията, не повече от 200 символа">
<meta name="twitter:creator" content="@author_handle">
<meta name="twitter:image" content=" http://www.yoursite.com/image.jpg"><-- размер не по-малък от 200x200px -->

<!-- Open Graph data -->
<meta property="og:title" content="Заглавието на статията" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.yoursite.com/" />
<meta property="og:image" content=" http://yoursite.com/image.jpg" />
<meta property="og:description" content="Описание на статията" />
<meta property="og:site_name" content="Име на сайта, например WordPress tips and tricks" />
<meta property="fb:admins" content="Вашият Facebook ID" />

3. Пълен шаблон
Добавя към стандартния шаблон още Google Authorship и Publisher Markup и някои допълнителни метаданни. Това по никакъв начин не променя показването на съдържанието ви в Google+, но по този начин свързвате сайта си със страницата си в Google+ (ако имате такава), а влияе и върху показването на резултатите от търсенето.

<!-- Include the itemscope and itemtype attributes. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Google Authorship and Publisher Markup -->
<link rel="author" href=" https://plus.google.com/[Google+_Profile]/posts"/>
<link rel="publisher" href=” https://plus.google.com/[Google+_Page_Profile]"/>

<!-- Schema.org markup for Google+ -->
<meta itemprop="name" content="Заглавието на статията">
<meta itemprop="description" content="Описание на статията">
<meta itemprop="image" content=" http://www.yoursite.com/image.jpg">

<!-- Twitter Card data -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Заглавието на статията">
<meta name="twitter:description" content="Описание на статията">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter summary card с голямо изображение, минимум 280x150px -->
<meta name="twitter:image:src" content=" http://www.yoursite.com/image.html">

<!-- Open Graph data -->
<meta property="og:title" content="Заглавието на статията" />
<meta property="og:type" content="article" />
<meta property="og:url" content=" http://www.yoursite.com/" />
<meta property="og:image" content=" http://yoursite.com/image.jpg" />
<meta property="og:description" content="Описание на статията" />
<meta property="og:site_name" content="Име на сайта, например WordPress tips and tricks" />
<meta property="article:published_time" content="2013-09-17T05:59:00+01:00" />
<meta property="article:modified_time" content="2013-09-16T19:08:47+01:00" />
<meta property="article:section" content="Article Section" />
<meta property="article:tag" content="Article Tag" />
<meta property="fb:admins" content="Вашият Facebook ID" />

След като добавите метаданните в head частта на сайта си, можете да използвате онлайн инструментите по-долу за да видите дали всичко работи коректно:

1. Twitter Validation Tool

2. Facebook Debugger

3. Google Structured Data Testing Tool

4. Pinterest Rich Pins Validator

ВАЖНО: За да се възползвате от функционалността на Twitter и Pinterest най-напред трябва да преминете през процес на одобрение.

По-горе са показани примерни варианти за добавяне на метаданни в сайта, а в предишната статия е обяснено как да направите това да става автоматично във вашия WordPress сайт. Даденият пример е само за Facebook, но можете да си го нагодите и за нуждите на останалите социални мрежи.