Microdata - adres firmy - HTML5 - REYCO strony www i e-learning

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 divbę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ści streetAddress. 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.

Microdata – adres firmy – HTML5