Strona główna      Publikacje      SEO Meta Tagi w Social Media

SEO Meta Tagi w Social Media

Jak zoptymalizować stronę w mediach społecznościowych typu Google+, Facebook, Twitter, Pinterest... poradnik.

Zapraszam do publikacji, dotyczącej zasad projektowania stron internetowych zgodnie z zasadami SEO.

Meta Tagi zaawansowany SEO

Z pomocą przyjdzie utworzony specjalnie protokół nazwany Open Graph protocol.

Przejdź OGP

 

W trzech etapach postaram się przedstawić wymagane tagi w sekcji HEAD dla mediów i zewnętrznych serwisów zintegrowanych z Państwa stroną internetową.

1. Minimalne tagi Social Media.

Przeznaczone dla pojedynczej podstrony stworzonej jako artykuł.

Wersja zawiera minimum danych do zoptymalizowania udostępniania na Twitterze, Facebooku, Google+ i Pinterest.
Tytuły i opisy meta są uwzględnione, mimo że nie są technicznie meta tagami społecznościowymi. Dzieje się tak dlatego, że mogą z nich korzystać Google+ i inne platformy mediów społecznościowych. Najlepiej jest je umieszczać na każdej opublikowanej podstronie.


<!-- Umieść tagi w sekcji <head> Twojej strony -->
<title>Tytuł podstrony. Maksymalnie 60-70 znaków.</title>
<meta name="description" content="Opis podstrony, krótszy niż 155 znaków." />

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

<!-- Open Graph -->
<meta property="og:title" content="Tytuł artykułu" />
<meta property="og:type" content="article" />
<meta property="og:url" content="Link do podstrony np. http://www.nazwa-strony.pl/index.php" />
<meta property="og:image" content="Link do zdjęcia np. http://www.nazwa-strony.pl/image.jpg" />
<meta property="og:description" content="Opis podstrony, krótszy niż 155 znaków." />

2. Standardowe tagi Social Media.

Przeznaczone dla pojedynczej podstrony stworzonej jako artykuł.

Standardowy szablon tagów przedstawia bardziej niezawodną implementację dla tagów społecznościowych i działa na wszystkich platformach. Oprócz minimalnych funkcji, standardowy szablon zawiera:


<!-- Umieść tagi w sekcji <head> Twojej strony -->
<title>Tytuł podstrony. Maksymalnie 60-70 znaków.</title>
<meta name="description" content="Opis podstrony, krótszy niż 155 znaków." />

<!-- Twitter Card -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Tytuł podstrony.">
<meta name="twitter:description" content="Opis podstrony, krótszy niż 200 znaków.">
<meta name="twitter:creator" content="@author_handle">
<-- Twitter Rozmiar zdjęcia musi być większy niż 120x120px -->
<meta name="twitter:image" content="http://www.nazwa-strony.pl/image.jpg">

<!-- Open Graph -->
<meta property="og:title" content="Tytuł artykułu" />
<meta property="og:type" content="article" />
<meta property="og:url" content="Link do podstrony np. http://www.nazwa-strony.pl/index.php" />
<meta property="og:image" content="Link do zdjęcia np. http://www.nazwa-strony.pl/image.jpg" />
<meta property="og:description" content="Opis podstrony, krótszy niż 155 znaków." />
<meta property="og:site_name" content="Nazwa projektu, do której należy podstrona" />
<meta property="fb:admins" content="Facebook ID administratora" />

3. Pełna wersja tagów w Social Media.

Oprócz wszystkich tagów z wersji standardowej, pełna wersja zawiera również:

  • Google Authorship & Google Markup - rodzaj sinppetu ze zdjęciem oraz informacją o autorze, który zawiera także link do profilu Google+ więcej informacji
  • Schema.org article markup - w SEO pozwala na zrozumienie przez wyszukiwarki treść strony/podstrony
  • Twitter duże zdjęcie - więcej informacji
  • Rozszerzona wersja protokołu Open Graph - więcej informacji

 <!-- Umieść w elemencie HTML atrybut itemscope i itemtype. -->
<html itemscope itemtype="http://schema.org/Article">

<!-- Umieść tagi w sekcji <head> Twojej strony -->
<title>Tytuł podstrony. Maksymalnie 60-70 znaków.</title>
<meta name="description" content="Opis podstrony, krótszy niż 155 znaków." />

<!-- Schema.org markup Google+ -->
<meta itemprop="name" content="Imię i nazwisko lub tytuł">
<meta itemprop="description" content="Opis podstrony.">
<meta itemprop="image" content="Link do zdjęcia np. http://www.nazwa-strony.pl/image.jpg">

<!-- Twitter Card -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="@publisher_handle">
<meta name="twitter:title" content="Tytuł podstrony.">
<meta name="twitter:description" content="Opis podstrony, krótszy niż 200 znaków.">
<meta name="twitter:creator" content="@author_handle">
<!-- Twitter Rozmiar zdjęcia musi być większy niż 280x150px -->
<meta name="twitter:image:src" content="http://www.nazwa-strony.pl/image.jpg">

<!-- Open Graph -->
<meta property="og:title" content="Tytuł podstrony." />
<meta property="og:type" content="article" />
<meta property="og:url" content="Link do podstrony np. http://www.nazwa-strony.pl/index.php" />
<meta property="og:image" content="Link do zdjęcia np. http://www.nazwa-strony.pl/image.jpg" />
<meta property="og:description" content="Opis podstrony, krótszy niż 155 znaków." />
<meta property="og:site_name" content="Nazwa projektu, do której należy podstrona" />
<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="Sekcja dla artykułu np. Sport" />
<meta property="article:tag" content="Tag dla artykułu" />
<meta property="fb:admins" content="Facebook ID administratora" />

Narzędzia do walidacji i testowania projektów tagów.

Zanim Twoje karty pojawią się na Twitterze, musisz najpierw zatwierdzić swoją domenę. Na szczęście jest to bardzo łatwy proces. Po zaimplementowaniu kart wystarczy wprowadzić przykładowy adres URL w narzędziu do weryfikacji. Po sprawdzeniu znaczników wybierz przycisk "Prześlij do zatwierdzenia".


Nie musisz uprzedniej zgody na wyświetlanie swoich tagów na Facebooku, ale oferowane przez nie narzędzie do debugowania daje ci mnóstwo informacji o wszystkich tagach i może analizować tagi na Twitterze.


Webmasterzy tradycyjnie używają narzędzia do testowania danych strukturalnych w celu testowania znaczników autorstwa i podglądu, w jaki sposób fragmenty będą pojawiać się w wynikach wyszukiwania, ale można również sprawdzić, jakie inne rodzaje metadanych Google są w stanie wyodrębnić z każdej strony.


Podsumowanie:

Jeśli możesz wybrać tylko jeden typ danych meta do uwzględnienia, najlepszym wyborem jest Open Graph. To dlatego, że wszystkie platformy mogą używać go jako zabezpieczenia, w tym w dużym stopniu na Twitterze.

Więcej informacji o meta tagach

   Strona główna      Publikacje      SEO Meta Tagi w Social Media