Odkrywanie w mediach społecznościowych

Możesz wpłynąć na sposób wyświetlania swojej witryny w mediach społecznościowych, dodając kilka wierszy kodu do każdej strony. Dzięki temu możesz przyciągnąć więcej osób do swojej witryny, wyświetlając podglądy z większą ilością informacji, które byłyby dostępne w innym przypadku.

Możesz wpłynąć na sposób wyświetlania swojej witryny w mediach społecznościowych, dodając kilka wierszy kodu do każdej strony. Dzięki temu możesz przyciągnąć do witryny więcej osób, ponieważ uzyskasz podgląd z bogatszymi informacjami.

Podsumowanie

  • Użyj mikrodanych schema.org, aby podać tytuł, opis i obraz do wykorzystania w Google+.
  • Używaj protokołu Open Graph Protocol (OGP), aby podać tytuł i opis strony oraz grafikę na potrzeby Facebooka.
  • Za pomocą kart Twittera podaj tytuł strony, opis, obraz oraz identyfikator Twittera do Twittera.

Możesz wpłynąć na sposób wyświetlania swojej witryny w mediach społecznościowych, dodając kilka wierszy kodu do każdej strony. Dzięki temu możesz zwiększyć zaangażowanie dzięki podglądowi z bogatszymi informacjami. Bez niego witryny społecznościowe będą udostępniać tylko podstawowe informacje, bez obrazów ani innych pomocnych informacji.

Które z nich ma Twoim zdaniem większą szansę na kliknięcie? Użytkownicy zwracają uwagę na obrazy i mają pewność, że będą im odpowiadać, gdy mają już podgląd.

Właściwe znaczniki to właściwy tytuł, krótki opis i zdjęcie. Dodanie tych elementów może pomóc zwiększyć zaangażowanie.
Z odpowiednimi znacznikami: prawidłowy tytuł, krótki opis i obraz. Dodanie tych elementów może pomóc zwiększyć zaangażowanie.
Bez odpowiedniego znacznika widoczny jest tylko tytuł strony.
Bez odpowiedniego znacznika widoczny jest tylko tytuł strony.

Gdy ktoś w sieci społecznościowej zechce udostępnić Twoją stronę znajomym, zapewne doda informację o jej atrakcyjności i ją poinformuje. Jednak opisanie witryny bywa uciążliwe i może przegapić cel z 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ć proces udostępniania przez podanie tytułu, opisu i atrakcyjnego obrazu. Dzięki temu nie muszą poświęcać cennego czasu (ani znaków) na opis linku.

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

Roboty analizują stronę i interpretują jej zawartość na wiele sposobów. Wykorzystując mikrodane i słownictwo schema.org, ułatwiasz wyszukiwarkom i serwisom społecznościowym 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 umieszczona w nagłówku strony internetowej, ale mikrodane funkcjonują tylko wtedy, gdy są określony kontekst.

Dodaj itemscope, aby określić zakres mikrodanych

Dodając dyrektywę itemscope, możesz określić tag jako blok treści dotyczący określonego elementu.

Dodaj itemtype, aby określić typ witryny

Możesz podać typ produktu, używając atrybutu itemtype razem z atrybutem itemscope. Wartość itemtype zależy od typu treści Twojej strony internetowej. Trafną znajdziesz na tej stronie.

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

itemprop definiuje właściwości elementu itemtype w zakresie. Do dodawania metadanych do witryn społecznościowych typowe wartości itemprop to name, description i image.

Weryfikowanie fragmentów rozszerzonych

Aby sprawdzić fragmenty rozszerzone w Google+, możesz użyć takich narzędzi jak:

Narzędzie do testowania danych strukturalnych

Korzystanie z protokołu Open Graph (OGP) do udostępniania fragmentów rozszerzonych na Facebooku

Protokół Open Graph zapewnia Facebookowi metadane niezbędne do działania stron internetowych, które mają te same funkcje 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">

Metadane zawarte w sekcji <head> zawierają informacje o fragmentach rozszerzonych podczas udostępniania strony.

Do opisywania metadanych używaj tagów meta z przestrzeni nazw og:

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

Właściwość treści
og:title Tytuł strony internetowej.
og:description Opis strony internetowej.
og:url Kanoniczny adres URL strony internetowej.
og:image Adres URL obrazu załączonego do udostępnionego posta.
og:type Ciąg określający typ strony internetowej. Tutaj znajdziesz odpowiedniki dla swojej strony internetowej.

Te metatagi przekazują informacje semantyczne robotom z witryn społecznościowych, np. Facebooka.

Więcej informacji

Aby dowiedzieć się więcej o treściach, które możesz dołączać do postów na Facebooku, odwiedź oficjalną stronę protokołu Open Graph.

Weryfikowanie fragmentów rozszerzonych

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

Używaj kart Twittera, aby udostępniać fragmenty rozszerzone na Twitterze

Karty na Twitterze to rozszerzenie protokołu Open Wykres Protocol dla Twittera. Umożliwiają one dodawanie do tweetów załączników multimedialnych, np. obrazów i filmów, z linkiem do swojej strony internetowej. Gdy dodasz odpowiednie metadane, do tweetów z linkami do Twojej strony zostanie dodana karta zawierająca dodane przez Ciebie szczegółowe informacje.

Do opisywania metadanych używaj metatagów z przestrzeni nazw twitter:

Aby Twitter Card działał, Twoja domena musi być zatwierdzona i zawierać metatag, który zamiast atrybutu property ma wartość twitter:card jako atrybut name.

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">

Dzięki temu, że identyfikator Twittera jest przypisany do wartości twitter:site, ta informacja jest osadzona w udostępnionym poście, co ułatwia użytkownikom kontaktowanie się z właścicielem strony.

Karta na Twitterze

Więcej informacji

Aby dowiedzieć się więcej o Twitter Cards, odwiedź:

Weryfikowanie fragmentów rozszerzonych

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

Sprawdzona metoda

Biorąc pod uwagę wszystkie 3 opcje, najlepsze, co możesz zrobić, to umieścić je 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 znaczniki:

  • Lokalizacja itemscope znajduje się w lokalizacji head tagu
  • Mikrodane i OGP mają wspólne wartości title i description
  • itemprop="image" używa tagu link z atrybutem href zamiast ponownego użycia tagu meta z elementem property="og:image"

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