Jak używać responsywności stron.

Czym jest Meta Tag?

Meta tagi są to specjalne znaczniki, które widnieją w kodzie źródłowym strony (format HTML). Z ich pomocą można opisać zawartość strony internetowe, co może pozytywnie wpłynąć na wiele aspektów, między innymi pozycjonowanie w wyszukiwarce. Nie są jednak bezwartościowe z perspektywy użytkowników, część z nich wyświetla się także pod adresem witryny w wynikach wyszukiwania. 

Przykłady:

Charset=”UTF-8” – Atrybut charset określa kodowanie znaków w dokumencie HTML. W przypadku „UTF-8” deklaracja ta warunkuje poprawne wyświetlanie polskich liter, w szczególności tych z ogonkami (m.in. ąćęłńóśźż)

Name=”keywords” – Służył do określenia słów kluczowych związanych ze stroną. Początkowo był to najważniejszy punkt odniesienia dla robotów wyszukiwarek, które porównywały zawartość meta znacznika keywords i dopasowanie ich do frazy wyszukiwania. Obecnie te znaczniki tak naprawdę nie odgrywają żadnej konkretnej roli w algorytmach wyszukujących.

Name=”autor” – Działa na podobnej bazie co tag „keywords” Określa nazwę autora aplikacji internetowej reprezentowanej przez stronę.

Do czego służą tagi meta?

Meta tag służy do wykluczenia pewnych stron witryny z indeksowania lub śledzenia przez roboty Google. To jedna z metod, aby to zrobić. Tag meta jest widoczny w sekcji head strony internetowej.

Z tego co można zobaczyć na przykładzie powyżej, przeglądarka internetowa wyszukuje strony, które zawierają takie same słowa kluczowe w meta name=”keywords” jak, i w okienku wyszukiwania.

Czym jest ‘meta name=”viewport”’?

Meta name=”viewport” odpowiada za responsywność naszej strony w kontekście urządzeń, a konkretnie na urządzeniach mobilnych np. telefonach, tabletach itp. Daje przeglądarce informacje, w jaki sposób strona ma być wyświetlana na urządzeniach mobilnych.

albo

initial-scale – w dyrektywie tej ustawiamy domyślne przybliżenie (zoom) dla strony. Wartość ta jest zazwyczaj zależna od przeglądarki, lecz możemy

wymusić by nasza mobilna wersja strony domyślnie wyświetlała się w 10-krotnym przybliżeniu:

width, height – określają szerokość i wysokość wyświetlanego obszaru strony. Możemy podać wartość liczbową (w pikselach).

Poza wyżej wymienionymi deklaracjami, do meta viewport można także dodać:

*Minimum-scale – określa minimalne przybliżenie, jakie może wykonać użytkownik

*Maximum-scale – określa maksymalne przybliżenie, jakie może wykonać użytkownik

*User-scalable – czy użytkownik może wykonać zbliżenie

Jak działa ‘meta name=”viewport”’?

Urządzenia mobilne renderują strony przy typowej szerokości ekranu komputera stacjonarnego, a następnie zmniejszają je, co utrudnia ich odczytanie. Ustawienie metatagu pozwala kontrolować szerokość i skalowanie rzutni, tak aby jej rozmiar był prawidłowy na wszystkich urządzeniach.