Давайте согласимся иметь разногласия.
Роберт Льюис Стивенсон.

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

К ак я уже говорил в , мета-теги располагаются в заголовке html-страницы, между тегами и, и никак не отображаются браузером (за исключением содержимого тега «title»). Тем не менее, мета-теги для сайта играют очень важную роль. Их добавление и оптимизация могут существенно помочь сайту в его жизни.

Р екомендую использовать только те метатеги, которые реально нужны для работы сайта. Не загромождай область «head» лишними инструкциями, т.к. любая ошибка здесь может привести к печальным последствиям. Если знать, что делаешь, то мета-теги будут только на пользу, если же сваливать сюда всё подряд, то можно получить трудно диагностируемые проблемы.

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

С одержимое этого же мета-тега отображается и в заголовке окна :

В HTML мета-тег «title» добавляется следующим образом:

Содержимое мета-тега «title»

Основное содержимое страницы

К роме того, как я уже сказал ранее, ключевые слова , которые ты добавишь в мета-тег «title», крайне положительно воспримутся поисковиками. Поэтому, заполняя этот тег, постарайся включить в него правильные ключевые слова. О них, кстати, и пойдёт речь дальше.

§ 2. Мета-тег «keywords» (ключевые слова)

С начала вкратце о том, а что, собственно, такое эти самые «ключевые слова».

Т е слова, которые наиболее полно характеризуют содержимое html-страницы и будут для нее ключевыми. Это могут быть как отдельные слова, так и словосочетания, но они обязательно должны встречаться в тексте на странице. По ним поисковики определяют релевантность страницы тому или иному запросу.

Н апример, для этой странице ключевыми словами будут «мета-теги», «мета-тег title», «мета-тег keywords» и т.д.

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

Ч тобы облегчить работу поисковым системам, используется мета-тег «keywords». В нём вебмастер прописывает ключевые слова для страницы. HTML-код мета-тега «keywords» выглядит следующим образом:

Перечень ключевых слов">
Содержимое мета-тега «title»

Основное содержимое страницы

К лючевые слова нужно добавлять по одному, через запятую, в единственном числе. Например, не «ключевые слова», а «ключевой, слово». К тому же, безответственное поведение вебмастеров, которые в целях получения более высоких позиций в поисковиках забивали мета-тег «keywords» не только ключевыми словами, но и многочисленными производными от них, привело к тому, что поисковые системы практически перестали обращать внимания на этот тег. В настоящее время правильно заполненный мета-тег «keywords» используется поисковиками лишь как один из многих факторов ранжирования (далеко не главный). Если же они видят перед собой «keywords», в который запихнули все возможные вариации ключевиков, то это становится для них первым сигналом о неблагонадёжности данной страницы.

§ 3. Мета-тег «description» (описание страницы)

С ледующим важным мета-тегом является тег «description», в котором должно содержаться краткое описание страницы. Именно «краткое» и именно «описание страницы». Достаточно добавить одно-два небольших предложения, в которых указать о чём и для кого эта страница.

В ажной особенностью мета-тега «description» является то обстоятельство, что в случае его правильного заполнения поисковые системы именно на его основе формируют сниппет страницы в выдаче (краткое описание под ссылкой на страницу):

Е сли поисковикам не нравится то, как заполнен мета-тег «description», то сниппет формируется из кусочков фраз (надёрганных со всей страницы), которые релевантны запросу.

Т аким образом, правильный мета-тег «description» обязательно содержит ключевое слово (фразу) и коротко и точно описывает то, о чём и для кого страница. «Description» вместе с «title» образуют пару очень важных мета-тегов, от которых зависит то, перейдёт пользователь из поисковой выдачи на сайт или нет! Поэтому его, как и «title», нужно прописывать для каждой страницы!

H TML-код для создания мета-тега «description» будет следующим:

Содержимое мета-тега «description»">
Содержимое мета-тега «title»

Основное содержимое страницы

Т еперь перейдём к описанию основных технических мета-тегов из группы «HTTP-EQUIV» (HTTP-эквиваленты).

§ 4. Технические мета-теги

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

• content-type - тип документа и его кодировка. Этот мета-тег нужен для правильного отображения символов браузером.
  Кодировок существует много. Большинство из них тебе даже никогда не встретится. Не говоря уже про то, что ты будешь их использовать сам. Современные браузеры определяют тип кодировки атоматически, но для большей уверенности можно указать его и самостоятельно. Если ты создаёшь html-документ в операционной системе Windows, языком которой является русский, то кодировка будет «windows-1251», а код для вставки мета-тега такой:

  Содержимое мета-тега «title»

  Основное содержимое страницы
  

• content-language - указание языка документа. Значение этого необязательного мета-тега используется как поисковыми роботами, так и web-серверами. Код для вставки:

  Содержимое мета-тега «title»

  Основное содержимое страницы
  

• refresh - время (в секундах), через которое произойдет автоматическая перезагрузка документа или переход на другую html-страницу с заданным адресом (url). Например, чтобы производить атоматическую перезагрузку документа каждые 30 секунд, нужно вставить этот мета-тег так:

  Содержимое мета-тега «title»

  Основное содержимое страницы
  

  А, чтобы, спустя 5 секунд, перейти на страницу по адресу http://www.сайт/, нужно записать так:

  Содержимое мета-тега «title»

  Основное содержимое страницы
  

• robots - мета-тег, который отвечает за настройки индексирования страницы. У мета-тега «robots» могут быть следующие значения:
  • index - страница индексируется;
  • noindex - страница не индексируется;
  • follow - гиперссылки на странице учитываются;
  • nofollow - гиперссылки на странице не учитываются
  • all - заменяет «index» и «follow», т.е. страница индексируется и гиперссылки на ней учитываются (действует по умолчанию);
  • none - заменяет «noindex» и «nofollow», т.е. страница не индексируется и гиперссылки на ней не учитываются.

  Код для вставки мета-тега «robots»:

  Содержимое мета-тега «title»

  Основное содержимое страницы
  

author и copyright - мета-теги, которые позволяют указать авторство и владельца контента на странице. HTML-код для вставки:

Содержимое мета-тега «title»

Основное содержимое страницы

§ 5. Заключение

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

Заголовок страницы

О стальные применяй по мере необходимости, но особо не заморачивайся. Помни, что мета-теги не сделают твой сайт интересным, они могут лишь помочь браузеру и web-серверу правильно отобразить страницы сайта, а поисковой системе их найти.

Н а этом раздел моего сайта окончательно закончен и дальше речь пойдёт о том, с чего начать раскрутку и продвижение своего сайта в Интернете. Там же парочка моих советов из личного опыта по оптимизации страниц сайта. Жми на «Дальше».

Кодировка windows 1251 была создана в начале 90 годов для русификации программных продуктов, выпускаемых корпорацией Microsoft :

Кодировка является 8-битной и включает в себя символы славянской группы языков, в которую входят русский, белорусский, украинский, болгарский, македонский, сербский – это дает преимущество перед остальными кириллическими кодировками (ISO 8859-5, KOI8-R, CP866 ). Однако у 1251-кодировки имеются и весомые недостатки:

• 0xFF (25510) – это код, который зарезервирован для символа «я». В программах, которые не поддерживают чистый 8-ой бит, часто возникают непредсказуемые проблемы;
• Нет псевдографики, которая присутствует в KOI8 , CP866 .

Ниже приведены символы из Code Page 1251 или сокращенно СР1251 (числа под символами являются кодом в шестнадцатеричной системе такого же символа в Юникоде ):

Кодировка windows 1251 в html

Нередко у web-разработчиков и блогеров, обладающих различной квалификацией возникает проблема с кодировкой страниц: вместо подготовленного текста появляются неизвестные, нечитаемые символы. Чтобы разобраться с данной проблемой, необходимо понимать суть термина «кодировка страницы ».

Текст в памяти компьютера хранится в виде определенного количества байт, а не в том виде, в котором он отображается в текстовом редакторе. Каждый байт является кодом, который соответствует одному символу. Для того чтобы текст на странице отображался как следует, нужно сообщить браузеру, какую таблицу кодов для расшифровки и отображения он должен использовать.

Таблица кодировок не является универсальной, то есть, для расшифровки текста необходимо использовать ту, которая соответствует кодировке символов:

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

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

Кодировка windows 1251 в PHP

Ни для кого не является тайной, что генерация страниц проходит путем выборки и использования какой-то части информации, которая хранится в базе данных. При написании сайта на PHP , чаще всего это mysql :

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

Для согласования расшифровки необходимо выполнить функцию mysql_query(«SET NAMES cp1251») – это означает, что преобразование из машинного кода будет осуществляться согласно таблице cp1251 .

Кодировка windows 1251 в htaccess

При создании сайта, предварительно настроив кодировки в шаблонах и базах данных, все равно может всплыть проблема некорректного отображения информации в браузере.

Для того чтобы для веб-ресурса была задана кодировка виндовс-1251 , необходимо найти (или создать ) файл .htaccess . Это файл, который хранит в себе дополнительные настройки и описания конфигураций web-сервера.

В нем для установки кодировки следует прописать следующие строки:

• DefaultLanguage ru;
• AddDefaultCharset windows-1251;
• php_value default_charset «cp1251».

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

Хорошо Плохо

Задаём набор символов

Мета-тег

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

charset=UTF-8 » />

charset=»utf-8″ /> (вариант для HTML 5)

Надо вставить его в раздел — лучше в самое начало, сразу после открывающего :

Мета-тег кодировки

Через.htaccess (если ничего не помогает)

Обычно первых двух вариантов достаточно и браузеры отображают текст как надо . Но с некоторыми из них могут быть проблемы и поэтому можно прибегнуть к помощи файла.htaccess .

Для этого в нём нужно прописать такую строчку:

AddDefaultCharset utf-8

Вот и всё. Если вы примените последовательно 3 этих способа задания кодировки на своём проекте, то вероятность того, что всё будет отображено как надо , близка к 100 %.

Как «увидеть», что скрывается за непонятными символами на сайте?

Если вы зашли на веб-страницу, видите «кракозябры» и хотите увидеть нормальный текст, то тут только два пути:

• сообщить сайтовладельцу, чтобы всё настроил как следует
• попытаться угадать кодировку самостоятельно. Делается это стандартными средствами браузеров. В Chrome, например, нужно в меню щёлкнуть «Инструменты => Кодировка» и из огромного списка выбрать подходящий набор символов (т.е. угадать).

К счастью, практически все современные веб-проекты делаются в кодировке UTF-8, которая является «универсальной» для разных алфавитов и поэтому всё менее и менее вероятно увидеть эти непонятные символы в Интернет.

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

С какими проблемами можно столкнуться при неверном выборе, в каких программных продуктах можно изменять этот параметр, а также как ее можно задать в коде. Думаю, настало время приступить к делу!

Почему кодировка так важна и какие существуют типы?

Как только сфера IT начала развиваться, вместе с ней развивались и совершенствовались кодировки. Почему же они так важны для веб-разработки и сайтостроения?

На самом деле корректное отображение символов на дисплее девайсов – это достаточно сложная штука, ведь это не прямой процесс. Любой символ относящийся к кириллице, латинице, цифрам и другим алфавитам формируется благодаря двум параметрам:

1. Векторное представление (формы) всевозможных единиц разных алфавитов, которые хранятся в документах со шрифтами на каждом персональном компьютере;
2. Номер или код, по которому можно найти указанный символ в этих документах.

Так как за кодирование знаков отвечает не что иное, как операционная система, а после и программы, в которых вы работаете, любой текстовый контент для них выглядит как набор байтов. При этом каждый байт отвечает за конкретный символ. Из этого вы и получаете определенные размеры файлов.

Как же ОС подставляет нужные буквы и знаки? Для нее все очень просто. Осуществляется поиск символа по считанному коду в документе шрифтов и после подставляется.

На сегодняшний день существует несколько основных стандартов кодировок и их подтипов. К ним относятся ASCII и ее дочерние типы CP866, KOI8-R и Windows 1251, Unicode с кодировками UTF. Однако на сегодняшний день все лавры почета достались UTF-8. И это оправдано. Чтобы вы четко понимали сложившуюся ситуацию, переходим к следующей главе.

Досье на Аски

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

ASCII (Аски) и первые наследники

В первых версиях Аски было доступно только 128 знаков, среди которых уместились латинские буквы, арабские цифры и дополнительные символы. Однако из-за недостатка значений, кодировка была расширена в 2 раза (т.е. до 256). Вследствие этого появилась возможность добавлять к существующим значениям свои. Наверное поэтому и существует несколько видов таблиц с русскими символами.

Первой в себя включила алфавит русского языка CP866. Помимо этого, в расширенную версию входила и псевдографика.

Вслед за ней свет увидел аналог – KOI8-R. Особенностью KOI8-R является расположение русских букв не по алфавиту, а в примерно тех же столбцах, что и созвучные латинские буквы.

В тот «железный век» IT-технологий не было такого изобилия графических ОС, поэтому псевдографика спасала разработчиков, помогая им создавать более-менее разнообразные .

Переход в современность – Windows 1251

Это еще один расширенный тип стандарта ASCII, однако он связан уже с современными графическими ОС. Что же это означает? А то, что псевдографика больше никому не была нужна.

Windows 1251 еще называют «в народе» кириллицей. Все потому что в данной таблице место ненужных знаков заняли недостающие символы русского и других славянских языков, а также аналогичная типографика.

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

Эти чудовища появляются только тогда, когда неверно установлен тип кодировки. Долгое время эту проблему пытались решить разными способами. Но вслед за одной дилеммой появилась и другая – нехватка 256 байтов для хранения всех существующих символов (например, японского языка).

Приход новой власти

Спасательным кругом оказался новый стандарт кодирования алфавитов – Unicode. Все его кодировки имеют в названии UTF, а после через дефис количество битов для 1-го символа.

Так вот, продвинутые умы того времени скооперировались и создали UTF-32. Конечно это решило проблему нехватки места для тех же объемных иероглифов, однако вызвало другую – размер файлов увеличивался в 4 раза.

После выделяемая память уменьшилась до 16 бит. И наконец дошла до 8.

UTF-8 является стандартом, который не использует фиксированный размер битов для одного символа и в этом ее огромное преимущество: использование переменной длины.

Благодаря этому латиница и другие простые символы кодируются 1-м байтом, как и в ASCII. А вот «тяжелые» знаки могут быть представлены от одного и до шести байт последовательно. Стоит отметить, что помимо алфавитов, в таблицах Юникода можно найти всевозможные закорючки, смайлы, греческие буквы, цветы и другие нестандартные элементы.

Вот мы и разобрали, почему UTF-8 стала лидером.

Программы для перевода текста из одной кодировки в другую

На самом деле изменить формат кодирования файлов очень просто и доступно в большинстве программ: «Блокнот», «Notepad++», «PSPad» и другие аналоги предоставляют такую возможность, а также профессиональные продукты наподобие Visual Studio, IntelliJ IDEA и т.д.

Для новичков подойдет и работа в «Блокноте». Просто откройте нужный файл, выберете «Сохранить как…» и снизу диалогового окна измените вид кодировки.

Для более продвинутых отличным инструментом станет Notepad++. Он предлагает широкий выбор различных кодировок, в том числе UTF-8 с BOM и без него. Хотя предпочтительнее выбирать второй вариант.

Хочу сказать несколько слов о BOM. Полное название Byte Order Mark, что в русскоязычных кругах более известно, как «маркер последовательности (порядка) байтов». Такая метка устанавливается в самом начале документа с текстом и обычно используется для обмена файлами. Она занимает 3 байта, которые выглядят следующим образом: ef bb bf.

Однако, чтобы не было проблем с распознаванием кодировки файлов, стоит использовать UTF-8 без метки.

Набор инструментов для девелоперов

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

Первый вариант – это указать в документе.htaccess «AddDefaultCharset UTF-8».

Второй – в теге meta объявить значение для charset. Данный атрибут появился с выходом в свет . В качестве примера я прикрепил программную реализацию.

Привычный вид text-а! Все 4 слова и 2 числа отобразились корректно.

Поэкспериментируйте и подставьте другие названия кодировок.

Если материал статьи был вам полезен и понравился, то подписывайтесь на обновления блога и делитесь ссылкой на статьи с друзьями. Желаю удачи. Пока-пока!

С уважением, Роман Чуешов

Прочитано: 120 раз

Довольно часто начинающие блоггеры, и не только начинающие, сталкиваются с проблемой кодировки страницы html. Когда вместо текста и читаемых символов выводятся непонятные КРАКОЗЯБРЫ. Именно так называются символы не соответствующие тем которые должны быть выведены на страницу. Откуда же появляются непонятные иероглифы?

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

Базовой кодировкой является ASCIIкодировка, которая содержит в себе коды 128 символов латинского алфавита и специальные символы (скобки, решетки и т.д.). Далее появились первые русскосимвольные кодировки CP866 и KOI8-R, а из них вышла известная сегодняшним веб- мастерам кодировка windows-1251. Даже не смотря на то, что все эти кодировки призваны для отображения русского текста, они все отличаются друг от друга кодами.

Если текст писался в кодировке CP866, а браузер пытается раскодировать ее с помощью таблицы кодов windows-1251, то в результате мы получим не читаемые слова. Кроме названий тех кодировок, которые я здесь привел, существует еще великое множество котировок. С таким обилием кодовых таблиц образовалась проблема совместимости кодировок. Очень актуально встал вопрос создания универсальной кодировки. На сегодняшний день изобретена универсальная кодировка utf-8. При программировании сайта есть четыре момента которые требуют соблюдения единого стандарта кодирования текста.

• Кодировки скриптов.
• Кодировка таблиц MySQL.
• Кодировка самой HTML страницы.
• Локаль используемая браузером пользователя.

Во всех этих составляющих сайта, должна использоваться единая кодировка- желательно utf-8, ведь она универсальная. Если нажать сочетание клавиш CTRL+ U можно посмотреть код страницы, в котором видно, какая кодировка используется для данного документа.

Если Вы открываете свой блог и вместо русских символов видите какие то непонятные знаки- значит кодировка установлена неправильно.

Как поменять кодировку?

Для устранения ошибок и проблем с кодировкой Вашего блога используем FTP- клиент . С его помощью копируем файл wp- config.php на «Рабочий стол» Вашего компьютера и открываем с помощью текстового редактора Notepad++. В этом файле содержится информация Вашего блога- включая пароли, кодировку базы данных и другое. Смотрим, если кодировка какая либо другая, ее нужно поменять на UTF- 8.

• -сохраняем в этой кодировке.
• -внутри кода Базы Данных кодировку меняем на UTF- 8.

Сохраняем файл в редакторе Notepad++, в значении- «UTF- 8 без сигнатуры BOM» и закачиваем файл на свой хостинг, то есть меняем на хостинге старый файл wp- config.php, на новый.

Как правило этих действий достаточно для того чтобы на Вашем блоге все отображалось корректно. Если после проведенных действий ничего не получилось, можно попробовать еще один способ изменения кодировки. Для этого нужно внести изменения в файле.htaccess . Для корректировки открываем файл.htaccess с помощью редактора Notepad++ и добавляем в начале одну из данных строк:

• AddDefaultCharset UTF-8
• CharsetDisable On
• CharsetDefault UTF-8
• CharsetSourceEnc UTF-8

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

1. Открываем файл в редакторе.
2. Вносим изменения.
3. Сохраняем.
4. Закачиваем на хостинг.
5. Проверяем.

Еще хочу упомянуть об одной из проблем, которая может возникнуть, и с которой я столкнулся при создании страниц захвата. При закачке на хостинг файлов страницы захвата, так же может возникнуть ситуация несовпадения кодировок. В этом случае нужно подправить файл index.html. Для этого, с помощью FaleZilla, извлекаем файл и переносим на «Рабочий стол» компьютера. Далее, открываем файл с помощью обычного Блокнота.

После того как файл открылся в Блокноте, левой кнопкой мыши нажимаем на «Файл» и «Сохранить как...».