Microdata – adres firmy – HTML5
CO TO JEST MICRODATA?
Wyszukiwarki i roboty, które wędrują po stronach internetowych mają swój słownik, dzięki któremu łatwiej im zrozumieć i przyporządkować pewne treści. Im lepiej rozumieją stronę, tym ta strona ma lepsze wyniki wyszukiwania i łatwiej ją znaleźć w gąszczu innych, podobnych. Z językiem HTML5 zostały wprowadzone specjalne znaczniki, które służą do opisywania stron – nadawania ich elementom konkretnego znaczenia.
PO CO UŻYWAĆ MICRODATA?
Klienci szukają firm wpisując „wrocław rehabilitacja tanio” lub nawet: „dobra tania rehabilitacja stare miasto”. Szukają po miastach a także po dzielnicach – żeby zbyt daleko nie jeździć. Dzięki microdata strony mniejszych firm mają szansę wybić się w wynikach wyszukiwania.
JAK UŻYWAĆ MICRODATA?
Micorodata wpisujemy do kodu strony, należy jednak poznać kilka podstawowych zasad, aby używać microdata poprawnie. Warto skorzystać ze specyfikacji LocalBusiness bo właśnie o stronach lokalnych firm będę dalej mówić w tym artykule.
Na początku należy poinformować przeglądarkę o tym, że mamy zamiar użyć microdata, tzn. umieścić jakąś własność do odczytania, przetłumaczenia. Do kodu wstawiamy następującą linijkę: <div itemscope>
. Następnie należy określić typ elementu, który znajdzie się pomiędzy znacznikami div
. Należy użyć atrybutu itemtype
. Cała linijka wygląda następująco:
<div itemscope itemtype="http://schema.org/LocalBusiness">
. To informuje, że element zawarty w div
będzie w rzeczywistości danymi lokalnego biznesu co zdefiniowane zostało w hierarchii typu schema.org.
MICORDATA – NAZWA FIRMY
Załóżmy, że masz już stronę, na której wpisałeś adres swojej firmy. Wygląda to tak:
<h1>Rehabilitacja Seniorow</h1>
<p>ul. Glogowska 56
56-455 Wroclaw</p>
Teraz należy dodać div itemscope
, o którym była mowa w poprzednim punkcie. Oto efekt:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1>Rehabilitacja Seniorow</h1>
<p>ul. Glogowska 56
56-455 Wroclaw</p>
</div>
I teraz najważniejsze: przeglądarka została poinformowana, że w znacznikach div
będą własności do odczytania. Teraz należy dodać te własności. W tym przykładzie wyglądać to będzie tak: <h1 itemprop="name">Rehabilitacja Seniorow</h1>
. Atrybut itemprop
informuje przeglądarkę, jaki element będzie zawierał dany znacznik. Cały kod:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Rehabilitacja Seniorow</h1>
<p>ul. Glogowska 56
56-455 Wroclaw</p>
</div>
MICRODATA – SIEDZIBA, ADRES FIRMY
Wyszukiwarka już wie jak nazywa się firma. Dodajmy teraz adres, aby działalność mogła zaistnieć w wyszukiwarkach. Do otwartego itemscope
musimy wstawić jeszcze jeden, który poinformuje przeglądarkę, że w nim zawarty będzie adres firmy, który posiada wiele parametrów np. ulicę, kod pocztowy, miasto. Do tekstów, które nie są nagłówkami zalecane jest użycie znacznika span
. Oto efekt:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Rehabilitacja Seniorow</h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<p>ul. Glogowska 56</p>
</div>
</div>
Teraz opiszemy każdą część adresu.
-
MICRODATA – ADRES – ULICA
Do tego celu użyjemy atrybutu
itemprop
o wartościstreetAddress
. Zamieniamy oczywiście p na span. Dokładnie wygląda to tak:
<div itemscope itemtype="http://schema.org/LocalBusiness"> <h1 itemprop="name">Rehabilitacja Seniorow</h1> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">ul. Glogowska 56</span> </div> </div>
-
MICRODATA – ADRES – KOD POCZTOWY
W tym przypadku skorzystamy z wartości atrybutu
postalCode
. Efekt:
<div itemscope itemtype="http://schema.org/LocalBusiness"> <h1 itemprop="name">Rehabilitacja Seniorow</h1> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">ul. Glogowska 56</span> <span itemprop="postalCode">56-455</span> </div> </div>
-
MICRODATA – ADRES – NAZWA MIASTA
Teraz dodamy nazwę miasta. Użyjemy wartości atrybutu
addressLocality
. Efekt:
<div itemscope itemtype="http://schema.org/LocalBusiness"> <h1 itemprop="name">Rehabilitacja Seniorow</h1> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">ul. Glogowska 56</span> <span itemprop="postalCode">56-455</span> <span itemprop="addressLocality">Wroclaw</span> </div> </div>
-
MICRODATA – ADRES – REGION
Dodamy jeszcze region. W USA wpisuje się nazwę stanu, my możemy wpisać w tym miejscu kraj lub województwo. Użyjemy do tego celu wartości
addressRegion
. Wygląda to następująco:
<div itemscope itemtype="http://schema.org/LocalBusiness"> <h1 itemprop="name">Rehabilitacja Seniorow</h1> <div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress"> <span itemprop="streetAddress">ul. Glogowska 56</span> <span itemprop="postalCode">56-455</span> <span itemprop="addressLocality">Wroclaw</span> <span itemprop="addressRegion">dolnoslaskie</span> </div> </div>
MICRODATA – DANE KONTAKTOWE FIRMY
Warto dodać także numer telefonu oraz adres e-mail. Do tego celu użyjemy atrybutów itemprop
o wartościach: telephone
oraz email
. Telephone działa tak jak pozostałe wartości, natomiast email umieszczamy w znacznikach <a>
. W ścieżce linku podajemy adres mailowy, wygląda to tak: <a href="mailto:martyna@rejkowicz.pl" itemprop="email">martyna@rejkowicz.pl</a>
Cały kod:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Rehabilitacja Seniorow</h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">ul. Glogowska 56</span>
<span itemprop="postalCode">56-455</span>
<span itemprop="addressLocality">Wroclaw</span>
<span itemprop="addressRegion">dolnoslaskie</span>
</div>
<p>Numer telefonu:</p> <span itemprop="telephone">757-678-420</span>
<a href="mailto:martyna@rejkowicz.pl" itemprop="email">martyna@rejkowicz.pl</a>
</div>
MICRODATA – OPIS FIRMY
Można dodać także opis firmy. Przykład w kodzie poniżej:
<div itemscope itemtype="http://schema.org/LocalBusiness">
<h1 itemprop="name">Rehabilitacja Seniorow</h1>
<div itemprop="address" itemscope itemtype="http://schema.org/PostalAddress">
<span itemprop="streetAddress">ul. Glogowska 56</span>
<span itemprop="postalCode">56-455</span>
<span itemprop="addressLocality">Wroclaw</span>
<span itemprop="addressRegion">dolnoslaskie</span>
</div>
<p>Numer telefonu:</p> <span itemprop="telephone">757-678-420</span>
<a href="mailto:martyna@rejkowicz.pl" itemprop="email">martyna@rejkowicz.pl</a>
<span itemprop="description"> Krotki ops firmy</span>
</div>
MICRODATA – PODSUMOWANIE
W ten sposób używa się microdata do „przetłumaczenia” lokalnego biznesu. Można dodać więcej informacji do kodu np. oferowane usługi, godziny otwarcia, ceny, liczbę pracowników, logo itp.
Łatwo można sprawdzić, które strony stosują microdata. Można skorzystać np. z narzędzia Google Structured Data Testing Tool. Wystarczy wpisać tam adres strony lub wkleić kod źródłowy. Wyświetli informację czy microdata są na stronie i czy są użyte poprawnie.
Takich informacji poszukiwałem
Super! 🙂