Odkrywanie w mediach społecznościowych

Możesz wpływać na sposób wyświetlania witryny udostępnianej w mediach społecznościowych, dodając do każdej strony kilka linii kodu. Dzięki temu możesz zachęcić więcej osób do odwiedzenia Twojej witryny, wyświetlając im bardziej szczegółowe informacje.

Eiji Kitamura

Możesz wpłynąć na sposób wyświetlania swojej witryny udostępnianej w mediach społecznościowych. Aby to zrobić, dodaj kilka wierszy kodu do każdej strony. Dzięki temu możesz zachęcić więcej osób do odwiedzenia Twojej witryny, wyświetlając im bardziej szczegółowe informacje.

Podsumowanie

  • Użyj mikrodanych schema.org, aby podać tytuł strony, jej opis i obraz na potrzeby Google+.
  • Używaj protokołu Open Graph (OGP) do podawania tytułu strony, opisu i obrazu na potrzeby Facebooka.
  • Używaj kart Twittera, aby podać tytuł strony, opis, obraz i identyfikator Twittera.

Możesz wpływać na sposób wyświetlania witryny udostępnianej w mediach społecznościowych, dodając do każdej strony kilka linii kodu. Może to pomóc zwiększyć zaangażowanie, wyświetlając podglądy zawierające więcej informacji niż te, które byłyby dostępne. W przeciwnym razie witryny społecznościowe będą udostępniać tylko podstawowe informacje, bez obrazów ani innych przydatnych informacji.

Która z nich Twoim zdaniem jest bardziej klikalna? Ludzie zwracają uwagę na obrazy i mają większą pewność, że spodoba im się to, co znajdą, gdy wyświetli się wstępny podgląd.

z odpowiednim znacznikiem: zawiera poprawny tytuł, krótki opis i obraz. Dodanie tych elementów może zwiększyć zaangażowanie.
Użycie odpowiednich znaczników: podany jest właściwy tytuł, krótki opis i obraz. Dodanie tych elementów może zwiększyć zaangażowanie.
Bez odpowiedniego znacznika uwzględniany jest tylko tytuł strony.
Bez odpowiedniego znacznika uwzględniany jest tylko tytuł strony.

Gdy ktoś w sieci społecznościowej chce udostępnić Twoją witrynę znajomym, doda prawdopodobnie kilka słów wyjaśniających, dlaczego jest ona świetna, i udostępni ją. Opisywanie witryny może być jednak uciążliwe i nie oddawać w pełni intencji właściciela strony. Niektóre usługi ograniczają liczbę znaków, które użytkownicy mogą umieścić w notatce.

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

Używaj mikrodanych schema.org i mikrodanych, aby udostępniać fragmenty rozszerzone w Google+

Roboty używają wielu metod do analizowania stron i rozpoznawania ich zawartości. Korzystając z mikrodanych i słownika schema.org, pomagasz witrynom społecznościowym i wyszukiwarkom lepiej zrozumieć zawartość 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>

Chociaż większość metadanych jest umieszczana w sekcji head strony internetowej, mikrodane znajdują się tam, gdzie występuje kontekst.

Dodaj atrybut itemscope, aby zdefiniować zakres mikrodanych

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

Dodaj itemtype, aby określić typ witryny

Typ produktu możesz określić za pomocą atrybutu itemtype i atrybutu itemscope. Wartość itemtype może być określana na podstawie typu treści na stronie internetowej. Na tej stronie znajdziesz odpowiednią.

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

itemprop definiuje właściwości itemtype w ramach zakresu. W przypadku metadanych witryn społecznościowych typowe wartości itemprop to name, description i image.

Weryfikowanie opisów rozszerzonych

Do weryfikacji fragmentów rozszerzonych w Google+ możesz użyć następujących narzędzi:

Narzędzie do testowania danych strukturalnych

Używanie protokołu Open Graph (OGP) do wyświetlania fragmentów rozszerzonych na Facebooku

Protokół Open Graph (OGP) udostępnia Facebookowi metadane, które umożliwiają stronom internetowym korzystanie z tych samych funkcji co inne obiekty Facebooka.

<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 znajdą się w sekcji <head> strony, po jej udostępnieniu będą zawierać informacje rozszerzone.

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

Tag meta składa się z atrybutu property i atrybutu content. Właściwości i zawartość mogą przyjmować 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. Przewodnik, który pasuje do Twojej strony internetowej, znajdziesz tutaj.

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

Więcej informacji

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

Weryfikowanie opisów rozszerzonych

Aby zweryfikować znaczniki na Facebooku, możesz użyć takich narzędzi jak:

Używanie kart Twittera do wyświetlania fragmentów rozszerzonych na Twitterze

Karty Twittera to rozszerzenie protokołu Open Graph stosowanego na Twitterze. Umożliwiają one dodawanie do tweetów załączników multimedialnych, takich jak obrazy i filmy, z linkiem do Twojej strony internetowej. Dodając odpowiednie metadane, możesz dodać do tweetów zawierających linki do Twojej strony kartę z dodatkowymi informacjami.

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

Aby karta Twittera działała prawidłowo, Twoja domena musi być zatwierdzona i musi zawierać tag meta, który ma atrybut twitter:card jako atrybut name 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">

Przypisanie identyfikatora Twittera do wartości twitter:site powoduje umieszczenie tych informacji w udostępnionym poście, aby użytkownicy mogli łatwo nawiązać kontakt z właścicielem strony.

Karta Twittera

Więcej informacji

Aby dowiedzieć się więcej o kartach Twittera, wejdź na:

Weryfikowanie opisów rozszerzonych

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

Sprawdzona metoda

Spośród tych 3 opcji najlepiej jest umieścić 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ą pewne wspólne znaczniki:

  • itemscope znajduje się w tagu head
  • Dane title i description są wspólne dla mikrodanych i OGP
  • Tag itemprop="image" używa tagu link z atrybutem href zamiast używać ponownie tagu meta z atrybutem property="og:image"

Na koniec sprawdź, czy Twoja strona internetowa wyświetla się zgodnie z oczekiwaniami w każdej witrynie społecznościowej, zanim ją opublikujesz.