Лучшие практики HTML <head> [закрыто]
Вопрос
Есть <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" />
и т. д.