Istotne kwestie dotyczące metadanych na stronach internetowych
- Metatagi pełnią rolę nośnika kluczowych informacji o witrynie internetowej, adresowanych do wyszukiwarek, przeglądarek oraz różnorodnych usług sieciowych.
- Do zasadniczych typów zaliczają się m.in. opis meta, tagi Open Graph, ustawienia widoku oraz znaczniki równoważne z nagłówkami HTTP.
- Indywidualne metatagi oferują dużą swobodę, lecz ich implementacja wymaga skrupulatnego planowania i precyzyjnej dokumentacji.
Sekcja nagłówkowa kodu HTML, poza tytułem strony oraz dołączonymi skryptami i stylami CSS, może zawierać metatagi. Elementy te są nieodzowne z punktu widzenia optymalizacji SEO, dostępności oraz ogólnej funkcjonalności serwisu.
Zapoznaj się z praktycznym zastosowaniem metatagów i ich potencjalną wartością informacyjną.
Metatagi to składniki, które dostarczają dodatkowych danych o danej stronie internetowej. Przeglądarki nie eksponują tych informacji bezpośrednio, jednak rozmaite narzędzia wykorzystują je w różnych celach, w tym wyszukiwarki, przeglądarki i inne usługi internetowe.
Dane wprowadzone za pomocą metatagów przyczyniają się do poprawy pozycji w wynikach wyszukiwania, oddziałują na responsywność i dostępność witryny, a także wpływają na prezentację strony w mediach społecznościowych.
Metatagi są tagami samozamykającymi się; nie występuje tag zamykający , ponieważ metatagi nie zawierają treści wewnątrz siebie. Wszelkie dane umieszczane są w atrybutach. Metatagi można dodać w sekcji nagłówkowej pliku HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Dokument</title>
</head>
<body></body>
</html>
Powyższy szkic HTML prezentuje dwa metatagi w sekcji nagłówkowej. Udostępniają one informacje o kodowaniu znaków (UTF-8) oraz ustawieniach widoku.
W większości metatagów dane przechowywane są za pomocą następujących atrybutów:
- name i content: atrybut name funkcjonuje jako identyfikator, natomiast atrybut content przechowuje dane powiązane z tym identyfikatorem. Zapewnia to elastyczny i skalowalny system przechowywania dowolnych metadanych.
- property: Ten atrybut niekiedy używany jest zamiennie z atrybutem name i pełni tę samą funkcję.
- http-equiv: co oznacza „równoważny HTTP”; ten atrybut definiuje nagłówek HTTP dla wartości zdefiniowanej w atrybucie content.
- scheme: ten atrybut, w połączeniu z nazwą, określa format danych zawartych w atrybucie treści.
Poniżej przedstawiono metatagi, które są powszechnie obsługiwane przez różne usługi internetowe i przeglądarki.
Metatag opisu
Opis, o długości do 155 znaków, zawiera streszczenie treści danej strony. Wyszukiwarki często umieszczają go pod tytułem strony i jej adresem URL. Ważne jest, aby zapewnić zwięzły i dokładny opis, który zachęci użytkowników do kliknięcia linku i przejścia na stronę.
<meta name="description" content="Krótki opis Twojej strony">
Metatagi Open Graph
Facebook i inne platformy społecznościowe w dużym stopniu opierają się na tych znacznikach. Wykorzystują informacje w nich zawarte, aby ulepszyć wygląd linków do Twojej strony, gdy użytkownicy ją udostępniają. Do metatagów Open Graph zaliczają się atrybuty takie jak og:title, og:description i og:image:
<meta property="og:title" content="Tytuł Twojej strony">
<meta property="og:description" content="Krótki opis Twojej strony">
<meta property="og:image" content="Adres URL powiązanego obrazu">
Metatagi SEO
Tagi te przekazują informacje wyszukiwarkom, mogąc wspomóc podniesienie pozycji strony. Stanowią one także integralną część najlepszych praktyk SEO. Obejmują one atrybuty takie jak robots, author i inne. Choć ich znaczenie w czasie osłabło, nadal zaleca się ich umieszczanie w kodzie HTML.
<meta name="robots" content="index, follow">
<meta name="author" content="Twoje imię">
Metatag widoku
Metatag widoku jest kluczowy w responsywnym projektowaniu stron internetowych. Informuje on przeglądarkę, aby dostosowała układ strony do szerokości urządzenia, zapewniając właściwe wyświetlanie treści i czytelność na urządzeniach mobilnych.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Metatagi odpowiadające nagłówkom HTTP
Te metatagi są istotne w zarządzaniu określonymi aspektami przetwarzania stron internetowych przez przeglądarki i serwery. Obejmują one atrybuty takie jak refresh i X-UA-Compatible. Choć ich bezpośredni wpływ na SEO może być różny, odgrywają zasadniczą rolę w sposobie funkcjonowania i kompatybilności strony.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
W praktycznych projektach nie wszystkie z tych tagów będą wykorzystywane jednocześnie, lecz warto dobrze rozumieć dostępne opcje. Ponadto, stosowanie metatagów ma pozytywny wpływ na porządek w strukturze dokumentów HTML.
Metatagi są elastyczne, ponieważ:
- Możesz stosować dowolnie wybrane nazwy do przechowywania danych.
- Przeglądarki nie prezentują ich zawartości użytkownikowi, choć są zawsze widoczne w kodzie źródłowym strony.
Oto przykład metatagu niestandardowego:
<meta name="target-audience" content="programiści">
W tym przypadku tag niestandardowy precyzuje grupę docelową, wskazując, że zawartość jest adresowana do programistów.
Niestandardowe metatagi umożliwiają rozszerzenie standardowego zestawu powszechnie rozpoznawanych tagów. Ważne jest, aby szczegółowo udokumentować stosowane tagi niestandardowe i jasno określić sposób ich wykorzystania. Inne serwisy domyślnie ich nie będą obsługiwać, co prawdopodobnie będzie wiązało się z koniecznością pisania dodatkowego kodu w celu ich przetworzenia.