Лучшие практики HTML <head> [закрыто]

https://stackoverflow.com/questions/275631

07-07-2019
|

Вопрос

Есть <meta> теги и другие вещи, которые вы можете разместить в <head> вашего HTML-документа.Что <meta> теги и т. д.и лучшие практики, которые вы используете в своем HTML-документе, чтобы сделать его более доступным, доступным для поиска, оптимизированным и т. д.

Решение

В моем случае:

Заголовок (для лучшего SEO следует использовать [Название раздела — Название сайта])
Метатег для Content-type, description, и keywords
Ссылка на таблицу(и) стилей (не забудьте указать media="").
<script> тег, который ссылается на внешние файлы JavaScript.

Все теги должны соответствовать стандарту W3C.На сайте W3C есть более техническая и подробная информация. раздел о HTML <head> раздел.

Другие советы

Сделайте одолжение своим пользователям и переключите их движок IE на Chrome, когда Chrome Frame установлен:)

<meta http-equiv="X-UA-Compatible" content="chrome=1">

Вы захотите поместить элементы SCRIPT в конец страницы до закрытия элемента BODY. См. http://developer.yahoo.com/performance/rules.html#js_bottom для деталей.

Помимо обычного типа документа, названия и т. д., я постараюсь рассказать вам о некоторых вещах, которые я изучил и реализовал, которые могут вам помочь.

Во-первых, помните, что заголовок, для лучшего пользовательского опыта, должен сначала иметь самый соответствующий подраздел. Это связано с тем, что оно обычно отображается в строке заголовка / списке вкладок / имени закладки. Считайте этот заголовок страницы ...

Stack Overflow - HTML head best practices

становится переполнением стека ... (для экономии места на панели вкладок / в списке закладок)

Теперь, если у вас открыто 5 вкладок Stackoverflow (как я часто это делаю: P), то как бы пользователь узнал, какая из них какая?

Также обратите внимание на каскадную природу CSS ... Так что порядок их будет иметь значение. То же самое с Javascript, любые зависимости от других внешних сайтов должны быть разрешены. Я положил свой в голову и не заметил снижения производительности. Я положил их туда, потому что для меня это выглядит более аккуратно и логично. Хотя некоторые другие люди рекомендуют размещать ссылки < script src = " > непосредственно перед < / body > , чтобы браузер временно не зависал ... Просто используйте все, что лучше всего подходит для вашего сайта.

Кроме того, метатег «рейтинг» с «общим» дает программному обеспечению Net Filtering знать, что ваш сайт безопасен для зрителей всех возрастов (если, конечно, это так!)

Я также использую ..

<link rel="start" href="/" title="Home" />

сообщить браузеру, где находится мой сайт. И для любых систем предварительной загрузки браузера, хотя я считаю, что они еще не реализованы браузерами без помощи плагинов.

Также рассмотрите 'next' и 'prev' < link rel = " " > , если ваши страницы находятся в определенной последовательности.

Сначала убедитесь, что < ! DOCTYPE - самый первый элемент документа, то есть без пробела, табуляции или поврежденного маркера спецификации.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <!-- declare all page rendering and programmatic related tags -->
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <!-- Care about IE ? -->
    <meta http-equiv="X-UA-Compatible" content="chrome=1">
    <!-- globalise scripting and styling content language  -->
    <meta name="Content-Type-Script" content="text/javascript" />
    <meta name="Content-Type-Style" content="text/css" />
    <!-- title tag is MANDATORY -->
    <title>Short and relevant, about 64 characters/spaces</title>
    <!-- declare all CACHE controll -->
    <meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
    <meta name="revisit-after" content="7 days" />

    <!-- declare all content description tags -->
    <meta http-equiv="PICS-Label" content='(PICS-1.1 "http://www.gcf.org/v2.5" labels on "1994.11.05T08:15-0500" until "1995.12.31T23:59-0000" for "http://w3.org/PICS/Overview.html" ratings (suds 0.5 density 0 color/hue 1))'>
    <!-- language specific keywords -->
    <meta name="keywords" lang="en-us" content="vacation, Greece, sunshine" />
    <!-- For french example -->
    <meta name="keywords" lang="fr" content="vacances, Grèce, soleil" />
    <meta name="description" content="about 255 characters/spaces WORDS relevant to the content of the actual page" />
    <meta name="Abstract" content="about 96 characters/spaces PARAGRAPH describing the actual page content within your site" />

    <!-- declare all situationnal and external relativity related tags -->
    <link rel="DC.identifier" type="text/plain" href="http://www.ietf.org/rfc/rfc1866.txt" />
    <link rel="start" href="/" title="Home" />
    <link rel="prev" href="../" title="Parent section" />

    <!-- declare all page rendering cascading style sheets in order of incidence -->
    <link rel="stylesheet" type="text/css" href="globaly-used.css" />
    <link rel="stylesheet" type="text/css" href="specificly-used.css" />
    <!-- declare all page rendering specific cascading style i.e. IE only, hacks etc -->
    <link rel="stylesheet" type="text/css" href="more-specificly-used.css" />
    <link rel="stylesheet" type="text/css" href="i-love-ie.css" />

    <!-- not relevent to subject, declare all javascripts AFTER css linking -->

</head>
<body>
</body>
</html>

Я не увидел упомянутое: тег < base > , если он указан, должен быть первым элементом в < head > . (Предполагается, что базовый URI документа равен . перед /, если не указан.)

ИМХО, двумя наиболее важными дочерними тегами < head > являются < title > и метатег Content Type. Поисковые системы активно просматривают < title > . Тогда как другие метатеги часто игнорируются. Как многоязычный веб-пользователь - я не могу больше подчеркнуть важность добавления тега типа контента, потому что без него браузер должен автоматически определять набор символов веб-страницы, и эта операция часто бывает некорректной. В результате получается, что различные символы отображаются неправильно для пользователя, а иногда и вовсе отсутствуют в случае японского или китайского языков.

Вот фрагмент кода заголовка текущего моего проекта:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Reports Blah Blah</title>
<meta name="ROBOTS" content="NOINDEX, NOFOLLOW" />
<meta http-equiv="content-type" content="application/xhtml+xml; charset=UTF-8" />
...
</head>

Здесь есть связанный вопрос здесь , который может помочь немного осветить порядок тегов.

Обычно мои страницы содержат следующее:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
    <title>...</title>
    <meta name="Description" ...>
    <meta name="Keywords" ...>
    <meta name="Copyright" ...>
    <meta name="Author" ...>
    <meta name="Language" ...>
    <style type="text/css" ...>

DocType важен для обеспечения строгого рендеринга (без режима причуд) браузером. Возможно, вы захотите использовать XHTML вместо этого, если он там есть. Я добавляю Copyright и Author исключительно потому, что я проектирую и создаю страницы для других компаний. Описание для SEO, а язык для браузера (если он его поддерживает).

Я не верю, что во многом зависит, какой метатег стоит первым или стоит ли заголовок выше. В большинстве случаев важно то, что он существует на странице и имеет правильное содержание.

Насколько мне известно, большинство поисковых систем игнорируют любые " ключевые слова " или "описание" вместо метатегов, предпочитая читать содержимое документа.

Однако правильное определение названия страницы крайне важно.

Заголовок, метатеги для ключевых слов, тип контента (если это явно не установлено веб-сервером) и любой CSS, который будет применен к странице.

Объявление CSS заранее позволяет браузеру более эффективно размещать страницу (см. http://developer.yahoo.com/performance/rules.html#css_top ).

Я бы добавил важное примечание: если вы используете тег IE meta X-UA-Compatible для переключения режимов рендеринга для Interet Explorer, вы должны вставить его как первый элемент в HEAD:

<head>
  <meta http-equiv="X-UA-Compatible" content="IE=7" />
  <title>Page title</title>
  ...etc
</head>

В дополнение к ответам выше я использую Мета-теги инициативы Dublin Core.

Они очень полезны для реального контента/документов и т. д.

<meta name="DC.abstract" content="Document abstract" />
<meta name="DC.audience" content="Target audience" />

и т. д.

Лицензировано под: CC-BY-SA с атрибуция

Не связан с StackOverflow