Подтвердить что ты не робот

HTML <head> лучшие практики

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

4b9b3361

ОТВЕТЫ

Ответ 1

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

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

Все теги должны соответствовать стандарту W3C. Сайт W3C содержит более подробный о разделе HTML <head>.

Ответ 2

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

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

Ответ 4

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

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

Qaru - HTML head best practices

становится переполнение стека... (сбрасывается, чтобы сохранить место в панели вкладок/списке закладок)

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

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

Также метатег "рейтинга" с "общим" фильтром Net Filtering знает, что ваш сайт безопасен для зрителей всех возрастов (если это так, конечно!)

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

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

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

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

Ответ 5

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

<!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>

Ответ 6

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

Ответ 7

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

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

<!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>

Ответ 8

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

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

<!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 важен для обеспечения строгого режима рендеринга (без режима quirks) браузером. Вместо этого вы можете использовать XHTML - пока есть один. Я добавляю авторские права и автор исключительно потому, что я разрабатываю и создаю страницы для других компаний. Описание предназначено для SEO, а язык - для браузера (если он его поддерживает).

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

Ответ 9

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

Получение заголовка страницы, однако, имеет чрезвычайно важное значение.

Ответ 10

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

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

Ответ 12

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

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

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

и др.