W sekcji struktury dokumentu przedstawiliśmy komponenty, które (prawie) zawsze znajdują się w sekcji <head> dokumentu HTML. Wszystkie elementy <head>, w tym <title>, <link>, <script>, <style> i rzadsze elementy <base>, są w rzeczywistości „metadanymi”, ale w przypadku metadanych występuje tag <meta>, którego nie mogą reprezentować te pozostałe elementy.
Specyfikacja zawiera kilka metatagów oraz wiele innych metatypów obsługiwanych przez aplikacje, których nie ma w żadnej oficjalnej specyfikacji. W tej sekcji omówimy atrybuty i wartości zawarte w specyfikacjach, niektóre popularne metanazwy i wartości treści, a także kilka metatagów, które są niezwykle przydatne podczas optymalizacji witryn pod kątem wyszukiwarek (SEO), publikowania w mediach społecznościowych i zwiększania wygody korzystania z usług, a które nie zostały oficjalnie zdefiniowane w dokumentach WhatWG ani W3C.
Wymagane tagi <meta>, ponownie
Powtórzmy teraz dwa niezbędne tagi <meta>, które już omówiliśmy – deklarację zestawu znaków i metatag widocznego obszaru, aby lepiej zrozumieć tag <meta>.
Atrybut charset elementu <meta> powstał w unikalny sposób. Początkowo metadane zestawu znaków miały postać <meta http-equiv="Content-Type" content="text/html; charset=<characterset>" />, ale wielu programistów błędnie wpisał atrybut content (content="text/html" charset="<characterset>"), co sprawiło, że przeglądarki zaczęły obsługiwać zestaw znaków jako atrybut. Obecnie jest ustandaryzowane w standardowym formacie HTML jako <meta charset="<charset>" />, gdzie w przypadku HTML <charset> to ciąg znaków „utf-8” bez rozróżniania wielkości liter.
Być może udało Ci się zauważyć, że pierwotna deklaracja meta dotycząca zestawu znaków zawierała atrybut http-equiv. Jest to skrót od „http-evalent”, ponieważ metatag replikuje zawartość nagłówka HTTP. Oprócz wyjątku charset wszystkie inne metatagi zdefiniowane w specyfikacji HTML WhatWG zawierają atrybut http-equiv lub name.
Oficjalnie zdefiniowane metatagi
Istnieją dwa główne typy metatagów: instrukcje pragma z atrybutem http-equiv (takim jak używany wcześniej metatag charset) oraz typy nazwane, takie jak metatag widoczny z atrybutem name, które omówiliśmy w sekcji Struktura dokumentu. Zarówno typy meta name, jak i http-equiv muszą zawierać atrybut content, który określa treść danego typu metadanych.
Dyrektywy Pragma
Atrybut http-equiv ma jako wartość dyrektywę pragma. Te dyrektywy określają sposób analizowania strony. Obsługiwane wartości http-equiv włączają dyrektywy ustawień, gdy nie można bezpośrednio ustawić nagłówków HTTP.
Specyfikacja definiuje 7 dyrektyw pragma, z których większość ma inne metody ustawiania. Na przykład dyrektywę języka można dodać do elementu <meta http-equiv="content-language" content="en-us" />, ale już wspomnieliśmy, jak używać atrybutu lang w elemencie HTML, którego należy używać.
Najpowszechniejszą dyrektywą pragma jest refresh.
<meta http-equiv="refresh" content="60; https://machinelearningworkshop.com/regTimeout" />
Możesz ustawić dyrektywę, która będzie odświeżać się w odstępach czasu ustawionych w atrybucie content, a nawet przekierowywać do innego adresu URL, ale nie jest to zalecane. Odświeżanie i przekierowywanie treści bez wyraźnej prośby użytkownika jest uciążliwe i niekorzystnie wpływa na dostępność. Nie znosisz, gdy jesteś w środku akapitu, a strona się resetuje? Wyobraź sobie, że masz problemy poznawcze lub problemy z widzeniem i tak dalej. Jeśli zamierzasz ustawić odświeżanie z przekierowaniem, upewnij się, że użytkownik ma wystarczająco dużo czasu na przeczytanie strony, link do przyspieszenia procesu oraz, w razie potrzeby, przycisk „Zatrzymaj zegar” i zapobiegnij przekierowywaniu.
Nie zostanie on uwzględniony w naszej witrynie, ponieważ nie ma powodu, aby przerwać sesję użytkownika, a jedynie irytować użytkowników.
Najbardziej przydatną dyrektywą pragma jest content-security-policy, która umożliwia zdefiniowanie polityki treści bieżącego dokumentu. Polityka treści najczęściej określa dozwolone źródła serwera i punkty końcowe skryptu, co pomaga chronić przed atakami typu cross-site scripting.
<meta http-equiv="content-security-policy" content="default-src https:" />
Jeśli nie masz uprawnień, by zmieniać nagłówki HTTP, oto lista wartości treści rozdzielonych spacjami w dyrektywach content-security-policy.
Nazwane metatagi
Najczęściej uwzględnia się nazwane metadane. Dodaj atrybut name, a wartością atrybutu będzie nazwa metadanych. Podobnie jak w przypadku dyrektyw pragma, atrybut content jest wymagany.
Atrybut name to nazwa metadanych. Poza viewport warto uwzględnić description i theme-color, ale nie keywords.
Słowa kluczowe
Sprzedawcy węży w wyszukiwarkach nadużywali metatagów słów kluczowych, zamiast list odpowiednich haseł, umieszczając je w postaci list spamerskich słów rozdzielonych przecinkami zamiast list odpowiednich haseł. W związku z tym wyszukiwarki nie uznały już tych metadanych za przydatne. Nie musisz tracić czasu, wysiłku ani bajtów na dodanie.
Opis
Wartość description jest jednak przydatna w przypadku SEO: treść opisu jest często wyświetlana przez wyszukiwarki pod tytułem strony w wynikach wyszukiwania. Niektóre przeglądarki, np. Firefox i Opera, używają tego adresu jako domyślnego opisu stron dodanych do zakładek. Opis powinien być krótkim i dokładnym podsumowaniem zawartości strony.
<meta name="description"
content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
Jeśli druga część opisu nie ma dla Ciebie sensu, prawdopodobnie nie znasz jeszcze filmu Zoolander.
roboty;
Jeśli nie chcesz, aby Twoja witryna była indeksowana przez wyszukiwarki, możesz je o tym poinformować. <meta name="robots" content="noindex, nofollow" /> informuje boty, aby nie indeksowały witryny ani nie korzystały z żadnych linków. Boty powinny słuchać próśb, ale nie ma przepisów prawa, które wymagałyby ich uwzględnienia. Nie musisz dodawać tagu <meta name="robots" content="index, follow" />, aby poprosić o zindeksowanie witryny i kliknięć linków, ponieważ jest to wartość domyślna, chyba że w nagłówkach HTTP jest inaczej.
<meta name="robots" content="index, follow" />
Kolor motywu
Wartość theme-color pozwala zdefiniować kolor, który pozwala dostosować interfejs przeglądarki. Wartość koloru w atrybucie content będzie używana przez obsługiwane przeglądarki i systemy operacyjne, co pozwoli Ci zaproponować sugerowany kolor klientom użytkownika, które obsługują kolorowanie paska tytułu, paska kart lub innych komponentów Chrome. Ten metatag jest szczególnie przydatny w przypadku progresywnych aplikacji internetowych. Jeśli jednak dołączasz plik manifestu, który jest wymagany przez PWA, możesz zamiast niego użyć koloru motywu. Zdefiniowanie go w kodzie HTML gwarantuje jednak, że zostanie on wykryty natychmiast przed renderowaniem, co może trwać szybciej niż przy pierwszym wczytaniu niż oczekiwania na plik manifestu.
Aby ustawić niebieski odcień motywu na niebieski od koloru tła naszej witryny, dodaj:
<meta name="theme-color" content="#226DAA" />
Metatag koloru motywu może zawierać atrybut media umożliwiający ustawianie różnych kolorów motywu na podstawie zapytań o multimedia. Atrybut media można umieścić tylko w tym metatagu. Jest on ignorowany we wszystkich pozostałych metatagach.
Istnieje kilka innych metawartości name, ale te, które omówiliśmy, są najczęstsze. Oprócz deklarowania różnych wartości theme-color w przypadku różnych zapytań o multimedia umieść tylko po jednym tagu meta. Jeśli musisz użyć więcej niż jednego typu metatagów, aby zapewnić obsługę starszych przeglądarek, wartości starszego typu powinny znaleźć się po nowszych wartościach, ponieważ klienty użytkownika czytają kolejne reguły, aż znajdą dopasowanie.
Otwórz wykres
Protokoły Open Graph i podobne metatagi pozwalają kontrolować sposób wyświetlania linków do Twoich treści w witrynach mediów społecznościowych, takich jak Twitter, LinkedIn i Facebook. Jeśli ich nie podasz, witryny mediów społecznościowych poprawnie odczytają tytuł i opis z metatagu „opis”, czyli takie same informacje jak w wyszukiwarkach, ale możesz celowo określić to, co użytkownicy mają widzieć po opublikowaniu linku do Twojej witryny.
Gdy opublikujesz link do MachineLearningWorkshop.com lub web.dev na Facebooku lub Twitterze, pojawi się karta z obrazem, tytułem i opisem witryny. Cała karta jest hiperlinkiem do podanego adresu URL.
Metatagi Open Graph mają po 2 atrybuty: atrybut property zamiast atrybutu name oraz treść lub wartość tej właściwości. Atrybut property nie jest zdefiniowany w oficjalnych specyfikacjach, ale jest powszechnie obsługiwany przez aplikacje obsługujące protokół Open Graph. Utworzenie atrybutów „nowych”, takich jak property, gwarantuje, że wartości atrybutów utworzone dla atrybutu protokołu nie kolidują z przyszłymi wartościami atrybutów name lub http-equiv.
Utwórz kartę mediów Facebooka:
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
Dodaj tytuł posta do wyświetlenia. Tytuł ten jest zazwyczaj wyświetlany pod obrazem i nad opisem. Opis powinien zawierać maksymalnie 3 zdania, które podsumowują posta. Pojawi się po nagłówku zdefiniowanym w og:title. Podaj bezwzględny URL obrazu banera, który chcesz wyświetlać, wraz z protokołem https://. Umieszczając obraz w kodzie HTML, zawsze dodawaj alternatywny opis tekstowy dla obrazu, nawet jeśli obraz będzie wyświetlany w innym miejscu. W przypadku kart mediów społecznościowych Open Graph jako wartość treści właściwości og:image:alt określ alt. Możesz też podać kanoniczny URL za pomocą tagu og:url.
Wszystkie te metatagi są zdefiniowane w protokole Open Graph. Powinny one być treściami, które ma wyświetlać aplikacja internetowa innej firmy.
Inne media społecznościowe mają podobną składnię, na przykład znaczniki kart na Twitterze. Pozwala to zapewnić różne wrażenia w zależności od tego, gdzie pojawia się link, lub włączyć śledzenie linków przez dodanie parametru na końcu adresu URL.
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
W przypadku Twittera, aby zapewnić, że wartość atrybutu name nie koliduje z przyszłymi specyfikacjami, w przypadku danych kart na Twitterze zamiast nowego atrybutu, takiego jak property w Open Graph, wszystkie wartości nazw mają przedrostek twitter:.
Możesz zobaczyć, jak Twoja karta w mediach społecznościowych będzie wyglądać na Twitterze i Facebooku.
Możesz mieć różne obrazy kart, tytuły i opisy dla różnych witryn mediów społecznościowych lub dla różnych parametrów linków. Na przykład strona https://perfmattersconf.com ustawia różne wartości og:image, og:title i og:description w zależności od parametru adresu URL.
Jeśli w narzędziu Twitter's Card Verification wpiszesz https://perfmattersconf.com?name=erica i https://perfmattersconf.com?name=melanie, zobaczysz te 2 różne karty. Udostępniliśmy różne treści, mimo że obie zawierają linki do tej samej strony głównej konferencji.
Inne przydatne metainformacje
Jeśli ktoś doda Twoją witrynę do zakładek, doda ją do ekranu głównego lub jeśli jest to progresywna aplikacja internetowa albo w inny sposób działa w trybie offline lub bez wyświetlania funkcji przeglądarki Chrome, możesz umieścić ikony aplikacji na ekranie głównym urządzenia mobilnego.
Za pomocą tagu <link> możesz tworzyć linki do obrazów początkowych, których chcesz użyć. Oto przykład dodania kilku obrazów z zapytaniami o multimedia:
<link rel="apple-touch-startup-image" href="icons/ios-portrait.png" media="orientation: portrait" />
<link rel="apple-touch-startup-image" href="icons/ios-landscape.png" media="orientation: landscape" />
Jeśli Twoja witryna lub aplikacja obsługuje aplikacje internetowe, czyli może funkcjonować samodzielnie przy minimalnym interfejsie (np. bez przycisku Wstecz), możesz użyć metatagów, aby poinformować przeglądarkę, że:
<meta name="apple-mobile-web-app-capable" content="yes" />
<meta name="mobile-web-app-capable" content="yes" />
Uwzględnij je tylko wtedy, gdy aplikacja rzeczywiście ją obsługuje. Jeśli nie, będziesz konfiguracji swoich najwierniejszych zwolenników, czyli osób, które dodały ją do ekranu głównego, przez co mogą poprawić komfort korzystania z witryny. Stracisz ich miłość!
Jeśli ktoś ma zapisać Twoją ikonę na ekranie głównym małego urządzenia, nadaj systemowi operacyjnemu krótką nazwę, która nie zajmuje dużo miejsca na ekranie głównym małego urządzenia. Możesz to zrobić, dodając metatag lub korzystając z pliku manifestu internetowego. Poniżej przedstawiamy metodę z użyciem metatagów:
<meta name="apple-mobile-web-app-title" content="MLW" />
<meta name="application-name" content="MLW" />
Omówiliśmy kilka metatagów, z których każdy wydłuży nagłówek. Jeśli rzeczywiście tworzysz progresywną aplikację internetową, która obsługuje aplikacje internetowe i działa w trybie offline, zamiast dodawać te 2 dodatkowe metatagi, możesz łatwiej i zwięźle umieścić tag short_name: MLW w pliku webmanifest.
Plik manifestu może zapobiec wyświetlaniu nieporęcznego nagłówka pełnego tagów <link> i <meta>. Możemy utworzyć plik manifestu. Zwykle ma on nazwę manifest.webmanifest lub manifest.json. Następnie używamy poręcznego tagu <link> z atrybutem rel ustawionym na manifest oraz atrybutem href ustawionym na adres URL pliku manifestu:
<link rel="manifest" href="/mlw.webmanifest" />
Ta seria dotyczy głównie języka HTML, ale możesz też zapoznać się z kursem web.dev na temat progresywnych aplikacji internetowych lub dokumentacją MDN na temat pliku web app manifest.
Twój kod HTML wygląda teraz mniej więcej tak:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>Machine Learning Workshop</title>
<meta name="viewport" content="width=device-width" />
<meta name="description" content="Register for a machine learning workshop at our school for machines who can't learn good and want to do other stuff good too" />
<meta property="og:title" content="Machine Learning Workshop" />
<meta property="og:description" content="School for Machines Who Can't Learn Good and Want to Do Other Stuff Good Too" />
<meta property="og:image" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta property="og:image:alt" content="Black and white line drawing of refrigerator, french door refrigerator, range, washer, fan, microwave, vaccuum, space heater and air conditioner" />
<meta name="twitter:title" content="Machine Learning Workshop" />
<meta name="twitter:description" content="School for machines who can't learn good and want to do other stuff good too" />
<meta name="twitter:url" content="https://www.machinelearningworkshop.com/?src=twitter" />
<meta name="twitter:image:src" content="http://www.machinelearningworkshop.com/image/all.png" />
<meta name="twitter:image:alt" content="27 different home appliances" />
<meta name="twitter:creator" content="@estellevw" />
<meta name="twitter:site" content="@perfmattersconf" />
<link rel="stylesheet" src="css/styles.css" />
<link rel="icon" type="image/png" href="/images/favicon.png" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/fr/" hreflang="fr-FR" />
<link rel="alternate" href="https://www.machinelearningworkshop.com/pt/" hreflang="pt-BR" />
<link rel="canonical" href="https://www.machinelearning.com" />
<link rel="manifest" href="/mlwmanifest.json" />
</head>
<body>
<!-- <script defer src="scripts/lightswitch.js"></script>-->
</body>
</html>
Tekst jest dość długi, ale jest gotowy.
Teraz gdy model <head> jest już gotowy, możesz przejść do semantycznego kodu HTML.
Sprawdź swoją wiedzę
Sprawdź swoją wiedzę o metadanych
Dyrektywa odświeżania pragma.
Metatagi Open Graph.