Занимательные элементы в контейнере <HEAD>

Хотелось бы сегодня поговорить об элементах, которые могут быть заключены в контейнер <HEAD>. Многие веб-разработчики часто игнорируют многие из них, считая чем-то второстепенным. А зря, потому что на сегодняшний день в умелых руках они могут превратиться в мощные инструменты, которые могут как повысить скорость работы сайта, так и обеспечить его взаимодействие с различными веб-сервисами и поисковыми движками.

Итак, поехали.

DNS prefetching

Это относительно молодая технология, которая позволяет делать предзагрузку контента в фоновом режиме. Довольно клевая штука, если подойти к ней с правильной стороны. Ее смысл сводится к следующему — пока пользователь находится на странице и мощности компьютера простаивают вхолостую, можно самостоятельно указать для загрузки либо статическое изображение, либо js-библиотеку, либо целую страницу, которые теоретически понадобятся этому пользователю для дальнейшей работы с сайтом. Очевидно, что эта техника в разы может повысить скорость открытия страниц в пределах сайта.

Для примера, вот несколько вариантов использования:
— ваш сайт открывается красивой сплеш-страницей, и пока посетитель ее рассматривает — грузим в фоне ваш index.html;
— у вас есть обзорная статья какого-нибудь девайса, состоящая из нескольких страниц. Пока пользователь изучает первую страницу, тихо в фоне подгружаем все, что может понадобиться для следующей.

Если коснуться синтаксиса, то он довольно прост:

<link rel="dns-prefetch" href="//any-site.com" />
<link rel="dns-prefetch" href="//ajax.googleapis.com" />

В теории, можно делать любое количество таких подключений, при чем рекомендуется это делать сразу после элемента Meta Charset (который в свою очередь должен быть в самом верху), таким образом браузер сможет обработать их максимально быстро.

Технология DNS prefetching появилась в Firefox 3.5, пользователи девелоперской ветки Chrome могли впервые заметить ее в 13й версии Chromium, Microsoft внедрила ее в своем IE9

В последних версиях популярных браузеров DNS prefetching включено автоматически.
При желании предзагрузку можно отключить. Для этого можно воспользоваться следующим мета-тегом:

<meta http-equiv="x-dns-prefetch-control" content="off" />

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

Facebook Open Graph Data

Когда пользователь делится ссылкой на свой сайт в сети Facebook, то по умолчанию рядом с ссылкой выводятся последние заголовок, абзац и изображение с главной страницы этого сайта.
Это выглядит примерно вот так:

Так вот, при желании этот контент можно контролировать, указав самостоятельно те элементы, которые наиболее релевантны вашему видению сайта. Ниже можно увидеть самые популярные параметры, которые можно задать.

<meta property="og:title" content="" />
<meta property="og:description" content="" />
<meta property="og:image" content="" />

По этой ссылке на Facebook Open Graph documentation можно найти дополнительные средства контроля контента, передаваемого Фейсбуку.

IE9 Pinned Sites

С появлением ИЕ9 появилась возможность закреплять страницы вашего сайта в Панели Задач Windows (Windows Taskbar) и в Стартовом Меню (Start Menu). Эта возможность принесла ряд новых опций, которые можно настроить по своему вкусу. Подробная официальная документация доступна здесь: http://msdn.microsoft.com/ru-ru/library/gg131029.aspx

Несколько интересных возможностей:

Задаем название закрепленной вкладки

<meta name="application-name" content="Sample Title" />

Если не задать свое название, вкладка будет называться так же, как сайт (а если точнее — то что указано в его теге <TITLE>)

Задаем текст всплывающей подсказки-тултипа для закрепленной вкладки:

<meta name="msapplication-tooltip" content="Some description of what this site does." />

Ну, вы в курсе — небольшой текстовый блок, который всплывает по наведении на иконку закрепленной вкладки

Определяем страницу, которая закрепится по-умолчанию в панели задач при добавлении туда вашего сайта:

<meta name="msapplication-starturl" content="http://www.example.com/index.html?pinned=true" />

Это может понадобиться, если сайт должен открывать определенную страницу по клику на закрепленную вкладку (например, хомяк)

Перекрашиваем вручную контролы Internet Explorer:

<meta name="msapplication-navbutton-color" content="#f00" />

IE9 автоматически назначает общий цвет на кнопки навигации браузера. Выбирается цвет, преобладающий в favicon вашего сайта, однако этот цвет можно назначить вручную. Можно использовать стандартные названия цветов («red») или hex-значения («#f00»).

В качестве примера можно посмотреть, как это реализовано на сайте Яндекса:

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

Задаем размер окна, в котором будет открываться закрепленная вкладка:

<meta name="msapplication-window" content="width=800;height=600" />

Это может понадобиться, если требуется открывать страницу со строго определенным размером. Минимальный размер — 800×600.

Jump List («Задачи»)

Еще одна полезная возможность. При нажатии правой клавишей на закрепленную вкладку можно вызвать список отдельных страниц (задач). Для каждого из элементов списка можно определить свое название, иконку и определенный URL, который будет ссылаться на соответствующую страницу. Иконки по сути являются стандартными favicon с размером 16×16.

<meta name="msapplication-task" content="name=Task 1;action-uri=http://host/Page1.html;icon-uri=http://host/icon1.ico" />
<meta name="msapplication-task" content="name=Task 2;action-uri=http://microsoft.com/Page2.html;icon-uri=http://host/icon2.ico" />

Опять же, вот вам в качестве примера сайт Яндекса, где это дело реализовано в самом лучшем виде:

Поисковые плагины в Firefox и IE

Сайты с внутренним поиском могут быть объеденены с поисковым плагином браузера. Поисковый плагин — это по сути XML файл, в котором описано то, как ваш плагин должен взаимодействовать с браузером.

<link rel="search" title="" type="application/opensearchdescription+xml" href="" />

Почитать подробнее о данной технологии можно здесь

Убираем IE6 Image Toolbar

IE6 практически умер, но память о нем живет :) Думаю, многие помнят раздражающий всплывающий тулбар над изображением, появляющийся при наведении мышки. Так вот, от него можно избавиться с помощью следующего мета-тега:

<meta http-equiv="imagetoolbar" content="false" />

Официальный Shortlink

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

<link rel="shortlink" href="ya.ru" />

На данный момент этот стандарт поддерживается слабо. Прочитать о нем больше можно на Microformats wiki.

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

(хотя в теории хорошие СЕОшники должны знать их по-дефолту и так :) )

Canonical URL

<link rel="canonical" href="" />

Еще одно средство для работы с поисковыми движками. С помощью Canonical URL можно задать более чистый URL для индексации. Эта техника может быть полезна для тех страниц, в ссылках которых используются какие-либо параметры после символов # или ?

Например, ссылка:

http://www.example.com/cart.html?shopping-cart-open=true

может выглядеть для поисковых систем более аккуратно:

http://www.example.com/cart.html

Прямое указание поисковым паукам на ваш Sitemap:

<link rel="sitemap" type="application/xml" title="Sitemap" href="/sitemap.xml" />

Прячем страницы от поисковиков:

Иногда требуется, чтобы некоторые страницы не индексировались (например, страницы с формами или конфиденциальными данными). Для этих целей можно использовать следующий мета-тег:

<meta name="robots" content="noindex" />

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

Одно мнение о Занимательные элементы в контейнере <HEAD>

  1. Pingback: Полезные элементы в контейнере для мобильных сайтов | frontender.com.ua

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *