Kursy pozycjonowania

Czym są meta tagi i jak je stosować?

Czym są meta tagi i jak je stosować?

Każdy webmaster powinien znać podstawowe meta tagi, które służą do przekazywania wyszukiwarkom i przeglądarkom sprecyzowanych informacji. Dzięki meta tagom możemy zablokować dostęp dla robota wyszukiwarki, ustawić krótki opis strony, ustalić tytuł okna przeglądarki, a nawet stworzyć stronę zgodną z urządzeniami mobilnymi i social media friendly.

Meta tagi umieszczane są w sekcji dokumentu html, a ich zapis składa się z dwóch parametrów: name i content. Name określa typ tagu, a content to jego zawartość. Przykładowo:

Najważniejsze tagi, spotykane w procesie budowy strony to:

Charset – służy do określania wykorzystywanego na stronie zestawu znaków (kodowania) np. UTF-8

Description – krótki, aczkolwiek merytoryczny opis strony internetowej. Konieczne jest wystrzeganie się duplikatów opisów w obrębie kilku podstron jednego serwisu.

Robots – tag interpretowany w pierwszej kolejności przez roboty crawlujące. Określa on czy strona ma być indeksowana przez wyszukiwarkę, czy robot ma podążać za linkami znajdującymi się na podstronie lub czy strona może zostać zapisana w pamięci podręcznej wyszukiwarki.
Tag robots składa się z następujących parametrów:
-follow – indeksowane będą linki na podstronie
-nofollow – linki na podstronie nie zostaną zaindeksowane
-index – strona zostanie zaindeksowana
-noindex – robot nie ma pozwolenia na zaindeksowanie podstrony
-noarchive – robot ma zakaz tworzenia kopii podręcznej podstrony

Tworząc tag robots możemy łączyć wartości niewykluczające się np.
<meta name=”robots” content=”noindex, follow, noarchive” />

Niezastosowanie ów tagu na swojej stronie jest równoznaczne z dodaniem:
<meta name=”robots” content=”index, follow” />

Keywords – tag przestarzały, dziś uznawany w kręgach seo za szkodliwy w procesie pozycjonowania. Dawniej służył do określania tematyki strony internetowej poprzez wpisanie w nim słów kluczowych po przecinku. Prymitywne wtedy wyszukiwarki internetowe traktowały tag jako wyznacznik słów na które strona ma się pojawiać w wynikach wyszukiwania.

Author – tag będący swego rodzaju podpisem webmastera. W jego treści można umieścić nazwę firmy webmasterskiej, imię i nazwisko programisty lub jego pseudonim artystyczny.

Viewport – interpretowany tylko przez przeglądarki internetowe. Wykorzystywany głównie przez urządzenia mobilne charakteryzujące się zróżnicowaną gęstością pikseli. W dobie dzisiejszego rozwoju technologicznego ma duże znaczenie, ponieważ style css z wartościami pikselowymi tracą sens, kiedy strona uruchomiona zostaje na pięciocalowym ekranie 4k. Zadaniem tego tagu jest określenie czy strona ma się wyświetlać w oknie wirtualnym z możliwością przewijania na boki, czy lepiej kiedy zostanie przeskalowana do wielkości ekranu.
Tag viewport ma największe znaczenie w kodowaniu stron responsywnych.

Google-site-verification – tag stosowany w celu weryfikacji strony internetowej w narzędziach dla webmasterów w wyszukiwarce Google.

Wraz z rozwojem technologii meta tagi wykorzystywane są również w integracji strony z mediami społecznościowymi i interakcji na urządzeniach mobilnych, przykładowo:

Aby określić, która aplikacja ma zostać uruchomiona na smartfonie po odwiedzeniu strony internetowej używamy następującego tagu.

Przykład z instagrama:

<meta property=”al:ios:app_name” content=”Instagram” />

<meta property=”al:android:app_name” content=”Instagram” />

<meta property=”al:android:package” content=”com.instagram.android” />

<meta property=”al:ios:app_store_id” content=”389801252″ />

Pierwszy wiersz określa nazwę aplikacji do uruchomienia na IOS, drugi na Androidzie, trzeci nazwę kodową aplikacji w sklepie Play w celu jej pobrania, a czwarty w sklepie IOS. Takie zastosowanie tagów ma sens jeśli prowadzimy portal na tyle rozbudowany, że łatwiejsza jego obsługa będzie poprzez dedykowaną aplikację, którą napisze dla nas firma programistyczna.

Facebook stworzył tagi specjalnie na potrzeby udostępniania linków, zwane protokołem Open Graph. Dzięki poniższym tagom mamy możliwość zdefiniowania tytułu, opisu i obrazka reprezentującego naszą stronę po wstawieniu linku na Facebooku.

<meta property=”og:title” content=”Sklep komputerowy”/>

<meta property=”og:description” content=”Sklep Internetowy – laptopy, telefony komórkowe. Najniższe ceny w Polsce. Sprawdź nas!”/>

<meta property=”og:image” content=”http://example.com/logo_fb.jpg”/>

 

Po więcej informacji zapraszamy na http://www.kurshtml.edu.pl/

 

Dodaj komentarz