Strona główna      Publikacje      SEO protokół Open Graph

SEO protokół Open Graph

Rozbudowany sposób połączenia wielu technologii na stronie internetowej, poradnik.

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

Zaawansowany SEO

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

Protokół Open Graph pozwala dowolnej stronie internetowej stać się bogatym obiektem na wykresie społecznym. Na przykład jest używany na Facebooku, aby każda strona internetowa miała taką samą funkcjonalność jak każdy inny obiekt na Facebooku.

Chociaż istnieje wiele różnych technologii i schematów, które można łączyć, nie ma jednej technologii, która zapewnia wystarczającą ilość informacji, aby bogato reprezentować dowolną stronę w protokołach społecznych. Protokół Open Graph opiera się na istniejących technologiach i daje programistom ważną rzecz do wdrożenia. Prostota dla programisty jest kluczowym celem protokołu Open Graph, który zadecydował o wielu technicznych decyzjach projektowych/intenetowych.


1. Podstawowe dane.

Aby zamienić stronę internetową w obiekty protokołu OGP, musisz dodać podstawowe meta dane do strony. Pierwszą wersję protokołu została oparta nana RDF, co oznacza, że umieszczasz dodatkowe znaczniki <meta> w sekcji <head> swojej strony internetowej. Wymagane właściwości dla każdej strony to:

  • og:title - Tytuł obiektu, który powinien pojawić się w protokole OGP, np. "Matrix".
  • og:type - Typ obiektu, np. video.movie, W zależności od określonego typu mogą być również wymagane inne właściwości.
  • og:url - Kanoniczny adres URL obiektu, który będzie używany jako stały identyfikator na wykresie OGP, np. "http://test.com.pl/title/tt0133093/".
  • og:image - Adres URL obrazu, który powinien reprezentować Twój obiekt w protokole OGP, np. "http://test.com.pl/image/tt0133093.jpg".

 

1.1 Przykład wykorzystania protokołu Open Graph do oznaczenia filmu.

<html>
<head>
<title>Matrix (1999)</title>
<meta property="og:title" content="Matrix" />
<meta property="og:type" content="video.movie" />
<meta property="og:url" content="http://test.com.pl/title/matrix/" />
<meta property="og:image" content="http://test.com.pl/image/matrix-1920x1080px.jpg" />
...
</head>
...
</html>

 

1.2 Dodatkowe właściwości są opcjonalne dla dowolnego obiektu i są zalecane:

  • og:audio - Adres URL pliku audio dołączonego do tego obiektu.
  • og:description - Opis obiektu, jedno lub dwa zdania.
  • og:determiner - Opcja dotyczy przedrostka w j. angielskim typu "the", "a", "an" wartość enum. Domyślnie "blank"
  • og:locale - Informacja o lokalizacji w standardzie "język_KRAJ", np. "fr_FR", "pl_PL", "de_DE". Domyślnie "en_US".
  • og:locale:alternate - Inne lokalizacje, w jakich obiekt jest dostępny, format "język_KRAJ".
  • og:site_name - Jeśli obiekt jest większym projektem, należy podać jego nazwę.
  • og:video - Adres URL, jeśli obiekt posiada prezentację w formie wideo.

1.3 Przykład wykorzystania dodatkowych opcji protokołu Open Graph do oznaczenia filmu.

<meta property="og:audio" content="http://test.com.pl/matrix/theme.mp3" />
<meta property="og:description" content="Haker komputerowy uczy się od tajemniczych buntowników o prawdziwej naturze jego rzeczywistości i roli w wojnie przeciwko programom." />
<meta property="og:determiner" content="The" />
<meta property="og:locale" content="en_GB" />
<meta property="og:locale:alternate" content="fr_FR" />
<meta property="og:locale:alternate" content="pl_PL" />
<meta property="og:site_name" content="IMDb" />
<meta property="og:video" content="http://test.com.pl/matrix/trailer.swf" />

 

2. Właściwości strukturalne.

Niektóre właściwości mogą zawierać dodatkowe meta dane. Są one określone w taki sam sposób, jak inne meta dane z właściwością i treścią, ale właściwość będzie miała dodatkowe opcje

og:image - posiada dodatkowe właściwości

  • og:image:url - Identyczny jak og:image - podstawowe dane.
  • og:image:secure_url - Adres URL obrazu, który powinien reprezentować Twój obiekt na wykresie OGP, wersja szyfrowana SSL/HTTPS.
  • og:image:type - Oznacza typ zdjęcia, według standardu MIME type dla zdjęcia.
  • og:image:width - Szerokość zdjęcia w pikselach, bez przedrostka typu "px".
  • og:image:height - Wysokość zdjęcia w pikselach, bez przedrostka typu "px".
  • og:image:alt - Opis tego, co jest na obrazie (nie podpis).

2.1 Przykład wykorzystania dodatkowych właściwości og:image protokołu Open Graph do oznaczenia zdjęcia.

<meta property="og:image" content="http://test.com.pl/image/matrix-1920x1080px.jpeg" />
<meta property="og:image:secure_url" content="https://test.com.pl/image/matrix-1920x1080px.jpeg" />
<meta property="og:image:type" content="image/jpeg" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image:alt" content="Zdjęcia przedstawia głównego bohatera filmu Matrix, którego zagrał Keanu Reeves." />

2.2 Przykład wykorzystania og:video protokołu Open Graph, do oznaczenia filmów.

og:video - Właściwościwości są bardzo podobne jak w przypadku og:image.

<meta property="og:video" content="http://test.com.pl/trailer-full-hd.webm" />
<meta property="og:video:secure_url" content="https://test.com.pl/trailer-full-hd.webm" />
<meta property="og:video:type" content="video/webm" />
<meta property="og:video:width" content="1920" />
<meta property="og:video:height" content="1080" />

2.3 Przykład wykorzystania og:audio protokołu Open Graph, do oznaczenia audio.

og:audio - Właściwości wymagane są tylko trzy właściwości.

<meta property="og:audio" content="http://test.com.pl/sound.aac" />
<meta property="og:audio:secure_url" content="https://test.com.pl/sound.aac" />
<meta property="og:audio:type" content="audio/aac" />

 

3. Tablice.

Jeśli właściwość może mieć wiele wartości, po prostu umieść wiele wersji tego samego znacznika <meta> na swojej stronie w formie tablicy. Pierwsza etykieta (od góry do dołu) ma pierwszeństwo podczas konfliktów.

<meta property="og:image" content="http://test.com.pl/matrix.jpeg" />
<meta property="og:image" content="http://test.com.pl/matrix-trailer.jpeg" />

Umieść właściwości strukturalne po zadeklarowaniu głównej właściwości. Ilekroć analizowany jest inny element główny, ta własność strukturalna jest uważana za zrobioną, a inna jest uruchamiana.

3.1 Przykład wykorzystania og:image protokołu Open Graph, dla tablicy z priorytetm (od góry do dołu) oraz różnymi rozmiarami zdjęć (Full HD 1080p, HD Ready 720p, A4).

<meta property="og:image" content="http://test.com.pl/matrix.jpeg" />
<meta property="og:image:width" content="1920" />
<meta property="og:image:height" content="1080" />
<meta property="og:image" content="http://example.com/matrix-trailer.jpeg" />
<meta property="og:image:width" content="1280" />
<meta property="og:image:height" content="720" />
<meta property="og:image" content="http://test.com.pl/matrix-poster.jpeg" />
<meta property="og:image:width" content="3580" />
<meta property="og:image:height" content="2480" />

 

4. Typy obiektów.

Aby obiekt był reprezentowany w protokole, musisz określić jego typ. Odbywa się to za pomocą właściwości globalnej og: type.

Typy globalne są istotne dla dalszych właściwości protokołu. Zalecane jest użycie og:type na samym początku porotokołu OpenGraph.

Przykład obiektu oznaczonego jako strona internetowa

<meta property="og:type" content="website" />

4.1 Inne typy właściwości globalnej og:type:

  • music.song

music:duration - integer >=1 - Długość audio w sek.
music:album - music.album array - Album, z którego pochodzi utwór.
music:album:disc - integer >=1 - Z której płyty pochodzi utwór audio.
music:album:track - integer >=1 - Który to utwór audio.
music:musician - profile array - Autor, który stworzył utwór.

  • music.album

music:song - music.song - Utwór w tym albumie
music:song:disc - integer >=1 - Identycznie jak music:album:disc, lecz w odwrotnej kolejności.
music:song:track - integer >=1 - Identycznie jak music:album:track, lecz w odwrotnej kolejności.
music:musician - profile - Autor, który stworzył utwór.
music:release_date - datetime - Data wydania albumu.

  • music.playlist

music:song - Identycznie jak music.album.
music:song:disc
music:song:track
music:creator - profile - Generator playlisty.

  • music.radio_station

music:creator - profile - Generator stacji radiowej.


  • video.movie

video:actor - profile array - Aktorzy, któzy zagrali w filmie.
video:actor:role - string - Rola aktora.
video:director - profile array - Dyrektor produkcji filmowej.
video:writer - profile array - Reżyserzy produkcji filmowej.
video:duration - integer >=1 - Długość filmu w sekundach.
video:release_date - datetime - Data premiery filmu.
video:tag - string array - Tagi powiązane z filmem.

  • video.episode

video:actor - Identycznie jak video.movie.
video:actor:role
video:director
video:writer
video:duration
video:release_date
video:tag
video:series - video.tv_show - Do której serii należy ten odcinek.

  • video.tv_show

Wielokrotne programy typu TV show. Identycznie jak video.movie.

  • video.other

Film, który nie należy do żadnej innej kategorii. Identycznie jak video.movie


  • article

article:published_time - datetime - Kiedy artykuł został opublikowany po raz pierwszy.
article:modified_time - datetime - Kiedy artykuł został ostatnio zmieniony.
article:expiration_time - datetime - Data wygaśnięcia artykułu.
article:author - profile array - Redaktorzy artykułu.
article:section - string - Nazwa sekcji wysokiego poziomu np. Tachnologia.
article:tag - string array - Oznacz słowa powiązane z tym artykułem.


  • book

book:author - profile array - Kto napisał tę książkę.
book:isbn - string - ISBN
book:release_date - datetime - Data wydania książki.
book:tag - string array - Oznacz słowa powiązane z tą książką.


  • profile

profile:first_name - string - Imię.
profile:last_name - string - Nazwisko.
profile:username - string - Pseudonim.
profile:gender - enum (male, female) - Płeć.


5. Typy danych.

Aby obiekt był reprezentowany w protokole, musisz określić jego typ. Odbywa się to za pomocą właściwości globalnej og: type.

  • Boolean

    • Logiczny typ danych typu: true, false, 1, 0

  • DateTime

    • Format ('d M y H:i:s'): ISO 8601

  • Enum

    • Format składający się z ograniczonego zestawu stałych wartości ciągu (elementów wyliczeniowych).

  • Float

    • Typ liczb rzeczywistych, czyli zmiennopozycyjnych typu: 1.234, -1.234, 1.2e3, -1.2e3, 7E-10.

  • Integer

    • 32-bitowa liczba całkowita ze znakiem. W wielu językach liczby całkowite powyżej 32 bitów stają się zmiennymi, dlatego ograniczono protokół Open Graph, aby ułatwić korzystanie z wielu języków programowania. Przykład 1234, -123.

  • String

    • Sekwencja znaków Unicode.

  • URL

    • Sekwencja znaków Unicode informujących o adresie strony internetowej.

Przejdź OGP

developers.facebook.com/docs/reference/opengraph/

Więcej informacji o meta tagach

MIME_types

MIME_types

developers.facebook.com/docs/

opengraphcheck.com

developers.facebook.com/tools/debug/og/object

   Strona główna      Publikacje      SEO protokół Open Graph