Spis treści:
- Metatagi dostarczają istotnych informacji o stronie internetowej dla wyszukiwarek, przeglądarek i usług internetowych.
- Podstawowe typy obejmują metaopis, otwarty wykres, rzutnię i tagi równoważne HTTP.
- Niestandardowe metatagi zapewniają elastyczność, ale wymagają starannej dokumentacji i planowania.
Oprócz tytułu strony oraz używanych przez nią skryptów i arkuszy stylów sekcja nagłówka HTML może zawierać metatagi. Są one niezbędne dla SEO, dostępności i ogólnej wydajności witryny.
Dowiedz się, jak korzystać z metatagów i dowiedz się, jakie informacje mogą dostarczyć.
Metatagi to elementy dostarczające dodatkowych informacji o stronie internetowej. Przeglądarki nie wyświetlają tych metadanych bezpośrednio, ale każde narzędzie może je wykorzystać do różnych celów. Dotyczy to wyszukiwarek, przeglądarek i innych usług internetowych.
Dane, które podajesz w metatagach, pomagają poprawić rankingi w wyszukiwarkach, wpływają na responsywność i dostępność witryny oraz poprawiają wyświetlanie Twoich stron w mediach społecznościowych.
Metatagi to tagi samozamykające się; nie ma , ponieważ nie zawierają one żadnej treści. Zawierają wszystkie swoje dane w atrybutach. Możesz dodać metatagi do sekcji head swojego pliku HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width-device-width, initial-scale=1.0"><title>Document</title>
</head>
<body></body>
</html>
Ten przykładowy schemat HTML zawiera dwa metatagi w sekcji nagłówka. Dostarczają informacji odpowiednio o zestawie znaków (UTF-8) i rzutni.
Większość metatagów używa kombinacji następujących atrybutów do przechowywania danych.
- name i content: atrybut name przypomina etykietę, natomiast atrybut content przechowuje dane powiązane z tą etykietą. Zapewnia to elastyczny, rozszerzalny system do przechowywania dowolnych metadanych.
- właściwość: Ten atrybut jest czasami używany jako alternatywa dla nazwy i służy temu samemu celowi.
- http-equiv: oznaczający „równoważnik HTTP”; ten atrybut definiuje nagłówek HTTP dla wartości określonej w atrybucie content.
- schemat: ten atrybut, używany z nazwą, definiuje typ danych w atrybucie treści.
Przekonasz się, że następujące metatagi są powszechnie obsługiwane przez różne usługi internetowe i przeglądarki.
Metatag opisowy
Ten fragment o długości do 155 znaków podsumowuje zawartość strony. Wyszukiwarki często wyświetlają go pod tytułem strony i adresem URL. Istotne jest podanie zwięzłego i dokładnego opisu, który zachęci użytkowników do kliknięcia linku i odwiedzenia Twojej strony.
<meta name="description" content="A brief description of your page">
Otwórz metatagi wykresu
Facebook i inne platformy mediów społecznościowych w znacznym stopniu korzystają z tych tagów. Wykorzystują informacje zawarte w tych tagach, aby poprawić prezentację linków do Twojej strony, gdy użytkownicy ją udostępniają. Metatagi Open Graph obejmują atrybuty takie jak og:title, og:description i og:image:
<meta property="og:title" content="Your Page Title">
<meta property="og:description" content="A brief description of your page">
<meta property="og:image" content="URL of a related image">
Metatagi SEO
Tagi te dostarczają informacji wyszukiwarkom i mogą pomóc poprawić ranking Twojej strony. Znajdują się one również na liście niezbędnych najlepszych praktyk SEO. Obejmują one atrybuty takie jak roboty, autor i inne. Chociaż znaczenie tych tagów z czasem spadło, nadal konieczne jest ich uwzględnienie w dokumencie HTML.
<meta name="robots" content="index, follow">
<meta name="author" content="Your Name">
Metatag rzutni
Metatag rzutni jest niezbędnym elementem w responsywnym projektowaniu stron internetowych. Informuje przeglądarkę, aby dostosowała układ strony do szerokości urządzenia, zapewniając prawidłowe wyświetlanie treści i czytelność na urządzeniach mobilnych.
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Metatagi odpowiadające HTTP
Te metatagi są niezbędne do kontrolowania określonych aspektów sposobu, w jaki przeglądarki i serwery przetwarzają strony internetowe. Obejmują one atrybuty takie jak odświeżanie i zgodność z X-UA. Chociaż ich bezpośredni wpływ na SEO może być różny, odgrywają one kluczową rolę w wpływaniu na zachowanie i kompatybilność strony.
<meta http-equiv="refresh" content="5;url=https://example.com">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Nie będziesz używać ich wszystkich na raz w swoich projektach, ale nadal ważne jest, aby dobrze rozumieć różne dostępne metatagi. Ponadto użycie metatagów zapewnia korzyści w postaci poprawy organizacji dokumentów HTML.
Metatagi są elastyczne, ponieważ:
- Możesz używać wybranej przez siebie nazwy do przechowywania dowolnych danych.
- Przeglądarki nie będą wyświetlać swojej zawartości, chociaż zawsze będzie ona widoczna w źródle strony.
Oto przykład niestandardowego metatagu:
<meta name="target-audience" content="developers">
W tym przykładzie tag niestandardowy określa docelowych odbiorców treści, wskazując, że jest ona skierowana do programistów.
Niestandardowe metatagi umożliwiają rozszerzenie standardowego zestawu powszechnie rozpoznawanych tagów. Ważne jest jednak, aby dokładnie udokumentować używane tagi niestandardowe i dobrze wiedzieć, w jaki sposób będziesz ich używać. Inne usługi nie będą ich domyślnie używać ani rozpoznawać, więc prawdopodobnie w pewnym momencie będziesz pisać własny kod, aby je przetworzyć.