HTML => Informacje o meta

Wprowadzenie

Metatagi w dokumentach HTML zawierają przydatne informacje o dokumencie, w tym opis, słowa kluczowe, autora, daty modyfikacji i około 90 innych pól. W tym temacie opisano użycie i przeznaczenie tych tagów.

Składnia

<meta name="metadata name" content="value">
<meta http-equiv="pragma directive" content="value">
<meta charset="encoding label">

Uwagi

Metatag jest tagiem HTML używanym do ustawiania metadanych dokumentu HTML. Metatagi muszą znajdować się w elemencie head. Strona może zawierać dowolną liczbę metatagów.

keywords metatagiem zwykle nie są używane przez roboty. Większość wyszukiwarek określa, które słowa kluczowe pasują do treści na stronach internetowych. Biorąc to pod uwagę, nic nie mówi, że nie powinieneś już zawierać metatagu słów kluczowych.

Metadane strony są najczęściej używane przez przeglądarkę (np. Skalowanie dokumentu) i pająki indeksujące sieć używane przez wyszukiwarki (Google, Yahoo !, Bing).

Specyfikacja podaje szereg standardowych nazw metadanych do użycia z <meta name> i znormalizowanych dyrektyw pragma metadanych do użycia z <meta http-equiv> . Jednak wiele usług w Internecie (roboty indeksujące, narzędzia autorskie, usługi udostępniania społecznościowego itp.) <meta name> formularza <meta name> jako ogólnego punktu rozszerzenia metadanych. Niektóre z nich są wymienione na stronie wiki specyfikacji .

Kodowanie znaków

Atrybut charset określa kodowanie znaków dla dokumentu HTML i musi być prawidłowym kodowaniem znaków (przykłady obejmują windows-1252 , ISO-8859-2 , Shift_JIS i UTF-8 ). UTF-8 (Unicode) jest najczęściej używany i powinien być używany w każdym nowym projekcie.

<meta charset="UTF-8">

<meta charset="ISO-8859-1">

Wszystkie przeglądarki zawsze rozpoznawały formularz <meta charset> , ale jeśli z jakiegoś powodu potrzebujesz swojej strony, aby mieć prawidłowy HTML 4.01, możesz zamiast tego użyć następujących opcji:

<meta http-equiv="content-type" content="text/html; charset=UTF-8">

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">

Zobacz także Standard kodowania , aby wyświetlić wszystkie dostępne etykiety kodowania znaków rozpoznawane przez przeglądarki.

Automatyczne odświeżanie

Aby odświeżać stronę co pięć sekund, dodaj ten element meta elementu head :

<meta http-equiv="refresh" content="5">

UWAGA! Chociaż jest to prawidłowe polecenie, zaleca się, aby nie używać go ze względu na jego negatywny wpływ na wrażenia użytkownika. Zbyt częste odświeżanie strony może spowodować, że przestanie ona odpowiadać, i często przewija się na górę strony. Jeśli niektóre informacje na stronie wymagają ciągłej aktualizacji, są na to znacznie lepsze sposoby, odświeżając tylko część strony.

Kontrola układu mobilnego

Popularne witryny zoptymalizowane pod kątem urządzeń mobilnych używają tagu <meta name="viewport"> następujący sposób:

<meta name="viewport" content="width=device-width, initial-scale=1">

Element viewport zawiera instrukcje przeglądarki dotyczące kontrolowania wymiarów i skalowania strony w zależności od używanego urządzenia.

W powyższym przykładzie, content="width=device-width oznacza, że przeglądarka będzie renderować szerokość strony na szerokości własnym ekranie. Więc jeśli ekran jest 480px wide , okno przeglądarki będzie 480px wide . initial-scale=1 że początkowe powiększenie (w tym przypadku jest to 1, oznacza, że nie powiększa).

Poniżej znajdują się atrybuty obsługiwane przez ten tag:

Atrybut	Opis
`width`	Szerokość wirtualnej rzutni urządzenia. Wartości ¹ : `device-width` lub rzeczywista szerokość w pikselach, np. `480`
`height`	Wysokość wirtualnej rzutni urządzenia. Wartości ² : `device-height` lub rzeczywista szerokość w pikselach, na przykład `600`
`initial-scale`	Początkowe powiększenie po załadowaniu strony. 1.0 nie powiększa się.
`minimum-scale`	Minimalna kwota, którą użytkownik może powiększyć na stronie. `1.0` nie powiększa się.
`maximum-scale`	Maksymalna kwota, którą użytkownik może powiększyć na stronie. `1.0` nie powiększa się.
`user-scalable`	Pozwala urządzeniu na powiększanie i pomniejszanie. Wartości są `yes` lub `no` . Jeśli ustawione na no, użytkownik nie będzie mógł powiększyć strony. Domyślnie jest to tak. Ustawienia przeglądarki mogą zignorować tę regułę.

Uwagi:

¹ Właściwość width można określić w pikselach ( width=600 ) lub przez szerokość urządzenia ( width=device-width ), która reprezentuje fizyczną szerokość ekranu urządzenia.

² Podobnie, właściwość height może być określona w pixels ( height=600 ) lub przez device-height ( height=device-height ), która reprezentuje fizyczną wysokość ekranu urządzenia.

Informacje o stronie

`application-name`

Podanie nazwy aplikacji sieci Web reprezentowanej przez stronę.

<meta name="application-name" content="OpenStreetMap">

Jeśli nie jest to aplikacja internetowa, nie można użyć metatagu application-name .

`author`

Ustaw autora strony:

<meta name="author" content="Your Name">

Można podać tylko jedną nazwę.

`description`

Ustaw opis strony:

<meta name="description" content="Page Description">

Metatag description może być używany przez różne wyszukiwarki podczas indeksowania strony internetowej w celu wyszukiwania. Zazwyczaj opis zawarty w metatagu jest krótkim podsumowaniem, które pojawia się pod głównym tytułem strony / witryny w wynikach wyszukiwania. Google zwykle używa tylko pierwszych 20–25 słów z opisu.

`generator`

<meta name="generator" content="HTML Generator 1.42">

Identyfikuje jeden z pakietów oprogramowania użytych do wygenerowania dokumentu. Do użytku wyłącznie na stronach, na których znaczniki są generowane automatycznie.

`keywords`

Ustaw słowa kluczowe dla wyszukiwarek (oddzielone przecinkami):

<meta name="keywords" content="Keyword1, Keyword2">

Metatag keywords jest czasem używany przez wyszukiwarki, aby poznać zapytanie, które jest istotne dla Twojej strony internetowej.
Zasadniczo dobrym pomysłem jest prawdopodobnie nie dodawanie zbyt wielu słów, ponieważ większość wyszukiwarek używających tego metatagu do indeksowania indeksuje tylko pierwsze ~ 20 słów. Upewnij się, że najważniejsze słowa kluczowe są na pierwszym miejscu.

Roboty

Atrybut robots , obsługiwany przez kilka głównych wyszukiwarek, kontroluje, czy pająki wyszukiwarek mogą indeksować stronę, czy nie i czy powinny podążać za linkami ze strony, czy nie.

<meta name="robots" content="noindex">

Ten przykład instruuje wszystkie wyszukiwarki, aby nie wyświetlały strony w wynikach wyszukiwania. Inne dozwolone wartości to:

Wartość / dyrektywa	Znaczenie
`all`	Domyślna. Odpowiednik `index, follow` . Zobacz notkę poniżej.
`noindex`	W ogóle nie indeksuj strony.
`nofollow`	Nie podążaj za linkami na tej stronie
`follow`	Łącza na stronie można śledzić. Zobacz notkę poniżej.
`none`	Odpowiednik `noindex, nofollow` .
`noarchive`	Nie udostępniaj wersji tej strony w pamięci podręcznej w wynikach wyszukiwania.
`nocache`	Synonim `noarchive` używany przez niektóre boty, takie jak Bing.
`nosnippet`	Nie pokazuj fragmentu tej strony w wynikach wyszukiwania.
`noodp`	Nie używaj metadanych tej strony z projektu Open Directory do tytułów lub fragmentów w wynikach wyszukiwania.
`notranslate`	Nie oferuj tłumaczeń tej strony w wynikach wyszukiwania.
`noimageindex`	Nie indeksuj obrazów na tej stronie.
`unavailable_after [RFC-850 date/time]`	Nie pokazuj tej strony w wynikach wyszukiwania po określonej dacie / godzinie. Data / godzina muszą być określone w formacie RFC 850 .

Uwaga: Jawne definiowanie index i / lub follow , mimo że prawidłowe wartości, nie jest konieczne, ponieważ prawie wszystkie wyszukiwarki zakładają, że mogą to zrobić, jeśli nie zostanie to wyraźnie zabronione. Podobnie jak działa plik robots.txt, wyszukiwarki zazwyczaj szukają tylko tych rzeczy, których nie wolno im robić. Tylko stwierdzenie, czego nie może zrobić wyszukiwarka, zapobiega również przypadkowemu stwierdzeniu przeciwieństw (takich jak index, ..., noindex ), które nie wszystkie wyszukiwarki będą traktować w ten sam sposób.

Rozpoznawanie numeru telefonu

Platformy mobilne, takie jak iOS, automatycznie rozpoznają numery telefonów i zamieniają je w tel: linki. Chociaż funkcja ta jest bardzo praktyczna, system czasami wykrywa kody ISBN i inne numery jako numery telefonów.

W przypadku mobilnego Safari i niektórych innych przeglądarek mobilnych opartych na WebKit, aby wyłączyć automatyczne rozpoznawanie i formatowanie numeru telefonu, potrzebny jest ten metatag:

<meta name="format-detection" content="telephone=no">

Media społecznościowe

Otwarty wykres jest standardem dla metadanych, które rozszerzają normalne informacje zawarte w znacznikach głównych witryny. Umożliwia to stronom internetowym takim jak Facebook wyświetlanie głębszych i bogatszych informacji o witrynie w ustrukturyzowanym formacie. Informacje te są następnie automatycznie wyświetlane, gdy użytkownicy udostępniają linki do stron internetowych zawierających metadane OG na Facebooku.

Facebook / Otwórz wykres

<meta property="fb:app_id" content="123456789">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:type" content="website">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
<meta property="article:author" content="">
<!-- Facebook: https://developers.facebook.com/docs/sharing/webmasters#markup -->
<!-- Open Graph: http://ogp.me/ -->

Facebook / artykuły błyskawiczne

<meta charset="utf-8">
<meta property="op:markup_version" content="v1.0">

<!-- The URL of the web version of your article -->
<link rel="canonical" href="http://example.com/article.html">

<!-- The style to be used for this article -->
<meta property="fb:article_style" content="myarticlestyle">

Twitter używa własnych znaczników metadanych. Te metadane są używane jako informacje do kontrolowania sposobu wyświetlania tweetów, gdy zawierają one link do strony.

Świergot

<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Content Title">
<meta name="twitter:description" content="Content description less than 200 characters">
<meta name="twitter:image" content="https://example.com/image.jpg">

Google+ / Schema.org

<link href="https://plus.google.com/+YourPage" rel="publisher">
<meta itemprop="name" content="Content Title">
<meta itemprop="description" content="Content description less than 200 characters">
<meta itemprop="image" content="https://example.com/image.jpg">

Automatyczne przekierowanie

Czasami twoja strona potrzebuje automatycznego przekierowania.

Na przykład, aby przekierować na example.com po 5 sekundach:

<meta http-equiv="refresh" content="5;url=https://www.example.com/" />

Ta linia wyśle cię na wyznaczoną stronę internetową (w tym przypadku example.com po 5 sekundach.

Jeśli musisz zmienić opóźnienie czasowe przed przekierowaniem, po prostu zmień numer tuż przed ;url= zmieni opóźnienie czasowe.

Aplikacja internetowa

Możesz skonfigurować aplikację internetową lub witrynę internetową tak, aby ikona skrótu do aplikacji była dodana do ekranu głównego urządzenia i aby aplikacja była uruchamiana w trybie pełnoekranowym w „trybie aplikacji” na Chrome z menu „Dodaj do ekranu głównego” .

Poniższe metatagi otworzą aplikację internetową w trybie pełnoekranowym (bez paska adresu).

Android Chrome

<meta name="mobile-web-app-capable" content="yes">

IOS

<meta name="apple-mobile-web-app-capable" content="yes">

Możesz także ustawić kolor paska stanu i paska adresu w metatagu.