Глава 10
В первой главе этого учебника, об общем построении html документа, я говорил о том, что все html документы должны иметь вот такой шаблон кода:
<html> — начало документа
<head> — начало головы
</head> — закрытие головы
<body> — начало тела
</body> — закрытие тела
</html> — конец документа
Где между тегами <body> </body> указывается информация предназначенная для вывода на экран в нужном нам виде, а между тегами <head> </head> исключительно служебная информация предназначенная для поисковых систем и браузеров тех или иных пользователей. Так что же это за информация такая и для чего она нужна? Отвечу, планомерно и порционально в этой главе.
С тегом <title> мы уже знакомы, с помощью него мы указываем имя документа в заголовке страницы. Теперь новый тег <meta> (закрывающего тега не требует) с помощью него мы и будем указывать эту самую служебную информацию на нашей страничке.
<meta> тег имеет следующие атрибуты:
- http-equiv — указывает браузеру как следует обработать основное содержание документа, точнее на основе каких данных.
- name — информационное имя. (применяется в паре с атрибутом content)
- content — информационное содержание, связанное с мета именем (name)
Теперь на примерах будем вникать в суть дела.
Кодировка символов и язык
Пример (очень нужный и важный):
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
Сначала расскажу зачем необходима эта строка в заголовке html документа. Данная запись указывает браузеру кодировку в которой была написана данная страница — формат документа и раскладку клавиатуры, в данном случае это кириллица для Windows. Если эту строку не писать в заголовке страницы, то есть большая вероятность что весь текст на Вашей странице отобразится в виде непонятных человеку «иероглифов» у разных пользователей тех или иных браузеров. Конечно, пользователь может применить к такому документу команду в браузере Вид->Кодировка->Кириллица, но он может не знать о данной функции, да и зачем утруждать человека данным действием.
Теперь разберём по «слогам» нашу запись:
<meta http-equiv=»Content-Type» — указываем что в этом мета теге мы будем заниматься Content-Type — типом содержания
Content=»text/html; — а именно его текстом
Charset=Windows-1251″> — документ для Windows — Кириллица где 1251 кодировка раскладки клавиатуры, так например Английская клавиатура будет задаваться Charset=Windows-1252
В настоящее время продвинутые веб-мастера рекомендуют использовать кодировку UTF 8
То есть писать в голове документа вот так:
<meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″>
Пример:
<meta http-equiv=»Content-Language» Content=»ru»>
В этой строчке говорится о том что язык Language документа является русским Content=»ru»
Неправильная установка языка и раскладки клавиатуры может привести к печальным последствиям.
Информация о документе
Пример:
<meta name=»author» Content=»Остап Бендер»>
<meta name=»copyright» Content=»»Рога и копыта» Остап Бендер»>
Данные метаописатели предназначены для заявления об авторских правах непосредственно в заголовке html кода, так name=»author» указывает имя автора страницы, а name=»copyright» авторское право (копирайт) в котором может указываться фамилия, имя, отчество автора сайта, название фирмы, бренда.. и т. д. Кроме того включив в заголовок документа такое описание Вы значительно упростите задачу поисковой машине при поиске Вашего сайта по имени автора, названию фирмы, бренду…
Пример:
<meta name =»Generator» Content=»Microsoft Notepad»>
Если хотите можете указать с помощью какого html редактора была написана данная страница.
Описание страницы и ключевые слова
Пример:
<meta name=»description» Content=»Производим закупку по выгодным ценам рогов и копыт!»>
Description — краткое описание страницы. Данное описание частенько используется поисковыми системами для вывода в результатах поиска, по какому либо запросу, информации о сайте и его назначении.
Пример:
<meta name=»keywords» Content =»рога, копыта, рожки, рог, копыто, копытце, закупка, покупка, приобретение, выгодно, продать, купить, сбыть, реализовать, корова, бык, коровьи, бычьи, оплата, деньги, наличные, цена, цене»>
Keywords — ключевые слова веб-страницы, опять таки предназначены для поисковых машин.
Представьте что Вы ищете в какой либо поисковой системе сайт с информацией о том где можно продать те же рога и копыта 
Какие слова и фразы Вы будите вводить в строке «Поиск»? ну наверно что то типа: «Где продать коровьи рога?» или «Реализовать копыта по выгодной цене» Так вот если определить ключевые слова и так сказать предугадать мысли потенциального посетителя можно надеяться на то, что та или иная поисковая система выдаст ссылку на Ваш сайт в первых строчках результата поиска. Конечно ввод данного метоописателя не есть гарант того что именно Ваш сайт займет первые места в поиске по данным словам, но всё же не стоит им пренебрегать. Впрочем, оптимизация и раскрутка сайта это отдельная тема для разговора.
Помните что описание description не должно превышать по длине более 200 символов, а ключевые слова keywords 1000 символов, иначе это может пагубно отразится при продвижении Вашего сайта в ТОП поисковых систем.
Адрес
Пример:
<meta name=»Publisher-Email» Content=»Ваш_e-mail@сервер.домен»>
<meta name=»Publisher-URL» Content=»http://www.Ваш_сайт/»>
Думаю понятно.. здесь указывается адрес Вашего почтового ящика Publisher-Email и адрес сайта Publisher-URL
Обновление страницы
Пример:
<meta name =»revisit-after» Content=»15 days»>
Если некая страница на Вашем сайте подразумевает постоянное обновление и/или дополнение информационным содержанием, то хорошо было бы включить данное описание в заголовок данной страницы. Такое введение позволит программе роботу своевременно посещать Ваш сайт и индексировать его содержание. В нашем примере мы заявили о том, что собираемся обновлять содержание на странице не менее одного раза в 15 дней, можете не сомневаться программа робот возьмет Ваши планы себе на заметку и будет приходить «к Вам в гости» раз в пятнадцать дней, для того чтобы проверить ничего ли у Вас не изменилось..
Время действия документа и кэш
Пример:
<meta http-equiv=»expires» content=»Sun, 24 jan 2010 12:28:36 GMT+03:00″>
Для того чтобы ускорить загрузку страницы, а так же сэкономить трафик современные браузеры сохраняют посещаемые пользователем страницы в кэш (на жёсткий диск), и при повторном посещении загружают их не с сервера, а непосредственно с кэша. На самом деле такая функция хороша собой.. но есть одно «но», дело в том что в браузере может отображаться уже устаревшая информация, какой либо страницы. Представьте, к примеру, Ваш сайт представляет собой некое периодическое новостное интернет издание, а пользователь получит, вместо самых свежих новостей, уже устаревшую информацию, ту которая хранится у него в кэше!! и не разобравшись в чем «беда» примет Ваш сайт за «мертвый» заброшенный и никем не обновляемый.
Для того чтобы принудительно заставить браузер загружать ту или иную страницу не с жёсткого диска, а с сервера необходим мета тег с данным синтаксисом, где указывается день недели, число месяц год время (чч:мм:сс) и часовой пояс(GMT+03:00 — время Московское + три часа). День недели и время дня можно не указывать. Теперь при чтении страницы браузером страница будет грузится с сервера, если указанная дата и время настало или просрочено, и напротив из кэша если указанное время еще не наступило.
Ниже на всякий случай приведены таблицы сокращений от Английских слов на месяцы и дни недели
|
|
Атрибуту content можно присвоить значение «0» <meta http-equiv=»Expires» content=»0″> в этом случае страница всегда будет загружаться с сервера.
И еще.. некоторые поисковые роботы могут отказаться индексировать документ с заведомо устаревшей датой. — не искушайте судьбу..
Пример:
<meta http-equiv=»pragma» content=»no-cache»>
А такая запись вовсе запретит браузеру кэшировать данную страницу.
Команды для робота
Пример:
<meta name=»robots» content=»Index,follow»>
Данный мета тег предназначен для подачи поисковому роботу той или иной команды.
Список возможных команд роботу:
- Index — индексировать страницу
- Noindex — не индексировать страницу
- Follow — прослеживать гиперссылки на странице
- Nofollow — не прослеживать гиперссылки на странице
- All — индексировать страницу и прослеживать гиперссылки на странице (по умолчанию)
- None — не индексировать страницу и не прослеживать гиперссылки на странице
Автоматический переход на другую страницу
Пример:
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
Если вдруг по каким либо причинам Вы задумаете поменять URL адрес Вашего сайта то хорошо было бы на старом месте оставить страницу вроде этой:
<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
<title>Переадресация</title>
</head>
<body>
<font size=»+1″>
Адрес сайта был изменен, через 10 секунд Ваш браузер будет автоматически перенаправлен по новому адресу:<br>
<a href=»http://www.mysite.ru/index.html»><b>http://www.mysite.ru/</b></a><br>
Нажмите <a href=»http://www.mysite.ru/index.html»>здесь</a> для того чтобы выполнить переход немедленно.<br>
Приносим извинения за доставленные неудобства.
</font>
</body>
</html>
Разберём и осмыслим строчку из примера:
<meta http-equiv=»Refresh» content=»10; URL=http://www.mysite/index.html»>
meta http-equiv=»Refresh» — Refresh (восстановление) указывает браузеру что данную страницу необходимо обновить
content=»10; — обновить через заданное количество секунд (в нашем случае десять)
URL=http://www.mysite/index.html»— адрес новой/другой страницы на которую следует перейти.
Пример:
<meta http-equiv=»Refresh» content=»30″>
А вот если в заголовке Refresh URL адрес упустить, как показано в примере, то тогда браузер будет постоянно через каждые 30 секунд (ну или не 30.. сколько пропишите через столько и будет..) обновлять содержимое данной страницы.
Такой метод широко используется в новостных лентах, где информация идет так сказать потоком и требует постоянного обновления.
Эффекты при переходе по ссылке
Пример:
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=0)»>
<meta http-equiv =»Page- Exit » Content=»RevealTrans(Duration=3.0, Transition=23)»>
Данные заголовки создают визуальные эффекты при переходе с одной страницы на другую.
- Page-Enter — Эффект появления страницы
- Page- Exit — Эффект исчезновения страницы
В которых:
- Duration — время действия эффекта в секундах
- Transition — Один из номеров предлагаемых эффектов (от 0 до 23) перечисленных в таблице:
| Номер | Описание эффекта | Номер | Описание эффекта |
|---|---|---|---|
| 0 | Прямоугольники внутрь | 12 | Растворение |
| 1 | Прямоугольники наружу | 13 | Вертикальная панорама внутрь |
| 2 | Круг внутрь | 14 | Вертикальная панорама наружу |
| 3 | Круг наружу | 15 | Горизонтальная панорама внутрь |
| 4 | Наплыв наверх | 16 | Горизонтальная панорама наружу |
| 5 | Наплыв вниз | 17 | Уголки влево — вниз |
| 6 | Наплыв вправо | 18 | Уголки влево — вверх |
| 7 | Наплыв влево | 19 | Уголки вправо – вниз |
| 8 | Вертикальные жалюзи | 20 | Уголки вправо – вверх |
| 9 | Горизонтальные жалюзи | 21 | Случайные горизонтальные полосы |
| 10 | Шажки горизонтальные | 22 | Случайные вертикальные полосы |
| 11 | Шажки вертикальные | 23 | Случайный выбор эффекта |
Пример:
Файл page1.html
<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=1.0, Transition=12)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c5ffa0″>
<center>
<h2>На заметку:</h2>
<font size=»+1″>Эффекты перехода с одной страницы на другую работают не во всех браузерах.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page2.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>
Файл page2.html
<html>
<head>
<meta http-equiv=»Content-Type» Content=»text/html; Charset=Windows-1251″>
<meta http-equiv =»Page-Enter» Content=»RevealTrans(Duration=2.0, Transition=23)»>
<title>Эффекты перехода страниц</title>
</head>
<body bgcolor=»#c0e4ff»>
<center>
<h2>На заметку:</h2>
<font size=»+1″>Эффекты открытия и закрытия веб-страниц будут видны только при переходе <br>
от одной страницы к другой или же при помощи кнопок «назад» «вперёд». <br>
При первом открыти страницы, а также во время перезагрузки<br>
эффекты перехода видны не будут.</font><hr><br>
<font size=»+1″>Нажмите на «Перейти» чтобы перейти к следующей странице<br>
и оценить эффект перехода от одной странице к другой.</font><br><br>
<a href=»page1.html»><font size=»+2″>»Перейти»</font></a>
</center>
</body>
</html>
Полезные советы:
-
Ещё раз напомню о том что мета теги стоит применять умело и грамотно особенно это касается команд для робота и кодировки символов, иначе весь Ваш труд может пойти насмарку..
-
Заголовок Refresh (автоматический переход на другую страницу) можно использовать не совсем стандартно.. Некоторые авторы используют его для создания своего рода «презентации» слайд шоу, где сменяющиеся страницы и есть кадры презентации. Представьте заходит человек на такой сайт а тут ему «Откинетесь на спинку кресла и расслабьтесь..»:) а далее сами по себе пошли картинки, графики, тексты.. а последняя страница тупиковая где пользователь берёт сайт «в свои руки» или же может замыкаться на первую. Только всегда помните о золотом правиле веб-мастера: Главное не переборщить!
Главная » Основы HTML » Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20
Как указать кодировку сайта на HTML. Основы HTML для начинающих. Урок №20
Всем привет!
Продолжаем изучать основы HTML. В этом уроке мы разберем, как указать HTML кодировку для сайта (веб-страницы).
Этот урок очень важен, так как незнание того, как указать кодировку для веб-страницы может привести к тому, что вашу страницу не смогут прочитать. Вы спросите: «Это как так, не смогут?».
Давайте я покажу, как выглядит мой блог с неправильной кодировкой:
Ну как вам? Все ли смогли прочитать 
? Хотя, если постараться, то смысл сможете понять по картинкам. Но разве таким сайтом удержишь посетителя?
Итак, HTML кодировка – это таблицы соответствия кодов и символов алфавита. То есть, наш компьютер по кодировке поменяет код на понятные читабельные буквы 
.
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы, необходимо прописать между тегами <head></head> вот такой мета тег:
<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">
Обратите внимание, в коде есть слово «имя кодировки». Здесь нужно указать HTML кодировку.
Обычно это utf-8 или windows-1251.
Кодировка для utf-8:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Кодировка для windows-1251:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Если забыть указать браузеру, в какой кодировке сайт или веб-страница, то браузер попытается определить кодировку автоматически, но не всегда у него это выходит правильно. В итог результат будет такой, который я показал на картинке выше.
Переходим к практике.
Как создать HTML документ с
кодировкой utf-8
Открывайте стандартный блокнот. «Все программы» => «Стандартные» => «Блокнот»:
Далее вставляете в блокнот стандартный код HTML:
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами <head></head> вот этот мета-тег:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
Вот так должно получиться (строка №4):
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> </head> <body> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
Жмите в блокноте «Файл» => «Сохранит как…»:
Там, где пункт «Имя файла» напишите название веб-страницы на латинице и с расширением «.html». Я думю, вы это помните еще с первых уроков.
Там, где пункт «Кодировка:» укажите «UTF-8».
Жмите «Сохранить»:
Увеличить изображение?
Как создать HTML документ с кодировкой windows-1251
Открывайте стандартный блокнот. «Все программы» => «Стандартные» => «Блокнот».
Далее вставляете в блокнот стандартный код HTML:
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> </head> <body> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
Теперь указываем, в какой кодировке сохранена веб-страница. Для этого разместите между тегами <head></head> вот этот мета-тег:
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
Вот так должно получиться (строка №4):
<html> <head> <title> Моя первая HTML-страничка на StepkinBlog.ru</title> <meta http-equiv="Content-Type" content="text/html; charset=windows-1251"> </head> <body> Здравствуйте, это моя первая страница на StepkinBlog.ru. </body> </html>
Жмите в блокноте «Файл» => «Сохранит как…»:
Там, где пункт «Имя файла» напишите название веб-страницы на латинице и с расширением «.html». Я думю, вы это помните еще с первых уроков.
Там, где пункт «Кодировка:» укажите «ANSI».
Жмите «Сохранить»:
Вот и все!
Большинство вебмастеров выбирают кодировку UTF-8. Причины говорить не буду, так как боюсь нагрузить вас информацией, которая на вашем этапе познания HTML еще не нужна.
Для примера в блокнте установите код:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
И укажите при сохранении «ANSI»:
Так как это неправильно, результат будет вот таким:
Сохраняйте правильно ваши веб-страници во избежание вот таких результатов 
Метатеги используются для хранения информации предназначенной для браузеров
и поисковых систем. Например, механизмы поисковых систем обращаются к метатегам
для получения описания сайта, ключевых слов и других данных.
Метатеги для поисковых механизмов
Среди разработчиков сайтов существует мнение, что правильно написанные
метатеги позволяют подняться к верхним строчкам поисковых серверов.
На самом деле это не так, на одних метатегах высоко не поднимешься,
но и неудачно выполненное содержимое метатегов может ухудшить рейтинг
сайта.
Два метатега предназначены специально для поисковых серверов: description
(описание) и keywords (ключевые слова). Некоторые
вебмастера добавляли в раздел keywords ключевые
слова, которые не имеют никакого отношения к теме сайта, но зато пользовались
определенным успехом среди посетителей поисковиков. Однако, через некоторое
время, поисковые системы научились бороться с таким явлением и проверяют содержимое
веб-страницы на соответствие заявленным ключевым словам.
Некоторые принципы, относящиеся к метатегам:
- не включайте ключевые слова, которые не содержатся на ваших страницах;
- не повторяйте ключевые слова;
- используйте метатеги по их прямому назначению;
- делайте описание и список ключевых слов различными для каждой страницы
сайта с учетом содержимого.
description
Большинство поисковых серверов отображают содержимое поля description
(пример 1) при выводе результатов поиска.
Если этого тега нет на странице, то поисковый движок просто перечислит первые
встречающиеся слова на странице, которые, как правило, оказываются не очень-то
и в тему.
Пример 1. Использование Description
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>description</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="description" content="Сайт об HTML и создании сайтов">
</head>
<body>
<p>...</p>
</body>
</html>keywords
Этот метатег был предназначен для описания ключевых слов, встречающихся на
странице (пример 2). Но в результате действия людей, желающих попасть в
верхние строчки поисковых систем любыми средствами, теперь дискредитирован.
Поэтому многие поисковики пропускают этот параметр.
Пример 2. Использование Keywords
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>keywords</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="Keywords" content="HTML, META, метатег, тег, поисковая система">
</head>
<body>
<p>...</p>
</body>
</html>Ключевые слова можно перечислять через пробел или запятую. Поисковые системы
сами приведут запись к виду, который они используют.
Автозагрузка страниц
Чтобы автоматически загружать новый документ через определенный промежуток
времени используется инструкция http-equiv=»refresh»
(пример 3).
Пример 3. Автозагрузка страницы
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Автозагрузка</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta http-equiv="refresh" content="5; URL=http://www.htmlbook.ru">
</head>
<body>
<p>...</p>
</body>
</html>Браузер поймет эту запись, как ожидать 5 секунд, а затем загрузить новую страницу,
указанную в параметре URL, в данном случае это переход на сайт htmlbook.ru.
Этот метатег позволяет создавать перенаправление (редирект) на другой сайт.
Если URL не указан, произойдет автоматическое обновление текущей страницы через
количество секунд, заданных в атрибуте content.
Кодировка
Чтобы сообщить браузеру, в какой кодировке находятся символы веб-страницы,
необходимо установить параметр <meta http-equiv=»Content-Type»
content=»text/html; charset=имя кодировки»>. Для операционной системы
Windows и кириллицы charset обычно принимает
значение utf-8 или windows-1251 (пример 4).
Пример 4. Выбор текущей кодировки
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Кодировка</title>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1251">
</head>
<body>
<p>Кириллица</p>
</body>
</html>Если указание кодировки отсутствует, браузер пытается сам определить, какой
тип символов используется в документе и выбирает необходимую кодировку автоматически.
Браузер не всегда может точно распознать язык веб-страницы и в некоторых случаях
предлагает вьетнамскую кодировку вместо кириллицы. По этой причине лучше всегда
указывать приведенную строчку. Тем не менее, возникают обстоятельства, когда
указание кодировки может принести определенный вред. Например, веб-сервер автоматически
использует перекодирование данных в KOI-8, а браузер, встретив параметр charset=windows-1251,
переводит текст в кодировку Windows. Получается двойное изменение символов,
прочитать такой текст не просто. К счастью, подобная проблема уже отходит в
прошлое, во всяком случае, ее легко можно выявить и нейтрализовать на уровне
сервера.
Another reason to go with the short one is that it matches other instances where you might specify a character set in markup. For example:
<script type="javascript" charset="UTF-8" src="/script.js"></script>
<p><a charset="UTF-8" href="http://example.com/">Example Site</a></p>
Consistency helps to reduce errors and make code more readable.
Note that the charset attribute is case-insensitive. You can use UTF-8 or utf-8, however UTF-8 is clearer, more readable, more accurate.
Also, there is absolutely no reason at all to use any value other than UTF-8 in the meta charset attribute or page header. UTF-8 is the default encoding for Web documents since HTML4 in 1999 and the only practical way to make modern Web pages.
Also you should not use HTML entities in UTF-8. Characters like the copyright symbol should be typed directly. The only entities you should use are for the five reserved markup characters: less than, greater than, ampersand, prime, double prime.
Entities need an HTML parser, which you may not always want to use going forward. They introduce errors, make your code less readable, increase your file sizes, and sometimes decode incorrectly in various browsers depending on which entities you used. Learn how to type/insert copyright, trademark, open quote, close quote, apostrophe, em dash, en dash, bullet, Euro, and any other characters you encounter in your content, and use those actual characters in your code.
The Mac has a Character Viewer that you can turn on in the Keyboard System Preference, and you can find and then drag and drop the characters you need, or use the matching Keyboard Viewer to see which keys to type. For example, trademark is Option + 2. UTF-8 contains all of the characters and symbols from every written human language.
So there is no excuse for using — instead of an em dash. It is not a bad idea to learn the rules of punctuation and typography also … for example, knowing that a period goes inside a close quote, not outside.
Using a <meta> tag for something like content-type and encoding is highly
ironic, since without knowing those things, you couldn’t parse the file
to get the value of the meta tag.
No, that is not true. The browser starts out parsing the file as the browser’s default encoding, either UTF-8 or ISO-8859-1. Since US-ASCII is a subset of both ISO-8859-1 and UTF-8, the browser can read <html><head> just fine either way … it is the same. When the browser encounters the meta charset tag, if the encoding is different than what the browser is already using, the browser reloads the page in the specified encoding.
That is why we put the meta charset tag at the top, right after the head tag, before anything else, even the title. That way you can use UTF-8 characters in your title.
You must save your file(s) in UTF-8 encoding without BOM
That is not strictly true. If you only have US-ASCII characters in your document, you can Save it as US-ASCII and serve it as UTF-8, because it is a subset. But if there are Unicode characters, you are correct, you must Save as UTF-8 without BOM.
If you want a good text editor that will save your files
in UTF-8, I recommend Notepad++.
On the Mac, use Bare Bones TextWrangler (free) from Mac App Store, or Bare Bones BBEdit which is at Mac App Store for $39.99 … very cheap for such a great tool.
In either app, there is a menu at the bottom of the document window where you specify the document encoding and you can easily choose «UTF-8 no BOM». And of course you can set that as the default for new documents in Preferences.
But if your Webserver serves the encoding in the HTTP header,
which is recommended, both [meta tags] are needless.
That is incorrect. You should of course set the encoding in the HTTP header, but you should also set it in the meta charset attribute so that the page can be saved by the user, out of the browser onto local storage and then opened again later, in which case the only indication of the encoding that will be present is the meta charset attribute.
You should also set a base tag for the same reason … on the server, the base tag is unnecessary, but when opened from local storage, the base tag enables the page to work as if it is on the server, with all the assets in place and so on, no broken links.
AddDefaultCharset UTF-8
Or you can just change the encoding of particular file types like so:
AddType text/html;charset=utf-8 html
A tip for serving both UTF-8 and Latin-1 (ISO-8859-1) files is to give the UTF-8 files a «text» extension and Latin-1 files «txt.»
AddType text/plain;charset=iso-8859-1 txt
AddType text/plain;charset=utf-8 text
Finally, consider saving your documents with Unix line endings, not legacy DOS or (classic) Mac line endings, which don’t help and may hurt, especially down the line as we get further and further from those legacy systems.
An HTML document with valid HTML5, UTF-8 encoding, and Unix line endings is a job well done. You can share and edit and store and read and recover and rely on that document in many contexts. It’s lingua franca. It’s digital paper.
Все о мета тегах
Мета теги используются для описания свойств HTML документа и должны находится в рамках тега HEAD. Если в документе используется тег TITLE, то мета теги рекомендуется вставлять в документ после него.
Мета теги имеют очень широкую функциональную направленность, но многое еще не стандартизировано или находится на стадии разработки.
Мета теги могут идентифицировать авторство HTML документа, его адрес и как часто он обновляется. Поисковые системы используют мета теги для индексации и формирования заголовков HTML документов.
Мета теги могут влиять на режим отображения HTML документов, хотя сами на экран не выводятся.
Далее будут описаны мета теги, принятые большинством поставщиков услуг и программ для сети интернет.
- Мета теги делятся на две группы: NAME и HTTP-EQUIV.
- Группа информационных мета тегов
- Мета тег Description
- Мета тег Document-state
- Мета тег Generator
- Мета тег Keywords
- Мета тег Resource-type
- Мета тег Revisit
- Мета тег Robots
- Мета тег Subject
- Мета тег URL
- Мета тег Content-Language
- Meta тег Content-Script-Type
- Мета тег Content-Style-Type
- Мета тег Content-Type
- Мета тег Expires
- Мета тег PICS-Label
- Мета тег Pragma
- Мета тег Refresh
- Мета тег Set-Cookie
- Мета тег Window-target
Мета теги типа NAME содержат текстовую информацию о документе, его авторе и некоторые рекомендации для поисковых машин. Например: Robots, Description, Keywords, Author, Copyright.
Мета теги типа HTTP-EQUIV влияют на формирование заголовка документа и определяют режим его обработки.
Эти теги не отражаются броузерами, но обрабатываются некоторыми поисковыми машинами. Как правило, нет необходимости использовать эти теги одновременно. В большинстве случаев достаточно одного информационного тега, позволяющего идентифицировать автора или принадлежность документа.
Тег Author должен содержать имя автора, если сайт принадлежит организации, имеет смысл использовать тег Copyright. Информация обязательно должна заключаться в кавычки, например:
<META Name= Author content="Смирнов Сергей">
Дополнительно информационные теги могут содержать атрибут «Lang», указывающий язык, на котором написано значение свойства. Пример:
<META Name= Author Lang="ru" content="Смирнов Сергей">
Мета тег Description — служит для краткого описания странички.
Он используется поисковыми машинами для индексации и в качестве краткой аннотации при ссылке в ответе на запрос. И именно по содержанию этого тега пользователь поисковой системы будет оценивать, соответствует ваш сайт его ожиданиям или нет.
Если тег Description отсутствует, то в качестве описания поисковые машины используют первую строку текста или отрывок из текста с найденным ключевым словом.
Желательно чтобы длина описания не превосходила 80 символов. Пример:
<META Name="Description" content= "Сайт про ...">
Мета тег Document-state — предназначен для управления индексацией поисковых роботов. Может иметь два значения:
Static — Нет необходимости индексировать эту страницу в будущем.
Dynamic — Индексировать эту страницу регулярно (по умолчанию).
Режим «Static» предназначен для страниц, которые не меняются в принципе. Если содержание вашей страницы периодически меняется, то использовать этот тег необязательно. Пример:
<META Name="Document-state" content ="Dynamic">
Мета тег Generator — это всего лишь один из «славного» семейства тегов широко используемых генераторами HTML кода в своих целях. Как правило, для владельца сайта эти теги не несут полезной нагрузки.
Мета тег Keywords используется поисковыми машинами для оценки релевантности.
Слова, содержащиеся в теге Keywords, рассматриваются поисковыми машинами как рекомендация, но иногда именно этой капли не хватает, чтоб перевесить чашу.
При формировании списка ключевых слов для мета тега Keywords необходимо использовать слова, содержащиеся в тексте документа. Слова, не содержащиеся в тексте, можно использовать в очень небольших количествах, два — три слова. Вставлять их надо в конец списка.
Ключевые слова не должны повторятся в теге Keywords, в крайнем случае, не более двух раз.
В мета теге Keywords имеет смысл использовать не более 10 слов, большее количество релевантности не увеличит.
В Большинстве случаев поисковые машины находят ключевые слова, стоящие во множественном числе (cats), даже если поиск задан в единственном числе (cat). Поэтому рекомендуется в тег Keywords заносить английские существительные во множественном числе.
Роботы некоторых поисковых машин не переходят к новой строке при анализе мета тега Keywords, поэтому не рекомендуется разбивать его на несколько строк.
Пример:
<META Name="Keywords" content="пример, meta, тега">
Если документ написан на нескольких языках, можно использовать добавочный атрибут lang для выбора кодировки (смотри описание мета тега Content-Language).
Пример:
<META Name="Keywords" lang="ru" content="пример, meta, тега"> <META Name="Keywords" lang="en-us" content="meta tegs, example">
Но более предпочтительно сделать отдельные страницы, каждая на своем языке с переходами с одной на другую, с помощью тегов <A> и <Link>.
Мета тег Resource-type — описывает состояние данного документа. Если его значение отлично от “Document”, то поисковые системы не будут его индексировать.
Предназначен для использования в крупных проектах, с множеством документов разного типа.
Некоторые возможные значения:
Build
Classification
Creation
Document — Принимается по умолчанию.
Formatter
Host
Operator
Random text
Rating
Site-languages
Subject
Template
Version
Пример:
<META Name="Resource-type" content ="Document">
Мета тег Revisit — указывает поисковому роботу, через сколько дней ему нужно вернуться и переиндексировать данный документ.
Пример (приходить раз в неделю):
<META Name="Revisit" content="7">
Мета тег Robots — содержит указания для роботов поисковых машин, собирающих информацию о HTML документах в сети.
Значение свойства Robots может состоять из следующих директив, разделенных запятыми:
Index — эта страница должна быть индексирована.
Noindex — эта страница не должна индексироваться.
Follow — прослеживать гиперссылки на странице.
Nofollow — не прослеживать гиперссылки на странице.
All — = index, follow (принято по умолчанию).
None — = noindex, nofollow.
Тег <META name=Robots content=»all»> ничего не меняет в работе робота поисковой машины, так как значение «all» принято по умолчанию.
Но если эта страница создается динамически или очень часто обновляется, то нет смысла ее индексировать, так как информация о странице в поисковой машине и ее истинное содержание будут разными.
В этом случае можно рекомендовать поисковой машине не индексировать эту страницу, а только отслеживать на ней гиперссылки, что бы проиндексировать остальную часть сайта
<META name=Robots content="noindex,follow">
При использовании тега, запрещающего отслеживание гиперссылок
<META name=Robots content="index,nofollow">
часть сайта может остаться не проиндексированной, так как внутри сайта роботы перемещаются по гиперсылкам. И те страницы, переход на которые заблокирован, не будут индексированы.
Мета тег Robots имеет приоритет над директивами управления, заданными в файле robots.txt.
Мета тег Subject используется поисковыми машинами для определения тематики документа. Но до тех пор, пока поисковые системы не согласуют классификационные таблицы, использование этого тега не всегда оправдано.
Мета тег URL — служит для исключения из индексации генерируемых страниц и зеркал. Встретив этот тег, робот поисковой машины должен прекратить индексацию текущего документа и перейти по указанной ссылке. Пример:
<META Name="URL" content= "http://www.Main-Site.com">
Мета тег Content-Language — это указание языка документа. Используется поисковыми машинами при индексировании. Хотя большинство из них умеют различать язык по тексту.
Некоторые возможные значения (стандарт [ISO639], [ISO3166]): de, el, en, en-GB, en-US, en-cockney, es, fr, it, i-navajo, ja, he, nl, ru, pt.
Пример:
<META HTTP-EQUIV="Content-language" content ="ru">
В спецификации HTML 4.0 есть альтернативная возможность явного указания языка — <html lang=»en»>
Meta тег Content-Script-Type — Определение языка программирования сценариев.
Некоторые из возможных значений: text/javascript, text/perlscript, text/tcl, text/vbscript.
Пример:
<META HTTP-EQUIV="Content-Script-Type" content="text/javascript">
Если тег Content-Script-Type не используется, то тип языка программирования сценариев, отличный от принятого по умолчанию, должен быть указан непосредственно в каждом теге <SCRIPT>, пример
<SCRIPT type="text/javascript">
В одном документе допускается использование нескольких языков программирования сценариев. Указание языка в теге <SCRIPT> имеет более высокий приоритет, в рамках текущего тега <SCRIPT>.
Мета тег Content-Style-Type — указавает язык таблицы стилей, значение «text/css» принимается по умолчанию, если оно вас устраивает и вы не используете в этом документе теги <Style> и <Span>, то использовать этот тег необязательно. Пример:
<META HTTP-EQUIV="Content-Style-Type" content="text/css">
Броузеры определяют язык таблиц стилей по следующему алгоритму:
Если в объявлении МЕТА задается язык таблиц стилей, то определяет последнее объявление в потоке символов.
Если язык таблиц стилей задается в объявлении STILE, язык таблиц стилей определяет последний заголовок в потоке символов.
Если язык таблиц стилей не задан, по умолчанию используется язык «text/css».
Мета тег Content-Type — Отвечает за указание типа документа и кодировки символов.
Использовать мета тег Content-Type надо только с учетом некоторых нюансов.
Во — первых, кодировка символов текста должна соответствовать кодировке, указанной в теге.
Во — вторых, сервер не должен менять кодировку текста при обработке запроса броузера.
В — третьих, если сервер меняет кодировку текста, он должен скорректировать или удалить мета тег Content-Type.
Несоблюдение этих требований может привести к следующему: web-сервер автоматически определит кодировку запроса клиента и отдаст страничку web-броузеру перекодированной. Броузер, в свою очередь, будет читать документ в соответствии с мета тегом Content-Type. И если кодировки не совпадут, то прочитать документ можно будет только после ряда замысловатых манипуляций. Особенно это характерно для старых броузеров IE 3.x — 4.x и Netscape 4.x.
Внимание! Мета тег Content-Type очень часто вставляется генераторами HTML кода.
Некоторые из возможных типов кодировки (стандарт [ISO10646]): Windows-1251, KOI8-r, ISO-8859-1.
Пример:
<META HTTP-EQUIV=”Content-Type” content="text/html; charset=windows-1251">
Мета теги Expires — управляет кэшированием. Если указанная в теге дата прошла, то броузер должен сделать повторный сетевой запрос, а не использовать копию из кэша. Если изначально указать прошедшую дату, то документ не будет кэшироваться.
Некоторые поисковые роботы могут отказаться индексировать документ с устаревшей датой.
Дата должна указываться в стандарте [RFC850].
Пример:
<META HTTP-EQUIV="Expires" content="Wed, 26 Feb 1999 08:21:57 GMT">
Мета тег PICS-Label — (Platform-Independent Content rating Scheme Label) ) определяет уровень доступности сайта (sex, violence), но может использоваться и в других целях.
Pragma — Контроль кэширования. При значении “no-cache” кэширование данного не рекомендовано. Предназначен для документов, получаемых в результате работы скрипта. Пример:
<META HTTP-EQUIV="Pragma" content ="no-cache">
Мета тег Refresh — определение задержки времени в секундах, после которой броузер автоматически обновляет документ. Дополнительная возможность — автоматическая загрузка другого документа. Пример:
<META HTTP-EQUIV="Refresh" content ="4; URL=http://www.name.com/">
Если нужно просто обновить документ, то URL указывать не обязательно.
Set-Cookie — Настройка cookie броузера.
Пример:
<META HTTP-EQUIV="Set-Cookie" content="NAME=value; EXPIRES=date; DOMAIN=domain_name; PATH=path; SECURE">
Атрибуты EXPIRES, DOMAIN, PATH и SECURE при необходимости можно опустить.
Пример:
<META HTTP-EQUIV="Set-Cookie" content="NAME=value;">
NAME — Имя cookie, не может содержать символы перевода строки, пробелов, точки с запятой (;) и табуляции.
EXPIRES — Время хранения cookie. После указанной даты (в формате «Wdy, DD-Mon-YYYY HH:MM:SS GMT») истекает время хранения cookie.
DOMAIN — Домен, для которого задается значение cookie. Для доменов COM, EDU, NET, ORG, GOV, MIL, INT значение можно задавать сокращенно «MY.COM», оно будет распространяться и на домен «WWW.MY.COM». Для всех остальных (в том числе и RU) значение надо задавать полностью «WWW.MY.RU».
PATH — Устанавливает подмножество документов, на которые распространяется действие cookie. При значение «/doc» действие cookie будет распространено на все файлы и каталоги в этой директории начинающееся на «doc» (/doc/, /document/, /doc2/, docs.html, doc-test.htm).
Если этот атрибут опущен, то значение cookie распространяется только на документы директории, в которой расположен текущий документ.
SECURE — Указывает, что информация о cookie должна пересылается через HTTPS (HTTP с использованием SSL). В противном случае информация о cookie будет пересылается по протоколу HTTP.
Перед запросом к серверу, броузер проверяет cookie. И если атрибуты NAME, DOMAIN и PATH совпадают, броузер посылает cookie серверу.
Если cookie принимает новое значение, старое значение удаляется.
Броузер имеет ряд ограничений по работе с cookie:
Единовременно может храниться не более 300 значений cookie.
Cookie не может превышать 4 Кбайт.
От одного сервера (домена) не может быть более 20 cookie.
Эти ограничения могут быть несколько иными, в зависимости от настройки и типа броузера.
Если происходит превышение лимита (общего или по домену) удаляется первая по времени запись. Удаление происходит, не зависимо от значения атрибута EXPIRES.
При превышении 4 Кбайт, cookie усекается.
Пример:
<META HTTP-EQUIV="Set-Cookie" content="NAME=cookexample; EXPIRES=Monday, 22-FEB-02 21:11:51 GMT; DOMAIN=WWW.MY.RU; PATH=/; SECURE">
Мета тег Window-target — определяет окно текущей страницы. Приведенный пример может быть использован для прекращения появления новых окон броузера при применении фреймовых структур. Действует для многих (но не для всех) броузеров. Пример:
<META HTTP-EQUIV="Window-target" content ="_top">
Мета-тег (англ. metainformation — метаинформация) – это тег, в котором может содержаться описание веб-страницы, ключевые слова, информация об авторе, управляющие команды для поисковых машин/браузеров и т.д.
Если правильно использовать МЕТА-теги, то это может послужить хорошим способом раскрутки сайта/блога.
Размещается мета-тег в голове HTML-документа между тегами <head></head>.
Мета-тег обозначается тегом <meta> и имеет следующие атрибуты:
- http-equiv – служит для преобразования мета-тега в заголовок HTTP.
Пример: <meta http-equiv=» » Content=» «> - name – имя мета-тега (применяется в паре с атрибутом content).
Пример: <meta name=» » Content=» «> - content – указывает значение атрибута, который был задан с помощью name или http-equiv.
Пример: <meta name=» » Content=» «> - charset – кодировка HTML-документа.
Пример: <meta charset=» «>
Закрывающий тег для <meta> не нужен.
Теперь примеры с описанием:
HTML-кодировка веб страницы:
Чтобы указать браузеру, в какой HTML-кодировке была сохранена веб-страница, необходимо указывать в мета-теге вот такие данные:
<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">
Обычно имя кодировки задают в Windows-1251 либо utf-8.
Пример:
<html> <head> <meta http-equiv="Content-Type" content="text/html; charset=Windows-1251"> <title>Кодировка</title> </head> <body> содержание </body> </html>
Подробней о кодировке вы можете почитать тут.
Информация о документе
Если вам нужно указать информацию о владельце (авторе) сайта/блога или компании используйте следующий мета-тег:
<meta name="author" content="имя автора" />
или
<meta name=»copyright» content=»Сайт фирмы ЖЖЖ» />
Пример:
<html> <head> <meta name="author" content="Вини Пух" /> <title>Автор</title> </head> <body> содержание </body> </html>
Описание страницы
Для краткого описания веб-страницы используйте следующие значения в мета-теге «description»:
<meta name="description" Content="краткое описание веб-страницы">
Пример:
<html> <head> <meta name="description" Content="Интересная и полезная статья о мета-тегах!"> <title>Автор</title> </head> <body> содержание </body> </html>
Описание в description не должно превышать 200 символов.
Ключевые слова
Чтобы указать поисковой машине, какие на веб-странице присутствуют ключевые слова, нужно использовать в мета-теге следующее значение «keywords».
Пример:
<html> <head> <meta name="keywords" Content ="мета-тег,описание,html"> <title>Ключевые слова</title> </head> <body> содержание </body> </html>
Максимальное количество ключевых слов в теге keywords не более 5-6 слов.
Кстати, рекомендую вам почитать полезную статью о том, как грамотно составить мета-теги.
Адрес
Чтобы указать электронную почту автора и адрес сайта/блога, используйте следующее значение в мета-теге:
Publisher-Email – адрес электронной почты;
Publisher-URL – адрес сайта.
<meta name="Publisher-Email" Content="адрес электронной почты"> <meta name="Publisher-URL" Content="https://www.адрес_сайта/">
Пример:
<html> <head> <meta name="Publisher-Email" Content="test-bloggood@mail.ru"> <meta name="Publisher-URL" Content="https://www.bloggood.ru/"> <title>Адрес</title> </head> <body> содержание </body> </html>
Обновление страницы
Если вы часто обновляете страницу сайта, вы можете сообщить поисковому роботу, когда прийти ему снова и проиндексировать обновленную страницу.
<META NAME="Revisit-After" CONTENT="10 days">
Пример:
<html> <head> <META NAME="Revisit-After" CONTENT="10 days"> <title>Обновление страницы</title> </head> <body> содержание </body> </html>
Через 10 дней должен прийти робот и повторно проиндексировать страницу. Хотя многие веб-мастера утверждают, что поисковый робот не будет подчиняться и придет индексировать по собственному расписанию.
Время жизни документа в КЭШе
Чтобы ускорить загрузку веб-страницы, браузеры сохраняют веб страницу в КЭШ (на жестком диске). Если вы поменяете шапку сайта, то, возможно, посетитель, который недавно заходил на ваш сайт изменений не увидит. Вся причина в КЭШе.
Чтобы заставить браузер загружать веб-страницу не с КЭШа, а напрямую с сервера, нужно для этого указать в мета-теге день недели, число, месяц, год, время (чч:мм:сс) и часовой пояс.
<meta http-equiv="expires" content="Sun, 24 May 2014 12:28:36 GMT+03:00">
Пример:
<html> <head> <meta http-equiv="expires" content="Sun, 24 May 2014 12:28:36 GMT+03:00"> <title>КЭШ</title> </head> <body> содержание </body> </html>
Таблица сокращений слов на месяцы
Таблица сокращений слов на дни недели
Команды для поисковых систем
<META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW">
Список команд для поисковых роботов:
- Index – разрешение на индексацию веб-страницы;
- Noindex – не индексировать веб-страницу;
- Follow – прослеживать ссылки на веб-странице;
- Nofollow – не прослеживать ссылки на веб-странице;
- All – индексировать страницу и прослеживать ссылки на веб-странице (по умолчанию);
- None – не индексировать страницу и не прослеживать ссылки на веб-странице
Пример:
<html> <head> <META NAME="ROBOTS" CONTENT="NOINDEX,FOLLOW"> <title> Команды для поисковых систем</title> </head> <body> содержание </body> </html>
Автоматический переход на другую страницу
Если вам нужно перенаправить пользователя из одной страницы на другую через какой-то промежуток времени, вы можете использовать вот такой способ:
<meta http-equiv="Refresh" content="8; URL=https://bloggood.ru/">
Настройка:
content=»8; — время, через которое пользователь автоматически перенаправится на другую страницу. В данном примере это будет через 8 секунд.
url=https://bloggood.ru» – замените адрес или страницу, на которую вы хотите отправить пользователя.
Пример:
<html> <head> <meta http-equiv="Refresh" content="8; URL=https://bloggood.ru/"> <title> Автоматический переход на другую страницу</title> </head> <body> содержание </body> </html>
Красивые эффекты при переходе по ссылке
Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer):
<meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=0)"> <meta http-equiv ="Page- Exit " Content="RevealTrans(Duration=3.0, Transition=23)">
Настройки эффектов при переходе с одной веб-страницы на другую:
• Page-Enter – эффект появления веб-страницы;
• Page- Exit – эффект исчезновения веб-страницы;
• Duration – действие эффекта (в секундах);
• Transition – номера эффектов (от 0 до 23 – см. в таблице снизу)
Таблица номеров эффектов для «Transition»:
Пример:
Сохраните файл как «1.html»
<html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=1.0, Transition=12)"> <title>Эффекты перехода страниц</title> </head> <body bgcolor="#c5ffa0"> <center> <h2> Эффекты перехода страниц – СТРАНИЦА №1 </h2> <font size="+1"> Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer).</font><hr><br> <a href="2.html"><font size="+2">"Далее"</font></a> </center> </body> </html>
Сохраните файл как «2.html»
<html> <head> <meta http-equiv="Content-Type" Content="text/html; Charset=Windows-1251"> <meta http-equiv ="Page-Enter" Content="RevealTrans(Duration=2.0, Transition=23)"> <title>Эффекты перехода страниц</title> </head> <body bgcolor="#c0e4ff"> <center> <h2> Эффекты перехода страниц – СТРАНИЦА №2 </h2> <font size="+1"> Красивые эффекты при переходе по ссылке работают, к сожалению, не во всех браузерах (эффект работает только в Internet Explorer).</font><hr><br> <a href="1.html"><font size="+2">"Далее"</font></a> </center> </body> </html>
Какие мета-теги использую я
HTML-кодировка веб страницы:
<meta http-equiv="Content-Type" content="text/html; charset=имя кодировки">
Описание страницы:
<meta name="description" Content="краткое описание веб-страницы">
Ключевые слова:
<meta name="keywords" Content ="ключевые слова через запятую">
Автоматический переход на другую страницу (редко):
<meta http-equiv="Refresh" content="8; URL=https://ваш-сайт/">
Вот, пожалуй, это все, что я хотел рассказать о мета-тегах.
Понравился пост? Помоги другим узнать об этой статье, кликни на кнопку социальных сетей ↓↓↓
Последние новости категории:
Похожие статьи
Популярные статьи:
Добавить комментарий
Метки: html, основы
Для правильной, а значит, и эффективной раскрутки сайта важно понимать, что такое мета-теги. Какую задачу выполняют эти атрибуты? Как они помогают продвижению ресурса? Нужно ли использовать теги для SEO или можно обойтись без них? Чтобы ответить на все вопросы, начнем с азов.
Мета-теги – это специальные элементы кода, через которые браузер и поисковые машины считывают информацию о сайте. Эти атрибуты не видны пользователям, не считаются очень важными для корректной работы ресурса. Теги просто описывают веб-страницу с помощью заголовка, дескриптора, ключевых фраз.
Этот HTML-код размещается между тегами
<head>…</head>. Во время индексации роботы проверяют веб-страницы на наличие данных с атрибутом <meta>. Правильно заполненные теги помогают поисковым системам точнее установить тематику сайта. По схожему алгоритму работают и браузеры, когда определяют способ визуализации контента на устройствах пользователей – для ПК и гаджетов.
Итак, мета-теги решают три главных задачи:
- Передают спец-информацию поисковым системам. Этим они помогают раскрутке сайта по соответствующим запросам целевой аудитории. Нельзя с уверенностью на 100% сказать, что веб-страница с тегами будет выше в выдаче, чем без них. Но эти атрибуты все так же учитываются ПС при оценке качества страниц. Так что для вывода сайта в ТОП лучше, когда теги прописаны.
- Помогают корректно отображать контент в разных браузерах и на различных устройствах. То есть атрибуты <meta> для веб-обозревателей, программного обеспечения и всевозможных сервисов – это инструкция как показывать сайт пользователям.
- Могут содержать данные об авторе, владельце веб-ресурса, источнике данных.
Сегодня эти атрибуты не являются незаменимыми для продвижения. Но поисковые машины, сравнивая два веб-ресурса с одинаковыми показателями, отдадут предпочтение сайту с грамотно прописанными атрибутами
Разновидности
Подразделяются на атрибуты для поискового продвижения – SEO и для технической оптимизации ресурса. Рассмотрим подробнее все важные элементы.
К первой группе относят три основных тега: title, description, keywords. Они задействуются, чтобы указать поисковым машинам тематику веб-страницы. Вебмастера пытаются заголовком, анонсом и ключевые словами воздействовать на алгоритмы ранжирования ПС.
Title
Title – один из главных атрибутов страницы. Когда робот изучает код, то первым делом он проверяет наличие уникального заголовка. В браузерах «тайтл» прописывается названием страницы, а в индексе ПС – ссылкой на сайт. Наличие этого тега крайне важно для SEO-оптимизации, в частности он влияет на ранжирование и повышает кликабельность сниппета в выдаче.
В заголовках рекомендуется использовать ключевые слова и располагать их ближе к началу тега. Оптимальный вариант – первое или второе слово. Кроме того, в тайтле желательно прописать конкурентные преимущества. По сути, этот тег выступает оффером для пользователей и поисковых систем.
Например, нужно вписать в заголовок запросы: «купить ноутбук», «купить ноутбук недорого», «купить игровой ноутбук».
Плохой вариант заголовка: «Купить ноутбук. Купить игровой ноутбук, купить недорого». Просто перечислили ключевые слова и всё. Получаем на выходе нечитабельное и заспамленное предложение.
Удачный пример: «Где купить игровой ноутбук недорого с доставкой по Москве и получить в подарок сумку-чехол?» В этом варианте мы указали все слова в логичной последовательности и привели конкурентное преимущество компании.
Подытожим правила написания эффективного Title:
- Тег должен включать ключевое слово, по которому продвигается страница;
- Поисковый запрос необходимо поместить как можно ближе к началу заголовка. Оптимальный вариант – первое, второе слово;
- Длина Title не должна превышать 70 символов (12 слов) – Google, 80 символов (15 слов) – Яндекс. Если заголовок длиннее, то в поисковой выдаче «хвост» не будет виден. Именно поэтому так важно главную мысль и запросы размещать в начале текста;
- Заголовок должен быть читабельным. Времена, когда теги лепили из наборов несвязных запросов, давно прошли. Если не хотите попасть под фильтры, то Title должен быть понятным, логичным и легко воспринимаемым пользователями;
- Уникальность. Обычно в конце тега прописывается название сайта или компании;
- Заголовок должен соответствовать содержанию страницы. В противном случае посетители будут покидать сайт, что приведет к росту показателя отказов. Соответственно поисковая система опустит ресурс в выдаче;
- Несколько запросов в Title разделяйте с помощью тире;
- Для коммерческих сайтов – интернет-магазинов, сервисов – рекомендуется прописывать в заголовке цены и выгодные условия покупки/заказа. Конкретика повышает кликабельность сниппета в выдаче. Например, «Купить школьный рюкзак в Москве – цена от 2500 руб, скидки 10% до 20 сентября | site.ru»
На странице сайта тег прописывается в следующем коде:
<title>Заголовок страницы</title>
Description
Description – это своего рода анонс той информации, которая представлена на странице сайта. Поисковые системы используют «описания» для формирования сниппета в результатах выдачи. Description желательно составлять самостоятельно, не отдавая эту задачу на откуп ПС. Как и в случае с заголовком (Title) существуют несколько правил заполнения тега с кратким описанием страницы. Рассмотрим их:
- Используем ключевые слова ближе к началу предложения. Например, на странице предлагаются смартфоны Samsung, регион продажи Москва. Дескриптор следует начать с ключевого вхождения – «Смартфоны Samsung в Москве»;
- Добавляем продающие фразы. Для коммерческих сайтов, интернет-магазинов, сервисов обычно используют транзакционные добавки. Например, «Купить смартфоны Samsung в Москве по цене от 11 990 рублей». К таким запросам относят также фразы – «заказать», «стоимость», «прайс» и другие. Их перерабатывают до читабельного вида и включают в «описание»;
- Прописываем несколько слов о преимуществах и выгодах покупателей. Например, сведения о бесплатной доставке, акции или других спец-условиях. Объем дескриптора ограничен 140 символами, поэтому следует писать кратко и по сути дела. Например, «Смартфоны Samsung от 11 990 рублей с доставкой в Москве. 2 года гарантии. В подарок чехол и гарнитура»;
- Прибавляем призыв к действию. Чтобы сделать Description максимально продающим, добавим Call-to-Action (СТА). Что писать в призыве? Из практики наиболее эффективны два варианта. Первый – «Смартфоны Samsung от 11 990 руб с доставкой в Москве. 2 года гарантии. В подарок чехол и гарнитура. Посмотрите на сайте более 500 моделей!» Второй вариант – указать контакты для связи. Например, «Смартфоны Samsung от 11 990 руб с доставкой в Москве. Гарантии. В подарок чехол и гарнитура. Узнайте больше по телефону 8 (800) 123-45-67»;
- Делаем описание уникальным. Все бы хорошо с предыдущими примерами, но есть одно но. Такой Description можно видеть в 99% случаев в выдаче. Однако поисковые системы отдают предпочтения уникальным сниппетам, поэтому тег нужно доработать. Самый простой вариант уникализации – добавить название компании. Например, «Смартфоны Samsung от 11 990 руб на «site.ru» с доставкой в Москве. В подарок чехол и гарнитура. Заказывайте по телефону 8 (800) 123-45-67»;
- Добавляем графику. Мета-тег можно сделать более привлекательным с помощью эмоджи. Однако смайлики должны соответствовать тематике сниппета. Эмоджи не должны использоваться для замены поисковых запросов. Например, можно использовать значки связи или товара совместно с его названием: Смартфоны Samsung, 8 (800) 123-45-67 и другие.
Для каждой страницы сайта мета-тег Description прописывается отдельно. В самописных ресурсах код добавляется между
<head>…</head> в таком виде:<meta name=”description” content=”Описание страницы”/>
На сайтах под CMS дескриптор прописывается через плагины оптимизации. Например, для Wordxmpss – это Yoast Seo или All-in-One SEO Pack. На Open Cart обычно используют SEO PRO или Complete SEO.
Keywords
Keywords представляет собой перечень поисковых запросов, по которым продвигается страница. Раньше этот атрибут был обязательным к заполнению, поисковые системы учитывали ключевые слова при ранжировании сайта. Однако постоянные манипуляции с ключевиками (спам) сильно уменьшил значимость этого тега в современных реалиях. Гугл вовсе отказался учитывать «кейвордс» во время ранжирования, Яндекс – оставил за собой право учитывать или нет.
К заполнению тега Keywords существует три подхода:
- Оставить поле пустым. Сегодня часто так и делают, чтобы не вызывать подозрений у ПС.
- Заполнять минимально. Например, использовать 4-7 ключевых запросов через запятую или в начальной форме без знаков препинания. Например, «смартфон, Samsung, купить, Москве, цена, доставка, чехол». Важно чтобы запросы были по тематике страницы.
- Длина тега может быть любая, но усердствовать свыше меры не стоит. В противном случае поисковики могут принять Keywords за спам.
Тег Keywords также прописывается между
<head>…</head> в таком виде:<meta name=”keywords” content=”Ключевые слова”/>
Ко второй группе относят технические атрибуты, которые используются для внутренней оптимизации сайта и более продуктивного взаимодействия с поисковыми роботами. Перечислим основные теги:
Robots
Указывает поисковым роботам, какие страницы можно добавлять в индекс, а какие нельзя. Также в роботсе прописываются правила, как сканировать и индексироваться страницы. Тег имеет ряд дополнительных атрибутов:
- index и noindex – разрешает или запрещает индексацию страницы;
- follow и nofollow – разрешает или запрещает переход по ссылкам;
- all/none – разрешает или запрещает поисковым роботам все действия на сайте: индексировать, переходить по ссылкам;
- noyaca и nosnippet – указания для роботов Яндекса и Гугла не выводить в качестве сниппета описания из Яндекс.Каталога или фрагмента текста соответственно.
Записывается так:
<meta name=”robots” content=”noindex”>
Content-type
Тег содержит информацию о формате документа, кодировке. С его помощью выполняется настройка отображения сайта в браузере. Рекомендуется заполнять этот атрибут, чтобы страницы корректно отображались на любом обозревателе. Особенно актуален он при неверной настройке просмотрщика или сервера. Прописывается тег для кириллицы следующим образом:
<meta http-equiv=”Content-type” content=”text/html;charset=windows-1251″>
Content-language
Во много этот тег дублирует предыдущий, так как содержит информацию о языке содержимого страницы. Сегодня браузеры определяют язык автоматически, поэтому надобность в нем отпала. Однако при неверных настройках обозревателя и сервера информация в Content-language может быть кстати.
Записывается следующим образом:
<meta http-equiv=”Content-Language” content=”ru”>
Refresh
Атрибут позволяет переадресовать пользователя на другой раздел во время обновления целевой страницы или при долгой загрузке контента. Например, тег часто используют вместо страницы ошибки «404».
Прописывается так:
<meta http-equiv=”refresh” content=”N; url=URL”>
Meta Author и Copyright
Вспомогательный атрибут, с помощью которого можно указывать авторство текстового или графического контента на сайте. Прописывается следующим образом:
<meta name=”Author” content=”Иванов Петр Сидорович”> (автор)<meta name=”Copyright” content=”Юрьева Инна Семеновна”> (авторские права)
Перечисленные выше теги направлены на улучшение восприятия сайта поисковыми машинами. Рекомендуется уделить больше внимания правильному заполнению поисковых и технических атрибутов: пишите правдивую информацию, давайте посетителям выгоды, не злоупотребляйте ключевыми словами в кейвордс.
Резюме
Мы изучили, что такое мета-теги. Рассмотрели их виды, правила заполнения информацией. При работе с атрибутами сайта или страницы принимайте сторону пользователя: понятна ли информация в сниппете новому посетителю, как воспринимается страница при первом знакомстве, считываются ли выгоды для клиента и прочее.
Мета-теги — часть программного HTML-кода, заключенная между тегом <head>…</head> (заголовок страницы). Эти атрибуты не являются обязательными: они не видны пользователю, но сообщают определенную информацию поисковой системе (описание, заголовок, ключевые слова и т.д.).
Задачи meta-тегов
Мета-теги выполняют несколько важных функций:
- Влияют на то, как отображается и какую позицию занимает страница в индексе (выдаче).
- Помогают продвигать ресурс по наиболее соответствующим Вашей целевой аудитории запросам. Позволяют потенциальному посетителю увидеть в поисковой выдаче нужную информацию, делая описание максимально информативным.
- Фиксируют данные о странице, помогают правильно отобразить информацию, настроить индексацию (анализ сайта и внесение его в базу для последующего включения в выдачу).
Сейчас мета-теги не оказывают сильного влияния на продвижение, но по-прежнему учитываются при оценке поисковыми системами. При прочих равных условиях предпочтение отдается ресурсу с грамотно сформированными тегами.
Мета теги для SEO (поисковой) оптимизации
Сюда относятся три тега: title, description, keywords. Эти атрибуты сообщают поисковому роботу информацию о сайте, которая помогает грамотно определить тематику ресурса и ранжировать (сортировать) в выдаче. Потому составляя метатеги, вебмастера обязательно используют ключевые слова (слова и фразы, которые целевой пользователь вводит в строку поиска, чтобы найти нужный ресурс).
Title
Заголовок страницы. В индексе это — крупная синяя ссылка на сайт, в браузерных вкладках — название.
Как заполнять
Атрибут должен содержать основные ключевые слова и конкурентные преимущества. Важно, чтобы пользователь сразу понял, что Вы предлагаете, и почему данный ресурс ему подойдет. Основная сложность — вместить нужную информацию в четко заданный поисковыми системами лимит символов. У Google максимум — 70 (12 слов), у Яндекс — 80 (15 слов).
Рассмотрим пример. Дано: ключевые слова «купить кресло», «купить кресло недорого», «купить удобное кресло»
Неудачный title: Купить кресло. Купить удобное кресло, купить кресло недорого
Удачный title: Как купить удобное кресло недорого с доставкой и получить скидку 15%?
В первом случае — переспам (переизбыток ключевых фраз), нечитабельное предложение с точки зрения пользователя. Второй вариант meta тега объединяет все нужные ключевики в логичной последовательности и указывает на конкурентное преимущество компании (скидку).
Description
Краткий «анонс» страницы в результатах поиска. Несколько коротких предложений, в которых используются ключевые слова (не все — наиболее значимые) конкретной страницы. Рекомендуемая длина meta тега — 160-200 символов.
Мета-теги Title и Description составляются отдельно для каждой страницы сайта, т.к. все разделы должны иметь собственный список ключевых фраз, соответствующий тематике и содержимому.
С помощью meta name description поисковым роботом описание страницы — сниппет. Он отображается в результатах поиска под title.
Если атрибут не заполнен либо сформирован не по правилам (значительно превышен лимит символов, переспам), то поисковый робот составляет описание автоматически, «собирая» его по кусочкам фраз на странице. Результат получается не сильно привлекательный и «продающий».
Как заполнять
Дано: магазин продажи книг; ключевые слова «интересная книга», «купить книгу»
Неудачный Description: Книги издавна являются одними из самых близких «друзей» человека. Интересная книга помогает скоротать время, дает полезные знания, раскрывает занимательные факты, пробуждает эмоции. Потому стоит задуматься о том, чтобы купить книгу в нашем магазине.
Удачный Description: Нужна интересная книга? В нашем магазине — широкий выбор тематик: от узкоспециальной литературы до мировых бестселлеров. У нас Вы можете купить книгу с доставкой в течение 1-5 дней в любой регион РФ. Первым покупателям — скидка 10%.
Первый вариант — не специально составленный meta-тег, а взятый со страницы кусок статьи. Возможно, пользователю интересно почитать литературный текст, но, обращаясь к поисковой системе, он предпочтет получить ответ на конкретный запрос о покупке. Потому мета-теги для сайта второго типа более привлекательны: они сразу дают понимание, какой ассортимент и преимущества предлагает магазин.
Keywords
Сообщает поисковому роботу ключевые слова, под которые «заточен» контент. Поисковый робот сверяет фразы в содержимом страницы с указанными в данном теге, а полученные результаты учитывает в дальнейшем при определении позиций ресурса.
Сейчас поисковики не придают данному атрибуту такой вес, как раньше. Но грамотное использование его не будет лишним.
Как заполнять
Используйте 3-6 ключевых слов/фраз через запятую. Чрезмерное употребление может расцениваться поисковиком как переспам. В список должны включаться только используемые на странице запросы, под которые оптимизирован текст, названия товаров и так далее.
Мета-теги технического характера
Это атрибуты внутренней оптимизации ресурса. Такие мета-теги настраивают информацию, которая отображается пользователю в браузере, и включают отдельные опции (к примеру, дают возможность закрыть для индексации отдельные разделы).
Наиболее распространенные технические мета-теги:
- Content-type. Включает данные о типе документа и кодировке. Влияет на то, насколько корректно страница будет отражаться в браузере. Особенно актуален при неверной настройке браузера или сервера. В такой ситуации документ будет показан на другой кодировке, и пользователь не сумеет ничего изменить даже попыткой переключить вручную.
<meta http-equiv=»Content-type» content=»text/html;charset=windows-1251″> (для кириллицы используется атрибут windows-1251 или KOI-8R)
- Content-language. Содержит информацию о языке контента (содержимого). Как и с предыдущим тегом, сейчас браузеры определяют язык автоматически. Но в случае неверных настроек данный тег будет полезен.
<meta http-equiv=»Content-Language» content=»ru»>
- Robots. Показывает поисковому роботу, какие страницы следует включать в индекс, а какие — нет. Данный тег предполагает ряд дополнительных атрибутов: index/noindex (можно/нельзя индексировать); follow/nofollow (учитывать/не учитывать гиперссылки); all/none (открыть/закрыть для индексации страницу и гиперссылки).
<meta name=»robots» content=»noindex»>
- Refresh. Позволяет задать время обновления страницы при загрузке либо переадресации пользователя в другой раздел. Тег полезен в случае обновления сайта: вместо страницы ошибки 404 или длительной загрузки перенаправляет пользователя в новый раздел.
<meta http-equiv=»refresh» content=»N; url=URL»>
- Meta Author и Copyright. Этими тегами можно прописать авторство графического и текстового содержимого страницы.
<meta name=»Author» content=»Пупкин Василий Петрович»> (автор страницы)
<meta name=»Copyright» content=»Зимина Татьяна Юрьевна»> (принадлежность авторских прав)
<meta name=»Address» content=»г. Москва, Дмитровское шоссе 97″> адрес автора/собственника)
Все выше перечисленные мета-теги для сайта призваны, прежде всего, улучшить восприятие вашего ресурса поисковиком. Потому уделите внимание грамотному составлению атрибутов, отражайте только правдивую информацию.
Помните, что сейчас поисковики оценивают ресурсы, в первую очередь, по качеству контента, кода, структуры. Потому при составлении мета-тегов важно ставить себя на позицию пользователя: указывать данные, способные повлиять на восприятие и отображение страницы, преподносить полезную информацию последовательно, логично, с ключевыми выгодами для клиента.
Мета-теги — только часть (хотя и необходимая часть) технической оптимизации сайта. Чтобы выяснить, есть ли у вашего сайта проблемы с ними и со всеми другими параметрами, проведите полный поисковый аудит сайта.
Статью подготовила Виктория Закирова.