Atrybut name znacznika HTML <meta>
Definicja i użycie
name Atrybut określa nazwę metadanych.
name Atrybut określa Atrybut content nazwy wartości.
przez użycie name i content Atrybut, który może używać par nazwa/wartość do zdefiniowania metadanych dokumentu. W tym przypadku:name Atrybut określa typ metadanych, podczas gdy content Atrybut jest używany do dostarczania wartości.
Poniższa tabela zawiera kilka typów zdefiniowanych przez użytkownika metadanych.
Uwaga:jeśli ustawiono atrybut http-equivjeśli ustawiono name Atrybuty.
Wskazówka:HTML5 wprowadził metodę, która pozwala projektantom stron internetowych kontrolować viewport (obszar widoczny użytkownika) za pomocą znacznika <meta> (patrz poniższy przykład "Ustawienie viewport").
Przykład
Użyj atrybutu name do zdefiniowania opisu, kluczowych słów i autora dokumentu HTML. Należy również zdefiniować viewport, aby kontrolować rozmiar strony i skalowanie dla różnych urządzeń:
<head> <meta name="description" content=" darmowy kurs Web "> <meta name="keywords" content="HTML,CSS,JavaScript"> <meta name="author" content="YK Investment"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> </head>
Gramatyka
<meta name="value">
Wartość atrybutu
| Wartość | Opis |
|---|---|
| application-name | Określ nazwę Web aplikacji reprezentowanej przez stronę. |
| author |
Określ nazwę autora dokumentu. Na przykład: <meta name="author" content="YK Investment"> |
| description |
Określ opis strony. Wyszukiwarka może wybrać ten opis, aby wyświetlić wyniki wyszukiwania. Na przykład: <meta name="description" content=" darmowy kurs Web "> |
| generator |
Określ jedną z pakietów używanych do generowania dokumentów (nie używane do ręcznego tworzenia stron). Na przykład: <meta name="generator" content="FrontPage 4.0"> |
| keywords |
Określ listę kluczowych słów związanych z stroną, oddzielonych przecinkami. Informuj wyszukiwarkę o zawartości strony. Wskazówka:Zawsze określaj słowa kluczowe (wyszukiwarki muszą klasyfikować stronę). Na przykład: <meta name="keywords" content="HTML, meta tag, tag reference"> |
| viewport | Kontrola viewport (obszar widoczny dla użytkownika na stronie). |
Wyjaśnienie
Oprócz sześciu zdefiniowanych metadanych, można również używać rozszerzeń metadanych. Można uzyskać aktualną listę rozszerzeń na tej stronie:
http://wiki.whatwg.org/wiki/MetaExtensions
Niektóre rozszerzenia są bardziej powszechnie używane, podczas gdy inne mają bardzo ograniczone zastosowanie, prawie nikt ich nie używa. Metadane robots显然 należą do pierwszej grupy. Autorzy dokumentów HTML mogą użyć ich, aby powiedzieć wyszukiwarkom, jak traktować dokument. Na przykład:
<meta name="robots" content="noindex">
Ten typ metadanych ma trzy wartości, które są rozpoznawane przez większość przeglądarek:
- noindex - oznacza, że nie należy indeksować tej strony
- noarchive - oznacza, że nie należy archiwizować lub buforować tej strony
- nofollow - oznacza, że nie należy kontynuować wyszukiwania za pomocą linków na tej stronie
Ilość dostępnych rozszerzeń metadanych jest stosunkowo mała, najlepiej przeczytać listę online, aby zobaczyć, które są dostępne dla własnych projektów.
Wskazówka
Aby powiedzieć wyszukiwarkom, jak klasyfikować i klasyfikować zawartość, w przeszłości najważniejszym środkiem było użycie metadanych keywords. Obecnie, z powodu ich nadużycia do tworzenia iluzji związku zawartości strony z kluczowymi słowami, znaczenie metadanych keywords jest znacznie mniejsze. Najlepszym sposobem, aby twórcy chcieli, aby ich zawartość była lepiej widziana przez wyszukiwarki, jest użycie własnych rekomendacji. Większość wyszukiwarek oferuje przewodniki dotyczące optymalizacji stron internetowych lub całych witryn.
Google: Nowy przewodnik SEO (SEO) dla początkujących
https://developers.google.com/search/docs/fundamentals/seo-starter-guide?hl=zh-cn
Baidu: Przewodnik SEO dla wyszukiwarki Baidu
Ustawianie viewport
Viewport to obszar widoczny dla użytkownika na stronie. Zależy od urządzenia – na telefonie będzie mniejszy niż na ekranie komputera.
Powinieneś zawierać poniższy element <meta> we wszystkich stronach internetowych:
<meta name="viewport" content="width=device-width, initial-scale=1.0">
Dostarcza przeglądarce instrukcje dotyczące tego, jak kontrolować rozmiar strony i skalę powiększenia.
width=device-width Część ustawień ustawiająca szerokość strony, aby śledziła szerokość ekranu urządzenia (zależy od urządzenia).
initial-scale=1.0 Część ustawień ustawiająca początkową skalę powiększenia strony przy pierwszym załadowaniu przez przeglądarkę.
Oto przykład strony bez meta tagu viewport oraz tej samej strony z meta tagiem viewport:
Wskazówka:Jeśli przeglądasz tę stronę za pomocą telefonu lub tabletu, możesz kliknąć na poniższe dwa linki, aby zobaczyć różnice.
Możesz odwiedzić naszeKurs projektowania responsywnej witryny - PrzeglądarkaDowiedz się więcej o viewport.
Obsługa przeglądarek
| Chrome | Edge | Firefox | Safari | Opera |
|---|---|---|---|---|
| Chrome | Edge | Firefox | Safari | Opera |
| Wsparcie | Wsparcie | Wsparcie | Wsparcie | Wsparcie |
