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.
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 – Narzędzia dla webmasterów
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.
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 lokalizacjihead
tagu - Mikrodane i OGP mają wspólne wartości
title
idescription
itemprop="image"
używa tagulink
z atrybutemhref
zamiast ponownego użycia tagumeta
z elementemproperty="og:image"
Na koniec sprawdź, czy Twoja strona wyświetla się w każdej witrynie społecznościowej zgodnie z oczekiwaniami.