Przeszukaj Wiedzodajnię

Przejdź do wyszukiwarki globalnej

Poradniki na Twój Email

Praktyczne informacje i specjalne oferty prosto na Twoją skrzynkę email.

Wpisz Email: 
 

Ostatnie Artykuły

Jak dodać pasek z informacją o ciasteczkach
 
Apptiker - czyli narzędzia dla strony www
 
Mierzymy wydajność strony internetowej
 
Mniej znane funkcje Google
 
Wielkie zmiany w Google
 

Ostatni komentarz

Subskrybuj kanał RSS

Kanał RSS

Od teraz o wszystkim co godne uwagi dowiesz się błyskawicznie.

U nas jesteś bezpieczny

website security

Ty też możesz chronić stronę i swoich Klientów. Sprawdź szczegóły.

Apptiker

The Open Graph - krótki poradnik

Autor: , Data publikacji , Kategoria: Budowa stron, Porady;
The Open Graph - krótki poradnik

The Open Graph Protokol (http://ogp.me), to standard opisu prezentowanych na stronie treści. Protokół dysponuje kilkoma zdefiniowanymi typami obiektów jaki możemy opisać, należą do nich:

  • Artykuł
  • Książka
  • Muzyka
  • Osoba
  • Wideo

Aby nasza witryna internetowa mogła stać się obiektem grafu społecznościowego (np. Facebook'a), niezbędne jest przeprowadzenie kilku działań, które to umożliwią.

Przede wszystkim musimy dodać odpowiednie znaczniki meta w kodzie nagłówka naszej strony, a są nimi:

  • og:type – czyli typ obiektu, np. „article”,
  • og:title – tytuł naszego obiektu. Pod tym tytułem pojawi się w grafie społecznościowym, np. „Tytuł mojego artykułu”,
  • og:url – URL do obiektu czyli adres naszego artykułu, np. http://moja-nazwa.pl/artykul/tytul-mojego-artykulu,
  • og:image – adres URL grafiki, która będzie reprezentowała obiekt w grafie, np: http://moja-nazwa.pl/img/obrazek.jpg.

Przykład gotowego kodu:

[..]
<head>
<title>Tytuł mojego artykułu</title>
<meta property="og:type" content="article" />
<meta property="og:title" content="Tytuł mojego artykułu" />
<meta property="og:url" content="http://moja-nazwa.pl/artykul/tytul-mojego-artykulu" />
<meta property="og:image" content="http://moja-nazwa.pl/img/obrazek.jpg" />
[..]
</head>
[..]
</html>

To w zasadzie podstawowe znaczniki Open Graph, które są konieczne, ale nie oznacza to, że są to wszystkie możliwe metadane przy pomocy, których możemy opisać dany obiekt. Jeśli zechcemy rozszerzyć informacje na jego temat możemy skorzystać z dodatkowych znaczników, np. w kolejności alfabetycznej:

  • og:audio – adres URL do pliku dźwiękowego, który jest powiązany z obiektem,
  • og:description – krótki opis obiektu (Facebook będzie tego wymagał),
  • og:determiner – ta opcja dotyczy tylko stron w języku angielskim, pozwala dodać przedrostek the, a, an przed tytułem,
  • og:locale – informacja o lokalizacji geograficznej w standardzie język_kraj. en_US jest wartością domyślną, ale nic nie stoi na przeszkodzie, aby zmienić to na pl_PL,
  • og:locale:alternate – inne lokalizacje w jakich obiekt jest dostępny,
  • og:site_name – jeśli obiekt jest częścią większej witryny, to korzystając z tego znacznika możemy podać jej nazwę,
  • og:video – adres URL do pliku video, który jest powiązany z obiektem

Rozszerzmy zatem nasz pierwszy przykład o dodatkowe znaczniki. Możemy pominąć og:determiner, który jak wspomniałem nie ma  specjalnie zastosowania dla stron w języku polskim, jednak w przykładzie go zostawiam:

[..]
<head>
<title>Tytuł mojego artykułu</title>
<meta property="og:type" content="article" />
<meta property="og:title" content="Tytuł mojego artykułu" />
<meta property="og:url" content="http://moja-nazwa.pl/artykul/tytul-mojego-artykulu" />
<meta property="og:determiner" content="The" />
<meta property="og:image" content="http://moja-nazwa.pl/img/obrazek.jpg" />
<meta property="og:audio" content="http://moja-nazwa.pl/audio/plik.mp3" />
<meta property="og:description" content="W tym artykule opisujemy w jaki sposób użyć na stronie znaczników protokołu Open Graph." />
<meta property="og:locale" content="pl_PL" />
<meta property="og:locale:alternate" content="en_GB" />
<meta property="og:site_name" content="Platforma hostingowa o12.pl" />
<meta property="og:video" content="http://moja-nazwa.pl/video/plik.swf" />
[..]
</head>
[..]
</html>

Idąc dalej możemy rozszerzać właściwości o dodatkowe metadane, np:

<meta property="og:image:url" content="http://moja-nazwa.pl/img/obrazek.jpg" />
<meta property="og:image:secure_url" content="https://moja-nazwa.pl/img/obrazek.jpg" />

Pierwszy znacznik czyli og:image:url w zasadzie niczym nie różni się od og:image, natomiast drugi pozwala nam na wskazanie adresu URL dla obrazka na stronie która wykorzystuje połączenie szyfrowane (HTTPS).

Można także podać więcej informacji na temat obrazka, przykładowo: 

  • og:image:type - typ MIME obrazka
  • og:image:height - wysokośc obrazka
  • og:image:width - szerokość obrazka

Tego typu właściwości ustrukturyzowane należy zawsze umieszczać pod znacznikiem głównym, to bardzo ważne:

<meta property="og:image" content="http://moja-nazwa.pl/img/obrazek.jpg" />
<meta property="og:image:height" content="180" />
<meta property="og:image:width" content="250" />

Dlaczego w taki sposób? Ponieważ opisując obiekt (stronę) możemy podać informacje na temat większej ilości obrazków. Jeśli więc nie zachowamy tej zasady wówczas ciężko będzie zewnętrznym systemom analizującym naszą stronę przypisać właściwe dane do właściwych obrazków. Oto przykład jak to powinno wyglądać jeśli mamy w opisie obiektu podane dwa obrazki:

<meta property="og:image" content="http://moja-nazwa.pl/img/obrazek.jpg" />
<meta property="og:image:height" content="180" />
<meta property="og:image:width" content="250" />
<meta property="og:image" content="http://moja-nazwa.pl/img/obrazek2.jpg" />
<meta property="og:image:height" content="350" />
<meta property="og:image:width" content="200" />

Poniżej film instruktażowy na temat tego jak rozpocząć pracę z protokołem Open Graph:

 

Ocena: 43210 (4.33/5), bazuje na 6 głosach.

 

Udostępnij ten artykuł innym:

 

Podobne artykuły

 
comments powered by Disqus

Hosting

Rejestracja domen

Tworzymy strony WWW

Firma

Platforma hostingowa o12.pl . 2003-2020