• Strona główna
  • Curriculum Vitae
  • O mnie
  • PrzykÅ‚ad: Gramatyka w PHP
  • PrzykÅ‚ad: Kompresja CSS
  • PrzykÅ‚ad: Kompresja JavaScript
  • PrzykÅ‚ad: Skracanie linków
  • PrzykÅ‚ad: Wykrywanie serwera HTTP
  • PrzykÅ‚ad: WÅ‚asna bramka SMS
  • Mapa strony
  • Kontakt
Niebieski Pomarańczowy Zielony Różowy Fioletowy

HTML i Social marketing

Opublikowane 10 października 2012. Autor: Kamil Brenk. Wizyt: 3 348.

Kategorie: HTML5 & CSS3
Tematyka: e-commerce, marketing, optymalizacja pod wyszukiwarki, social media

paÅ 10

KiedyÅ› aby wypromować stronÄ™ wystarczyÅ‚o jÄ… zoptymalizować i wypozycjonować w wyszukiwarkach, a wÅ‚aÅ›ciwie jednej – Google (zgodnie z zasadÄ… Pareto).

Dzisiaj aby zaistnieć w sieci należy włożyć trochę więcej trudu i dostosować stronę do nowych środków komunikacji, o czym przeczytasz w niniejszym wpisie.

Web 2.0 już na dobre zagoÅ›ciÅ‚o w naszym życiu i coraz częściej sÅ‚yszy siÄ™ sÅ‚owa: „nie ma CiÄ™ na Facebooku = nie istniejesz”. Facebook niedawno chwaliÅ‚ siÄ™ 1 mld aktywnych użytkowników miesiÄ™cznie. Do tego dochodzi Google+, Twitter i wiele innych serwisów spoÅ‚ecznoÅ›ciowych. Ludzie coraz częściej korzystajÄ… z tego Å›rodka komunikacji, wymieniajÄ…c siÄ™ odsyÅ‚aczami do ciekawych treÅ›ci, pomijajÄ…c tym samym samodzielne wyszukiwania w Google.

Jak zatem przygotować nasze strony by dobrze się tam prezentowały?

Open Graph

Z pomocą przychodzi protokół Open Graph, z którego korzystają już takie serwisy jak Facebook, Google+ czy Twitter.

Protokół ten służy ujednoliceniu opisu stron WWW i zbudowaniu lepszej, semantycznej sieci, w której wszelkie zasoby są odpowiednio opisane i uporządkowane tematycznie.

Dzięki Open Graph możemy przy pomocy metadanych w prosty sposób opisywać nasze serwisy i konkretne podstrony. W opisie możemy zawrzeć tytuł, opis, zdjęcie czy film, typ zasobu i inne.

Metadane dodajemy analogicznie do wszystkim znanych Description czy Keywords, np.:

1
2
3
<meta property="og:title" content="Tytuł strony">
<meta property="og:type" content="website">
....

Przyjrzyjmy się zatem dostępnym nam znacznikom opisu dokumentów. Dzielą się one na dwie grupy, podstawowe (wymagane) i rozszerzone (opcjonalne).

Do podstawowych metadanych zaliczamy:

  • og:title
    Tytuł opisujący zawartość strony, może być analogiczny do wartości elementu TITLE.
  • og:type
    Typ danych zawartych na stronie. Dostępnych jest wiele różnych typów (np. piosenka, teledysk, film, artykuł, książka, profil osoby), a niektóre z nich pozwalają na dodanie kolejnych metadanych szczegółowo opisujących ten typ.
  • og:image
    Miejsce na odsyłacz do obrazka reprezentującego daną stronę. Takie obrazki są wykorzystywane w wielu miejscach serwisów społecznościowych, jak choćby przy generowaniu miniaturki strony podczas publikacji postów na Facebooku.
  • og:url
    Adres kanoniczny do aktualnej strony, tzn. pełen adres bez zbędnych parametrów (jak choćby sesja użytkownika czy oznaczenie kampanii reklamowej).

Dodatkowe metadane (opcjonalne):

  • og:site_name
    W elemencie TITLE czÄ™sto jesteÅ›my zmuszeni umieszczać zarówno tytuÅ‚ podstrony, jak i nazwÄ™ serwisu (np. Moja strona – Galeria zdjęć).

    Przy uzupełnianiu danych do Open Graph powinniśmy wydzielić dwa osobne pola:

    1
    2
    <meta property="og:site_name" content="Moja strona">
    <meta property="og:title" content="Galeria zdjęć">
  • og:description
    Krótki opis strony, może być analogiczny do metadanej Description.
  • og:locale, og:locale:alternate
    W polu tym umieszczamy kod języka użytego na stronie (domyślnie amerykański). Jeśli nasza strona jest dostępna w różnych językach, możemy wskazać je w polu og:locale:alternate.

    Możemy również ustawić wiele różnych języków alternatywnych przez duplikowanie tego elementu z różnymi wartościami, np.:

    1
    2
    3
    <meta property="og:locale" content="pl_PL">
    <meta property="og:locale:alternate" content="fr_FR">
    <meta property="og:locale:alternate" content="en_GB">
  • og:audio, og:video
    Nasz opis dokumentu możemy urozmaicić o dodatkowy plik audio i/lub wideo (mimo to musimy pamiętać o obowiązkowym osadzeniu obrazu!).

Wszystkie powyższe znaczniki powinny oczywiście trafić do sekcji HEAD dokumentu HTML, koniecznie dopiero po określeniu kodowania (inaczej mogą pojawić się błędy).

Po więcej informacji dotyczących protokołu Open Graph odsyłam do oficjalnej dokumentacji, w której znajdziesz także przykłady użycia.

Ps. na GitHubie już pojawiła się biblioteka do generowania znaczników Open Graph :-)

Facebook i protokół Open Graph

Jak już się pewnie domyśliłeś, Facebook korzysta z metadanych Open Graph. Ponadto udostępnia dodatkowe pola metadanych, a wśród nich m. in.:

  • geolokalizacja: og:latitude, og:longitude, og:street-address, og:locality, og:region, og:postal-code, og:country-name (przydatne przy opisywaniu np. placówki firmy),
  • informacje kontaktowe: og:email, og:phone_number, og:fax_number,
  • bogatszy wybór typów (food, drink, author, musican, etc) – tak opisane strony sÄ… lepiej agregowane przez Facebooka (Adam Nowak polubiÅ‚ sportowca XYZ).

Warto również wiedzieć o dwóch dedykowanych Facebookowi polach, które umożliwiają administrowanie i śledzenie statystyk strony:

  • fb:admins
    W polu tym należy wskazać administratorów strony (można użyć wiele identyfikatorów rozdzielonych przecinkami).

    Identyfikatory możemy uzyskać z adresu: http://graph.facebook.com/me (zamiast me wpisujemy nazwÄ™ konta i przechodzimy pod wskazany adres – tam znajdziemy interesujÄ…ce nas dane w polu id)

  • fb:app_id
    Służy do wskazania identyfikatora aplikacji Facebook Platform, jeśli taką posiadamy.

W razie pytań i wątpliwości warto zajrzeć do bogatej dokumentacji Open Graph dla Facebooka.

Warto również zapoznać się z narzędziem Open Graph Debugger, w którym sprawdzimy poprawność metadanych oraz podejrzymy efekt wprowadzonego opisu.

Przykładowy efekt użycia protokołu Open Graph po opublikowaniu postu na Facebooku:

kamilbrenk.pl - przykład użycia Open Graph dla Facebooka

Twitter Cards

Żeby nie żyło nam się za łatwo, Twitter wymyślił swój własny protokół metadanych. Uzupełnienie tych danych umożliwi wzbogacanie publikowanych tweetów o tzw. Twitter Cards, czyli rozwijaną zakładkę z opisem strony.

Jest to funkcjonalność tylko dla zaakceptowanych przez Twittera witryn. Żeby dodać obsługę dla naszej strony wypełniamy formularz: Participate in Twitter Cards.

Do dyspozycji dostajemy następujące pola metadanych:

  • twitter:card
    Definiuje typ karty: summary, photo lub video.
  • twitter:url
    Pole analogiczne do og:url.
  • twitter:title
    Pole analogiczne do og:title.
  • twitter:description
    Pole analogiczne do og:description. Maksymalnie 200 znaków.
  • twitter:image
    Pole analogiczne do og:image.
  • twitter:site, twitter:site:id
    Wskazuje konto strony na Twitterze. W pierwszym przypadku identyfikator poprzedzamy znakiem @, np. „@kamilbrenk”, natomiast w drugim podajemy samÄ… nazwÄ™ konta: „kamilbrenk”.
  • twitter:creator, twitter:creator:id
    Wskazujemy tutaj konto autora treści na Twitterze, np. redaktora (zasady te same co przy polu site).

Dodatkowo należy wiedzieć, że przy wyborze typu photo lub video dochodzą kolejne pola metdanych do wypełnienia. Przy zdjęciach będą to:

  • twitter:image:width
  • twitter:image:height

Przy filmach natomiast:

  • twitter:player
  • twitter:player:width
  • twitter:player:height
  • twitter:player:stream
  • twitter:player:stream:content_type

Po szczegóły odsyłam do dokumentacji Twitter Cards.

Co istotne, jeśli na jednej stronie używamy zarówno tagów Open Graph, jak i Twitter Cards, możemy pominąć duplikujące się pola (zostawiamy pola Open Graph z racji, że to otwarty protokół wykorzystywany przez wiele serwisów).

Schema.org

JeÅ›li ktoÅ› pomyÅ›laÅ‚, że powyższe protokoÅ‚y opisu zasobów w Sieci bÄ™dÄ… wystarczajÄ…ce to niestety siÄ™ rozczaruje – do naszej kolekcji dochodzi kolejny standard opisu danych strukturalnych: schema.org.

Schema.org został stworzony przy współpracy głównych wyszukiwarek i jest wykorzystywany m. in. przez Bing, Google, Yahoo! czy Yandex. Myślę, że to wystarczający argument, by stosować się do tego standardu :-)

Po więcej informacji odsyłam do oficjalnej strony schema.org, gdzie znajdziesz wszelkie możliwe informacje. Jeśli ktoś natomiast szuka polskojęzycznych zasobów to ma do dyspozycji np. Przewodnik schema.org – wprowadzenie

Praktyczny przykład użycia

Na zakończenie wypadałoby podsumować omówione protokoły i standardy opisu zasobów WWW przykładem z prawdziwego zdarzenia.

Metadane dla niniejszego bloga (blog.kamilbrenk.pl) wyglądałyby następująco:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
<!DOCTYPE html>
<html itemscope itemtype="http://schema.org/Blog">
<head>
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">

    <title>Kamil Brenk Blog - PHP, JavaScript, SQL</title>
   
    <meta property="og:site_name" content="Kamil Brenk Blog">
    <meta property="og:title" content="Blog o PHP, JavaScript, SQL">
    <meta property="og:description" content="Blog o tworzeniu aplikacji na potrzeby sieci Web. Praktyczne przykÅ‚ady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.">
    <meta property="og:type" content="website">
    <meta property="og:image" content="http://blog.kamilbrenk.pl/screen.jpg">
    <meta property="og:url" content="http://blog.kamilbrenk.pl/">
    <meta property="og:locale" content="pl_PL">
   
    <meta name="description" content="Blog o tworzeniu aplikacji na potrzeby sieci Web. Praktyczne przykÅ‚ady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.">
    <meta name="keywords" content="blog o programowaniu, php, sql, javascript, html5, css3">
   
    <meta property="fb:admins" content="100000266026330">
   
    <meta property="twitter:card" content="summary">
    <meta property="twitter:site" content="@kamilbrenk">
    <meta property="twitter:creator" content="@kamilbrenk">
   
    <meta itemprop="creator" content="Kamil Brenk">
    <meta itemprop="name" content="Kamil Brenk Blog - PHP, JavaScript, SQL">
    <meta itemprop="description" content="Blog o tworzeniu aplikacji na potrzeby sieci Web. Praktyczne przykÅ‚ady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.">
    <meta itemprop="image" content="http://blog.kamilbrenk.pl/screen.jpg">

    <link rel="canonical" href="http://blog.kamilbrenk.pl/">
</head>

Sporo tych informacji, dodatkowo niektóre siÄ™ powtarzajÄ…. Nie wyglÄ…da to elegancko, niestety pozostaje nam siÄ™ dostosować do panujÄ…cych zasad – marketing to podstawa w budowaniu dobrze prosperujÄ…cego biznesu :-)

Komentarze (5)

  1. Renn 16 stycznia 2013

    W dzisiejszych czasach bez dziaÅ‚alnoÅ›ci w social media bardzo ciężko siÄ™ wypromować. Niektórzy nawet rezygnujÄ… ze zwykÅ‚ej strony internetowej i dziaÅ‚ajÄ… tylko w obrÄ™bie facebooka lub twittera…

  2. Kamil Brenk 16 stycznia 2013

    @Renn: niestety masz racjÄ™. Co gorsze, żeby siÄ™ wypromować każdy próbuje pchać tam tylko chÅ‚am i taniÄ… rozrywkÄ™. Widać efekty tego, że internet zastÄ™puje tv – ci sami odbiorcy konsumujÄ… te same bezużyteczne treÅ›ci, zmieniÅ‚ siÄ™ jedynie kanaÅ‚ odbioru :)

  3. Maciej 26 marca 2013

    Rozumiem system działania ale pewnej rzeczy nie potrafię zrozumieć.. Wszędzie pisze jak zrobić na konkretnej pod stronie a jeśli mój serwis ma codziennie masę więcej linków to jak to zrobić aby każdy nowo wygenerowany posiadał swój opengraph ?

  4. Kamil Brenk 26 marca 2013

    @Maciej: musisz zrobić dla każdej podstrony z osobna, tak samo jak dla każdej podstrony robisz inny tag TITLE, meta tagi i resztÄ™. JeÅ›li masz dedykowanÄ… aplikacjÄ™ – wypadaÅ‚oby napisać mechanizm automatyzujÄ…cy część pracy, natomiast w przypadku korzystania z różnych CMS-ów czÄ™sto masz już to zaimplementowane (WordPressy, Drupale i reszta).

  5. krynicz 11 lutego 2019

    Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w metatagach na naszej podstronnie z artykułem a po FB sam sobie zaciąga info z naszej strony i publikuje w formie posta na naszym funpage? Czy to jest tak że publikujemy posta z adresem podstrony naszego artykułu na Fb a później Fb tylko go poprawia zczytując info z OG?



Kamil Brenk Blog

PHP, JavaScript, SQL, HTML

  • Informacje o blogu

    Kamil Brenk

    Blog o tworzeniu aplikacji na potrzeby sieci Web.

    Praktyczne przykłady, porady i sztuczki. PHP, SQL, AJAX, JavaScript, HTML i pochodne.

    Kanał RSS

    • Najnowsze
    • Komentarze
    • Popularne
    • Liczniki w CSS
    • Wyprzedaż książek o programowaniu!
    • Niestandardowy placeholder
    • JavaScript w moduÅ‚ach
    • Co dalej z blogiem?
    • Interaktywna mapa w HTML i CSS
    • Olsztyn: Jak wyseparować zawartość zassanÄ… przez file_get_content?
    • ERMLAB: Od czegoÅ› trzeba zacząć :) Wiele osób wÅ‚aÅ›nie stawia na...
    • david: co nalezy wkleić na stronÄ™ aby plik ze stylami byÅ‚ ladowany...
    • krynicz: Nie jestem pewien czy dobrze to rozumiem: wpisujemy OG w...
    • yaro: Jak zmienić re_write znak "_" na "-"?
    • Piotr: stworzyÅ‚em prostÄ… stronkÄ™ w PHP, czy jest możliwość aby...
    • MichalR: Super sprawa... bardzo przydatne.. dzieki i pozdrawiam..
    • Niestandardowe czcionki na stronie
    • Sposoby wczytywania JavaScript
    • Gramatyka w PHP, część 1
    • Umowa i zaliczka dla freelancera
    • WysyÅ‚anie wiadomoÅ›ci SMS w PHP
    • Projekt aplikacji po stronie klienta
    • WÅ‚asny mechanizm Feed
  • Szukajka
    Wpisz co chcesz wyszukać na stronie…
  • Kategorie
    • Apache
    • Freelancer
    • Front-end Development
    • HTML5 & CSS3
    • Inne
    • JavaScript
    • Książki
    • PHP
    • Po godzinach
    • Pozycjonowanie
    • Protokół HTTP
    • SQL
    • Wyrażenia regularne
  • Moje serwisy
    • Testy zawodowe
    • MiÅ‚ość, uczucia i seks
  • Czytane blogi
    • Wojciech Sznapka
    • Wojciech SoczyÅ„ski
    • MichaÅ‚ Wachowski
    • Tomasz Kowalczyk
    • Filip GórczyÅ„ski
  • Strona główna
  • Curriculum Vitae
  • O mnie
  • PrzykÅ‚ad: Gramatyka w PHP
  • PrzykÅ‚ad: Kompresja CSS
  • PrzykÅ‚ad: Kompresja JavaScript
  • PrzykÅ‚ad: Skracanie linków
  • PrzykÅ‚ad: Wykrywanie serwera HTTP
  • PrzykÅ‚ad: WÅ‚asna bramka SMS
  • Mapa strony
  • Kontakt

Kamil Brenk © 2010. All rights reserved.

Designed by FTL Wordpress Themes brought to you by Smashing Magazine.

Do góry ∧