Odkrywanie w mediach społecznościowych

Możesz wpłynąć na sposób wyświetlania witryny udostępnianej w mediach społecznościowych, dodając kilka wierszy kodu do każdej strony. Może to pomóc przyciągnąć więcej osób do Twojej witryny, ponieważ podglądy będą zawierać więcej informacji niż w innym przypadku.

Eiji Kitamura

Możesz wpłynąć na sposób wyświetlania witryny udostępnianej w mediach społecznościowych, dodając kilka wierszy kodu na każdej stronie. Może to pomóc przyciągnąć więcej osób do Twojej witryny, ponieważ podglądy zawierają więcej informacji niż te, które byłyby dostępne w inny sposób.

Podsumowanie

• Użyj mikrodanych schema.org, aby podać tytuł strony, opis i obraz dla Google+.
• Użyj protokołu Open Graph (OGP), aby podać tytuł strony, opis i obraz na Facebooku.
• Użyj kart Twittera, aby podać tytuł strony, opis, obraz i identyfikator Twittera.

Możesz wpłynąć na sposób wyświetlania witryny udostępnianej w mediach społecznościowych, dodając kilka wierszy kodu na każdej stronie. Może to pomóc w zwiększeniu zaangażowania, ponieważ podglądy zawierają więcej informacji, niż byłoby to możliwe w inny sposób. Bez niego serwisy społecznościowe będą udostępniać tylko podstawowe informacje, bez obrazów i innych przydatnych danych.

Która z nich ma Twoim zdaniem większe szanse na kliknięcie? Obrazy przyciągają uwagę użytkowników, którzy dzięki podglądowi mają większą pewność, że znajdą to, czego szukają.

Z odpowiednimi znacznikami: uwzględniono prawidłowy tytuł, krótki opis i obraz. Dodanie tych elementów może zwiększyć zaangażowanie.

Bez odpowiednich znaczników uwzględniany jest tylko tytuł strony.

Gdy ktoś w sieci społecznościowej chce udostępnić Twoją witrynę znajomym, prawdopodobnie doda kilka słów o tym, jak bardzo mu się podoba, i udostępni ją. Opisywanie witryny bywa jednak uciążliwe i może nie odzwierciedlać punktu widzenia właściciela strony. Niektóre usługi ograniczają liczbę znaków, które użytkownicy mogą wpisać w notatce.

Dodając do stron odpowiednie metadane, możesz uprościć użytkownikom proces udostępniania, podając tytuł, opis i atrakcyjny obraz. Dzięki temu nie muszą marnować cennego czasu (ani znaków) na opisywanie linku.

Używanie schema.org i mikrodanych do wyświetlania opisów rozszerzonych w Google+

Roboty używają wielu metod do analizowania strony i zrozumienia jej zawartości. Używając mikrodanych i słownictwa schema.org, ułatwiasz serwisom społecznościowym i wyszukiwarkom zrozumienie zawartości strony.

Oto przykład:

<div itemscope itemtype="http://schema.org/Article">
  <h1 itemprop="name">Enjoy fireworks</h1>
  <p itemprop="description">Fireworks are beautiful.
   This article explains how beautiful fireworks are.</p>
  <img itemprop="image" src="//developers.google.com/web/imgs/fireworks.jpg" />
</div>

Większość metadanych jest umieszczana w sekcji nagłówka strony internetowej, ale mikrodane znajdują się tam, gdzie występuje kontekst.

Dodaj itemscope, aby określić zakres mikrodanych

Dodając itemscope, możesz określić tag jako blok treści dotyczących konkretnego elementu.

Dodaj itemtype, aby określić typ witryny

Typ produktu możesz określić za pomocą atrybutu itemtype i itemscope. Wartość itemtype można określić na podstawie typu treści na stronie internetowej. Odpowiedni formularz znajdziesz na tej stronie.

Dodaj itemprop, aby opisać każdy element za pomocą słownictwa schema.org

itemprop definiuje właściwości dla itemtype w zakresie. W przypadku dostarczania metadanych do serwisów społecznościowych typowe wartości itemprop to name, description i image.

Sprawdzanie poprawności fragmentów rozszerzonych

Aby sprawdzić poprawność fragmentów rozszerzonych w Google+, możesz użyć narzędzi takich jak:

• Narzędzie do testowania uporządkowanych danych – Search Console

Używanie protokołu Open Graph (OGP) do udostępniania fragmentów rozszerzonych na Facebooku

Protokół Open Graph (OGP) dostarcza Facebookowi metadane niezbędne do tego, aby strony internetowe miały takie same funkcje jak inne obiekty na Facebooku.

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">

Jeśli te metadane zostaną umieszczone w sekcji nagłówka strony, będą dostarczać informacji o fragmencie rozszerzonym, gdy strona zostanie udostępniona.

Używaj tagów meta z przestrzeni nazw og: do opisywania metadanych

Tag meta składa się z atrybutów property i content. Właściwości i treści mogą mieć te wartości:

Właściwość	Treść
og:title	Tytuł strony internetowej.
og:description	Opis strony internetowej.
og:url	Kanoniczny URL strony internetowej.
og:image	Adres URL obrazu załączonego do udostępnionego posta.
og:type	Ciąg znaków wskazujący typ strony internetowej. Tutaj znajdziesz odpowiedni dla swojej strony internetowej.

Te metatagi dostarczają robotom z witryn społecznościowych, takich jak Facebook, informacji semantycznych.

Więcej informacji

Więcej informacji o tym, co możesz dołączyć do posta na Facebooku, znajdziesz na oficjalnej stronie protokołu Open Graph.

• ogp.me

Sprawdzanie poprawności fragmentów rozszerzonych

Aby sprawdzić poprawność znaczników na Facebooku, możesz użyć narzędzi takich jak:

• Debuger

Używanie kart Twittera do udostępniania fragmentów rozszerzonych na Twitterze

Karty Twittera to rozszerzenie protokołu Open Graph, które można stosować na Twitterze. Umożliwiają dodawanie do tweetów załączników multimedialnych, takich jak obrazy i filmy, z linkiem do strony internetowej. Po dodaniu odpowiednich metadanych tweety z linkami do Twojej strony będą zawierać kartę ze szczegółowymi informacjami, które zostały przez Ciebie dodane.

Używanie metatagów z przestrzenią nazw twitter: do opisywania metadanych

Aby karta Twittera działała, Twoja domena musi zostać zatwierdzona i musi zawierać metatag z atrybutem name o wartości twitter:card zamiast atrybutu property.

Krótki przykład:

<html prefix="og: http://ogp.me/ns#">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
    <meta property="og:title" content="Enjoy Fireworks">
    <meta property="og:description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites.html">
    <meta property="og:type" content="website">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:site" content="agektmr">

Przypisując identyfikator Twittera do wartości twitter:site, Twitter umieszcza te informacje w udostępnionym poście, aby użytkownicy mogli łatwo nawiązać kontakt z właścicielem strony.

Więcej informacji

Więcej informacji o kartach Twittera znajdziesz na stronie:

• Witryna dla deweloperów Twittera

Sprawdzanie poprawności fragmentów rozszerzonych

Aby sprawdzić poprawność znaczników, Twitter udostępnia:

• Walidator kart

Sprawdzona metoda

Biorąc pod uwagę wszystkie 3 opcje, najlepiej jest uwzględnić je wszystkie na stronie internetowej. Oto przykład:

<!-- namespace declaration -->
<html prefix="og: http://ogp.me/ns#">
  <!-- define microdata scope and type -->
  <head itemscope itemtype="http://schema.org/Article">
    <title>Social Site Example</title>
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:title" itemprop="name" content="Enjoy Fireworks">
    <!-- define ogp image -->
    <meta property="og:image"
          content="https://developers.google.com/web/imgs/fireworks.jpg">
    <!-- use link[href] to define image url for microdata -->
    <link itemprop="image" href="//developers.google.com/web/imgs/fireworks.jpg">
    <!-- define ogp and itemprop of microdata in one line -->
    <meta property="og:url"
          content="https://example.com/discovery-and-distribution/optimizations-for-crawlers/social-sites2.html">
    <!-- define ogp type -->
    <meta property="og:type" content="website">
    <!-- define twitter cards type -->
    <meta name="twitter:card" content="summary_large_image">
    <!-- define site's owner twitter id -->
    <meta name="twitter:site" content="agektmr">
    <!-- define description for ogp and itemprop of microdata in one line -->
    <meta property="og:description" itemprop="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <!-- general description (separate with ogp and microdata) -->
    <meta name="description"
          content="Fireworks are beautiful. This article explains how beautiful fireworks are.">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
    <link rel="stylesheet" href="https://code.getmdl.io/1.2.1/material.indigo-pink.min.css">
    <script defer src="https://code.getmdl.io/1.2.1/material.min.js"></script>
    <style>
      body {
        margin: 2em;
      }
    </style>
  </head>

Zwróć uwagę, że mikrodane i OGP mają wspólne znaczniki:

• itemscope znajduje się w tagu head
• title i description są udostępniane między mikrodanymi a OGP
• itemprop="image" używa tagu link z atrybutem href zamiast ponownie używać tagu meta z atrybutem property="og:image"

Na koniec przed opublikowaniem strony internetowej sprawdź, czy wyświetla się ona prawidłowo w każdej sieci społecznościowej.