META Тэги | Обзор полезных наворотов

Последняя активность
Файлы топика
Тема закрыта
582
.
AlkatraZ
19 янв 2015 г., 20:46
Изменено
╭∩╮ (`-`) ╭∩╮
Решил продолжить цикл статей про системные дела.
И таки решил написать статью про всякие полезные META тэги.
На форуме уже часто задают вопросы: "что надо, что лишнее" и так далее...
У меня уже скопилось огромное к-во материала по этой теме, думаю пора поделиться исследованиями
---
Сразу хочу предупредить, что все, о чем я буду писать ниже, НЕ ЯВЛЯЕТСЯ обязаловкой! То есть, не надо сломя голову кидаться запиливать все себе на сайт. В начале подумайте, нужно ли это? Если нужно - ставьте. Если сомневаетесь - просто почитайте и осмыслите суть.

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

Обсудить тему и предложить свое мнение (и код) можно тут: http://johncms.com/forum/index ... =1123
==========
Полезные статьи:
Хорошая подборка всевозможных мета-тэгов
Отличная статья про контейнер <head>
Что такое Viewport
HTML по стандартам
.
AlkatraZ
19 янв 2015 г., 21:05
Изменено
╭∩╮ (`-`) ╭∩╮
Итак, начнем
Для чистоты эксперимента мы должны взять некоторые исходные данные.
У нас будет HTML5 страница. Что это такое и как ним правильно работать - это отдельная тема, Гугл Вам в помощь.

Но нам понадобится некоторый "каркас" для наших начинаний.
Итак, вот он:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
</body>

Не обращайте внимание, что код начинается с РНР, это наш парсер не умеет по другому
Но тем не менее, все будет понятно.

<html lang="ru">
Тут вместо "ru" указываете основной язык Вашего сайта. Обратите внимание, что атрибут lang можно указывать и для других элементов сайта. К примеру, у Вас может быть двухколоночная верстка, в одной колонке Английский, в другой Русский. Вы можете для контейнера каждой из колонок указать нужный язык (разумеется двухбуквенный ISO код).
То, что мы присвоили атрибут lang корневому элементу - это в целом, указать на каком языке наш сайт. Если укажете "en", а Ваш сайт на Русском, ничего страшного не произойдет, документ все равно в UTF-8 и поддерживает любые языки.
Но тем не менее, некоторые различия есть. Например, для русского, немецкого и английского языка характерны разные кавычки, в которые берется цитата. Браузер использует его значение для правильного отображения некоторых символов. Кроме того, онлайн переводчики тоже активно используют атрибут lang

Ну и разумеется, раз статья про META тэги, надо упомянуть один обязательный для HTML5 - это указание кодировки UTF-8
.
AlkatraZ
19 янв 2015 г., 21:10
╭∩╮ (`-`) ╭∩╮
<meta name="keywords" content="ключевые слова">

Ключевые слова (или фразы) разделяются запятыми. Данный мета-тег поисковые системы используют для того, чтобы определить релевантность ссылки. При формировании данного тега желательно использовать только те слова, которые содержатся в самом документе. Использование тех слов, которых нет на страницах сайта, не рекомендуется. Рекомендованное количество слов в данном теге — не более десяти. Кроме того, выявлено, что разбивка этого тега на несколько строк влияет на оценку ссылки поисковыми машинами.
.
AlkatraZ
19 янв 2015 г., 21:11
Изменено
╭∩╮ (`-`) ╭∩╮
<meta name="description" content="Описание">

Данный тег используется при создании краткого описания страницы, используется поисковыми системами для индексации, а также при создании аннотации в выдаче по запросу. При отсутствии тега поисковые системы выдают в аннотации первую строку документа или отрывок, содержащий ключевые слова. Отображается после ссылки при поиске страниц в поисковике. Разные поисковые системы устанавливают различные нормы для длины этого тэга. Старайтесь писать небольшое описание порядка 150 символов.
.
AlkatraZ
19 янв 2015 г., 21:15
╭∩╮ (`-`) ╭∩╮
Итого, пока у нас получилась классическая связка, с которой уже можно запускать сайт:
<!DOCTYPE html>
<html lang="ru">
<head>
    <meta charset="UTF-8">
    <meta name="keywords" content="ключевые слова">
    <meta name="description" content="Краткое описание страницы, или сайта">
    <title></title>
</head>
<body>
<h1>Hello, world!</h1>
</body>
</html>

Но мы пытаемся сделать крутой мобильный HTML5 шаблон, посему, читаем дальше...
.
AlkatraZ
19 янв 2015 г., 21:31
Изменено
╭∩╮ (`-`) ╭∩╮
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=2.0, user-scalable=yes">

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

viewport - это важнейший META тэг для разработчика мобильных сайтов. Впервые он появился на браузерах Айфонов, но теперь применяется практически повсеместно на мобильных дивайсах. Посему, если делаете что-то для устройств с маленькими экранами, данный тэг НАДО применять.

У тэга есть много возможных атрибутов, но в примере я указал самые важные (на мой взгляд).
Давайте рассмотрим их подробнее:

content="width=device-width
Данный параметр указывает, что контент сайта надо подогнать под ширину экрана

initial-scale=1.0
Мы указывает, что изначально не надо ничего масштабировать, браузер покажет Ваш сайт "как есть"

maximum-scale=2.0
Это необязательный атрибут. Указывает, насколько максимально можно масштабировать страницу.

user-scalable=yes"
Указывает, что пользователь может сам менять масштаб (на сенсорных дивайсах - пальцами). Многие в настройках запрещают масштабирование, однако я считаю это плохой практикой. К примеру: у человека плохое зрение и он хочет рассмотреть что-то подробнее, зачем ему это запрещать?

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

ИТОГ: ОБЯЗАТЕЛЬНО ставим.
.
AlkatraZ
19 янв 2015 г., 21:37
Изменено
╭∩╮ (`-`) ╭∩╮
<meta name="HandheldFriendly" content="True">

Мета-тег HandheldFriendly изначально поддерживался старыми моделями Palm и Blackberry, где использовались такие браузеры, как AvantGo. Там тег использовался для определения разметки, ориентированной на мобильные устройства. Сегодня этот мета-тег также распознается некоторыми мобильными браузерами и параметр “true” служит индикатором того, что на странице использована оптимизированная для мобильных устройств разметка. Кроме того, он служит директивой для того, чтобы веб-документ отображался без автоматического масштабирования.

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

ИТОГ: на всякий случай ставим
.
AlkatraZ
19 янв 2015 г., 21:48
Изменено
╭∩╮ (`-`) ╭∩╮
<meta name="MobileOptimized" content="width">

Мета-тег MobileOptimized был введен компанией Microsoft для того, чтобы контролировать ширину макета веб-страниц, которые рендерятся в браузере Internet Explorer Mobile. Контент мета-тега задается как целое число в пикселях. В IE Mobile наличие этого мета-тега принуждает страницу отображаться одной колонкой с заданной шириной, тем самым избавляясь от попыток браузера самостоятельно подогнать макет по размеру так, чтобы он помещался в экран. Кроме того, это позволяет избавиться от полосок горизонтальной прокрутки.
Некоторые мобильные не MS браузеры могут также использовать этот мета-тег для тех же целей.

На просторах инета блуждало мнение, что этот же тэг используют поисковики для определения, что сайт "мобильный". Но насколько мне известно, Google не обращает на это никакого внимания и не упоминается в их документации, что я читал. Вполне возможно, что раз тэг придумали в Майкрософте, их поисковик Bing учитывает MobileOptimized.
---
Подводя итоги следует сказать, что данный тэг можно не применять, его с успехом заменяет viewport.
Но тем не менее, одна небольшая строка нас сильно напрягать не будет, а доля мобильных браузеров IE хоть и не такая большая, но учитывать ее все же стоит.

ИТОГ: на всякий случай ставим
.
AlkatraZ
19 янв 2015 г., 22:01
╭∩╮ (`-`) ╭∩╮
<meta http-equiv="cleartype" content="on"/>

Mobile Internet Explorer позволяет принудительно активировать технологию ClearType для сглаживания шрифтов. В принципе, раз уж мы выше взялись за поддержку IE, можно добавить еще одну строчку. Но в то же время, пока это самый "необязательный" тэг из тех, что мы рассмотрели.

ИТОГ: применять не обязательно
.
AlkatraZ
19 янв 2015 г., 22:16
Изменено
╭∩╮ (`-`) ╭∩╮
<meta http-equiv="Cache-Control" content="[no-cache], [public], [private], [no-store], [no-transform], [must-revalidate], [proxy-revalidate], [max-age=n]">

Подробности описывать не буду, (отсылаю к статье, где все отлично разжевано: http://webanatomy.narod.ru/htm ... .html ), вместо этого лучше опишу свои субъективные суждения...

Я лично данный тэг не использую. К примеру, он не применяется ни в JohnCMS ни в mobiCMS, проблем пока вроде не замечено. Однако, я допускаю, что к примеру для статей библиотеки (или для других статичных вещей) можно указать принудительное кэширование, но сам лично пока не проверял насколько удобно.

Дополнительный нюанс может быть к примеру с заполнением форм в некоторых браузерах. Сами знаете, как действует на нервы, если набирал долго пост, случайно нажал не ту кнопку, жмешь "назад" - БАЦ, перед тобой пустая форма, твои тексты пропали. Я думаю, что можно поэкспериментировать с данным заголовком, самому пока некогда, но если кто-то займется и получит конкретные результаты (хоть положительные, хоть отрицательные), то мы обязательно дополним данную статью этими материалами.

ИТОГ: решайте сами
Всего: 10
© 2024, JohnCMS