Strony internetowe z danymi strukturalnymi – przykłady

Strony internetowe z danymi strukturalnymi sprawią, że wyszukiwarka zrozumie ich sens oraz treść. Zobacz przykładowe wdrożenia na stronach z całego świata.

Prawdopodobnie słyszałeś już o tym, że wykorzystanie danych strukturalnych pomoże wyszukiwarce zrozumieć, o czym jest dana witryna.

Ponadto strony internetowe z danymi strukturalnymi mogą i powinny być wyżej w rankingu.

Jednakże czasami jest bardzo ciężko określić, które schematy danych strukturalnych użyć na swojej stronie internetowej.

Co tu dużo mówić, takich schematów jest mnóstwo i określenie, które są prawidłowe, może być szczególnie trudne.

Wobec tego wielu zada sobie pytanie – czy warto?

Oczywiście, że tak.

Zaprojektowanie strony internetowej z danymi strukturalnymi jest warte wysiłku, ponieważ są one coraz ważniejszym czynnikiem pozycjonującym dla Google.

Wpis przedstawia kilka przykładowych wdrożeń danych strukturalnych na różnych stronach internetowych. Niektóre z nich są uniwersalne i można je używać we wszystkich witrynach.

Uniwersalne dane strukturalne

Wszystkie podane schematy z danymi strukturalnymi w tej kategorii mogą być stosowane we wszystkich rodzajach witryn. Nie są specyficzne dla żadnej branży.

Schemat danych strukturalnych dla organizacji

Dane strukturalne dla organizacji wspierają pozycję oraz siłę marki. Dzięki grafowi wiedzy strona internetowa jest bardziej uwidoczniona w wyszukiwarce, co bezpośrednio wpływa na organiczne wejścia.

Pamiętaj, aby zdefiniować swoje logo, profile społecznościowe oraz informacje kontaktowe.

Graf wiedzy dla Apple - znaczniki w danych strukturalnych

{
"@context" : "http://schema.org",
"@type" : "Organization",
"legalName" : "Apple Inc",
"url" : "http://www.apple.com/",
"contactPoint" : [{
"@type" : "ContactPoint",
"telephone" : "+33-626-320-2319",
"contactType" : "customer service"
}]
"logo" : "http://www.apple.com/apple_Logo.png",
"sameAs" : [ "http://www.facebook.com/apple",
"http://www.twitter.com/apple",
"http://plus.google.com/+apple",
"https://www.youtube.com/user/apple",
"http://www.linkedin.com/company/apple",
"https://www.wikidata.org/wiki/apple"]
}

Więcej informacji znajdziesz w przewodniku Google.

Znacznik WebSite w danych strukturalnych

Schemat znacznika WebSite pomaga generować wyszukiwarkę linków witryny dla Google oraz nazwę marki. Oczywiście na stronie bezpośrednio musi znajdować się wyszukiwarka, aby znacznik WebSite mógł działać jako „search box”.

Znacznik WebSite - wyszukiwanie

<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "WebSite",
"name" : "Youtube",
"url" : "http://youtube.com/",
"potentialAction" : {
"@type" : "SearchAction",
"target" : "http://youtube.com/?s={search_term}",
"query-input" : "required name=search_term"
}
}
</script>

Więcej szczegółów można znaleźć w bazie wiedzy Google:

Schemat znacznika okruszków danych strukturalnych

Schemat okruszków pozwala na szczegółowe oznaczenie miejsca linku w strukturze całej strony internetowej.

Wymagania – implementacja okruszków we własnej witrynie.

Okruszki w danych strukturalnych

<ol itemscope itemtype="http://schema.org/BreadcrumbList">
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/">
<span itemprop="name">Home </span> </a>
<meta itemprop="position" content="1" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/activewear/">
<span itemprop="name">Activewear </span> </a>
<meta itemprop="position" content="2" />
</li>
<li itemprop="itemListElement" itemscope
itemtype="http://schema.org/ListItem">
<a itemprop="item" href="https://example.com/activewear/tops/">
<span itemprop="name">Tops </span> </a>
<meta itemprop="position" content="3" />
</li>
</ol>

Więcej informacji można znaleźć w bazie wiedzy Google: okruszki.

Znacznik nawigacji w danych strukturalnych

Ten znacznik może zwiększyć zrozumienie struktury oraz nawigacji Twojej strony przez wyszukiwarkę internetową. Z powodzeniem jest wykorzystywany, aby zwiększyć ilość organicznych odwiedzin.

Znacznik nawigacji w danych strukturalnych

<ul itemscope itemtype="http://www.schema.org/SiteNavigationElement">
<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-advantage">Our Advantage</a></li>
<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/our-travel-experts">Travel Experts</a></li>
<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/destinations">Destinations</a></li>
<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/cruises">Cruises</a></li>
<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/interests">Interests</a></li>
<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/explore-your-world/interests/hotels-and-resorts">Hotels</a></li>
<li itemprop="name"><a itemprop="url" href="http://www.travelstore.com/travel-guides">Travel Resources</a></li>
</ul>

Po więcej informacji warto się wybrać do strony internetowej schema.org – znaczniki nawigacji.

Znaczniki schematu wideo w danych strukturalnych

Są one bardzo przydatne dla stron internetowych, które umieszczają wiele filmów. Oczywiście Google promuje najpierw wyniki z YouTube, ale w przypadku, gdy wyszukiwarka nic nie znajdzie, to wtedy mogą pojawić się właśnie Twoje filmy.

Znacznik wideo w danych strukturalnych

Wymagania:

  • nazwa filmu
  • opis filmu
  • adres url miniaturki
  • data dodania

<div itemscope itemtype="http://schema.org/VideoObject">
<link itemprop="url" href="http://www.ted.com/talks/boaz_almog_levitates_a_superconductor">
<meta itemprop="name" content="The levitating superconductor" />
<meta itemprop="description" content="How can a super-thin 3-inch disk levitate something 70,000 times its own weight? In a riveting demonstration, Boaz Almog shows how a phenomenon known as quantum locking allows a superconductor disk to float over a magnetic rail — completely frictionlessly and with zero energy loss. Experiment: Prof. Guy Deutscher, Mishael Azoulay, Boaz Almog, of the High Tc Superconductivity Group, School of Physics and Astronomy, Tel Aviv University." />
<meta itemprop="uploadDate" content="2015-02-05T08:00:00+08:00" />
<meta itemprop="duration" content="PT10M25S">
<img itemprop="thumbnailUrl" src="https://tedcdnpi-a.akamaihd.net/r/tedcdnpe-a.akamaihd.net/images/ted/b9693798223a4101be834398af15df5560d3f25c_1600x1200.jpg?quality=95&w=480" />
</div>

Znaczniki schematu aplikacji w danych strukturalnych

Jeżeli wykorzystasz ten znacznik, to będziesz miał możliwość zaprezentowania w zgrabny sposób swojej aplikacji w wyszukiwarce Google.

Znacznik aplikacji w danych strukturalnych

Wymagania (głównie tylko nazwa):

  • nazwa aplikacji
  • system operacyjny
  • kategoria aplikacji
  • oceny, czyli tzw. rating system

<div itemscope itemtype="http://schema.org/MobileApplication">
<meta itemprop="url" content="https://play.google.com/store/apps/details?id=com.zeptolab.ctr.ads&hl=pl">
<h1 itemprop="name">Cut the Rope </h1>
Updated: <span itemprop="datePublished">September 3, 2014</span>
Size: <span itemprop="fileSize">1.9M</span>
Requires <span itemprop="operatingSystem">Android 2.3 and up</span>
Category: <span itemprop="applicationCategory">Game</span>
Rating:
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<span itemprop="ratingValue">4.0</span> (
<span itemprop="ratingCount">1</span> rating )
</div>
<div itemprop="offers" itemscope itemtype="http://schema.org/Offer"><meta content="0" itemprop="price"></div>
</div>

Dane strukturalne w e-commerce

Schematy znaczników produktu i oferty

Używanie tych znaczników pomaga we wstępnej ocenie produktu. Mogą być to oceny, informacje czy po prostu ceny.

Muszę tutaj zauważyć, że znacznik oferty jest wymagany, aby cena produktu mogła pojawić się w wyszukiwarce internetowej.

Znacznik oferty oraz produktu

Wymagania:

  • nazwa produktu
  • w ofercie – cena

<div itemscope itemtype="http://schema.org/Product">
<h1 itemprop="name">Back to the Future 1:1 Scale Hoverboard</h1>
<span itemprop="description">Time traveling to 2015 and back is only the beginning of the adventures found in Back to the Future Part II. The coolest part…was finding the hoverboard! And now the future is finally here and you can have a hoverboard of your own! This replica prop is an exact recreation from the one seen in Back to the Future II. Sure, it doesn't truly hover (come on scientists!) but carrying it around will let everyone know that you've just come back... from the future! Just don't try to use it on water! <i>Back to the Future is a trademark and copyright of Universal Studios and U-Drive Joint Venture. Licensed by Universal Studios Licensing LLC. All Rights Reserved.</i></span>
<span itemprop="offers" itemscope itemtype="http://schema.org/Offer">
<meta itemprop="priceCurrency" content="USD" />
Buy New: $<span itemprop="price">48.99</span>
<link itemprop="availability" href="http://schema.org/InStock" />
</span>
</div>

Bank wiedzy: dane strukturalne dla produktów.

Schemat znacznika oceny

Początkowo był stosowany tylko na stronach e-commerce, ale teraz można go używać z powodzeniem w lokalnych firmach (np. w restauracji).

<div itemscope itemtype="http://schema.org/Thing">
<h2 itemprop="name">Super Book</h2>
<div itemprop="description">Ultra interesting. Super impressive.</div>
<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
<div>Book rating:
<span itemprop="ratingValue">9</span>
<meta itemprop="bestRating" content="10"/>
<meta itemprop="worstRating" content="1"/>
based on <span itemprop="ratingCount">20</span> ratings
</div>
</div>
</div>

Dane strukturalne w lokalnych stronach internetowych

Schemat znacznika dla lokalnych firm

Dzięki nim można znacznie poprawić pozycję lokalnej strony internetowej. Znaczniki implementujemy na stronach posiadających adres fizyczny. Możemy zaznaczyć godziny otwarcia, rodzaje płatności itp.

Uwaga! Dzięki różnorodności stron internetowych z danymi strukturalnymi możemy rozróżnić wiele grup branżowych tj. firma samochodowa, przedsiębiorstwo turystyczne itp. Dlatego warto jak najmocniej sprecyzować naturę swojej witryny.

Znaczniki lokalnego biznesu w danych strukturalnych

<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Mobiletry</h1>
<p itemprop="descripton">Strony internetowe - Olsztyn i cała Polska. Sklepy internetowe, reklama w internecie, pozycjonowanie, content marketing. Usługi dla firm, logo, wizytówki.</p>
<p>Open: <time itemprop="openingHours" datetime="Mo-Fi 06:00-20:00">Monday-Friday 9am-5pm</time></p>
<p>Phone: <span itemprop="telephone" content="+16463502789">646-350-2789</span></p>
</div>

Baza wiedzy:

Strony internetowe z danymi strukturalnymi – podsumowanie

Podczas implementacji oraz zmagań z danymi strukturalnymi należy upewnić się, że nie popełniłeś żadnego błędu. Należy wszystko przetestować.

W jaki sposób?

Istnieje kilka narzędzi, które wskażą błędy:

Uwaga! Na koniec muszę Cię ostrzec, że nagminne i błędne używanie danych strukturalnych może przyczynić się do nałożenia kary na stronę internetową, co będzie skutkowało spadkiem ruchu organicznego. Źródło, z którego pochodzą informacje na temat kary, znajduje się tutaj.

Artykuł oceniono na:
4.6 (10 głosów)

Jakub Ozorowski

Co-founder agencji interaktywnej MobileTry z Olsztyna, świadczącej kompleksowe usługi przede wszystkim małym firmom. Specjalizacją agencji jest tworzenie stron internetowych i sklepów internetowych. Ponadto MobileTry prowadzi kampanie reklamowe w internecie oraz oferuje usługi z zakresu pozycjonowania.

Spodobają Ci się również: