Кавычки-ёлочки: как ставить в тексте для сайта, набирать и записывать в HTML

Коротко: как правильно ставить кавычки-ёлочки в тексте для сайта

В русском тексте основные кавычки — «ёлочки», а вложенные внутри них — „лапки“. Прямые кавычки ", которые даёт клавиатура, — это знак из пишущей машинки, а не типографская норма. Для сайта это вопрос аккуратности и доверия: поисковики одинаково понимают текст с «ёлочками» и с прямыми кавычками, но в заголовках, карточках товаров и сниппетах правильные кавычки выглядят профессиональнее. Эта статья про то, как кавычки ставятся: где нужны, где не нужны, куда деваются точка и запятая, как набрать знак на разных устройствах и как записать его в HTML. Общий разбор типографики (тире, неразрывные пробелы, цены) — в статье «Типографика текста»; я не повторяю его, а углубляюсь именно в кавычки.

Запомнить достаточно семи вещей:

1. Внешние кавычки — «ёлочки», внутренние — „лапки“. Два одинаковых знака подряд не ставят: «„Цыганы“ мои…», а не ««Цыганы» мои…».
2. Точка и запятая — всегда после закрывающей кавычки. Вопросительный и восклицательный знаки остаются внутри, если относятся к словам в кавычках (по Википедии).
3. Кавычки нужны для названий, цитат и прямой речи, а также слов в иронии или необычном значении; в остальных случаях их лучше не ставить.
4. Набор на клавиатуре: в Windows — Alt+0171 и Alt+0187 на цифровой клавиатуре; в macOS — сочетания с Option; на смартфоне — долгое нажатие на кавычку (по Википедии, данные могут отличаться в зависимости от версии системы).
5. В HTML — символами UTF-8 или сущностями « и »; для цитат — элемент <q> и CSS-свойство quotes.
6. В движке (WordPress и др.) часто работает автозамена прямых кавычек; проверьте результат и не путайте, где замена уместна, а где ломает код.
7. Не вставляйте кавычки в URL и не полагайтесь на них в заголовках ради ключевых слов: справка Google о заголовках не упоминает кавычки и типографику вообще.

Быстрая правка текста: типограф онлайн на tools.cetto.ru (расставляет «ёлочки» и „лапки“, длинное тире и неразрывные пробелы, не трогает теги и атрибуты). В статье: правила, ввод на устройствах, HTML и CSS, CMS и редакторы, кавычки в поиске, ошибки, десять частых случаев и PDF-чек-лист на 26 пунктов.

Оговорки по источникам. Основа — статья «Кавычки» в русской Википедии (прочитаны первые 100 тыс. знаков из 102 851), справочник MDN об элементе <q> и свойстве quotes, документация WordPress о wptexturize, справка Google о точной фразе и о title link. Справочник Розенталя и справка Грамоты.ру в моих запросах не открылись, поэтому номера параграфов не привожу; нормативный справочник проверяйте сами. Справка Microsoft Word об Alt-кодах вернула 404; коды Alt и сочетания для macOS даю по Википедии. В справках Яндекса, которые мне открылись, описания оператора кавычек в запросе не оказалось, поэтому про Яндекс я не утверждаю ничего. Это не консультация по орфографии; для официальных документов и изданий сверяйтесь с требованиями заказчика.

Правила: где кавычки нужны и как они выглядят

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

Википедия отдельно указывает на гиперкорректное употребление кавычек там, где они не нужны. Практическое следствие для карточек: не заключайте в кавычки обычные слова («качественный» диван, «надёжная» доставка), родовые названия (кресло, диван), размеры и характеристики. А вот сами названия брендов и моделей оформляйте единообразно по всему сайту: если бренд пишется «Икеа» в кавычках в одном месте и без них в другом, это выглядит небрежно. Если сомневаетесь, зафиксируйте единое правило в редполитике и придерживайтесь его.

Знаки препинания у закрывающей кавычки

Это источник большинства ошибок. По Википедии:

• Точка и запятая в русском всегда ставятся после закрывающей кавычки («Он сказал: „Хорошо“.»). Двоеточие и точка с запятой тоже идут после кавычки.
• Вопросительный и восклицательный знаки внутри кавычек, если относятся к цитате: «Где мой заказ?» — спросил клиент.
• Если цитата — самостоятельное предложение и заканчивается многоточием, вопросом или восклицанием, точку после кавычки не ставят.
• Американская английская традиция иная: точка и запятая ставятся перед закрывающей кавычкой. Для русского текста это неприменимо; для английского — зависит от варианта (британский и американский различаются, в британском одиночные кавычки для первого уровня, в американском — двойные).

Не путайте французскую традицию: французский язык тоже использует « » и ставит внутри них неразрывные пробелы; в русском такие пробелы внутри кавычек не нужны.

Вложенность. Основные кавычки — «ёлочки», внутри них — „лапки“. Третий уровень — одинарные лапки — в отечественной издательской практике встречается редко. Если технически набрать другой рисунок нельзя, допускается ««Цыганы» мои…», но такой вариант нежелателен (по Википедии). В тексте на сайте стоит избегать трёх уровней: переформулируйте предложение.

Как набрать кавычки на разных устройствах

Источник таблицы — Википедия; коды Alt в справке Microsoft мне открыть не удалось, поэтому проверьте на своём устройстве. Для макинтошей сочетания зависят от раскладки и версии системы. Практичнее всего настроить автозамену: в Word и других редакторах включается замена прямых кавычек на парные («умные кавычки»), и вы набираете обычную кавычку, а получаете «ёлочку». Есть также типографские раскладки клавиатуры (в Википедии упомянута раскладка Ильи Бирмана).

Если вы готовите текст вне CMS (в Word, Google Документах, мессенджере), а потом вставляете на сайт, проверьте результат: редакторы иногда вставляют „лапки“ английского вида (“ ”) вместо русских, а при копировании в CMS неразрывные пробелы и кавычки могут измениться. Быстрый способ привести всё к одному виду — типограф: типограф онлайн.

Кавычки в HTML и CSS

В HTML кавычки пишут символами UTF-8 (кодировка страницы должна быть UTF-8) или сущностями. Таблица кодов по Википедии:

• Не путайте прямую кавычку в тексте и в атрибуте. В значении атрибута (title="…", alt="…", content="…") прямая кавычка закроет значение. Либо используйте «ёлочки» символами, либо экранируйте как ". Это важно для мета-тегов: сломанный description обрежется на первой прямой кавычке.
• Цитаты в разметке. Для короткой цитаты в строке есть элемент <q>: по MDN, большинство современных браузеров сами обрамляют его кавычками. Для длинных цитат — <blockquote>. Атрибут cite указывает адрес источника.
• Какие кавычки поставит браузер, определяет CSS-свойство quotes. Значение auto берёт кавычки, уместные для языка из атрибута lang; можно задать явно пары: внешний уровень, потом вложенный. Для русского вложенность записывают так: quotes: "«" "»" "„" "“";. Не забудьте задать язык (<html lang="ru">), иначе auto может выбрать не то.
• Не использовать прямые кавычки в JSON, JS и конфигах как текст. Там кавычки — часть синтаксиса: в данных разметки Schema.org («ёлочки» внутри строк допустимы, а прямая кавычка внутри строки требует экранирования обратной косой чертой).
• В URL кавычки не используются. Прямая кавычка в адресе кодируется как %22; «ёлочки» — процентным кодированием из байтов UTF-8. Делайте адреса без кавычек: «ЧПУ».

Кавычки в CMS и редакторах

• WordPress и автозамена. По документации, функция wptexturize превращает прямые кавычки в парные, многоточие — в «…», тройной дефис — в длинное тире. Символы кавычек можно настроить в переводе, а отключить обработку можно фильтром run_wptexturize (возвращает false). Текст внутри pre, code, kbd, style, script, tt не меняется. Проверьте, какие кавычки получились у вашей темы и плагинов.
• Визуальный редактор. Часто вставляет прямые кавычки и неразрывные пробелы по-своему. После вставки текста из Word включите режим просмотра кода и проверьте.
• 1С-Битрикс, OpenCart, Tilda и другие. Правила автозамены различаются; единого поведения нет. Проверяйте на тестовой странице и фиксируйте решение в регламенте.
• Шаблоны мета-тегов. Если title формируется шаблоном из названия товара, а в названии есть кавычки, они должны корректно экранироваться; иначе возможны обрезанные description и сломанная разметка: «Мета-теги для SEO».
• Выгрузки и фиды. В XML и CSV кавычки требуют экранирования; в названиях товаров лучше использовать «ёлочки» и проверять фид валидатором на ошибки.

Кавычки и SEO: что известно

• Прямого влияния на ранжирование нет. В справках Google и Яндекса, которые я смог открыть, требований к типу кавычек нет. Справка Google о title link объясняет, как формируются заголовки, и ни слова не говорит о кавычках и типографике. Влияние косвенное: читаемость, аккуратность сниппета, доверие.
• Google может переписать заголовок. Если он сочтёт <title> неточным или шаблонным, он может взять текст из h1 или другого заметного текста. Не усложняйте title кавычками и спецсимволами ради ключевых слов: «Сниппет».
• Поиск по точной фразе. Google (справка): чтобы найти точное совпадение, слово или фразу заключают в кавычки. Это инструмент для проверки текстов и поиска заимствований: вставьте фразу из вашего описания в кавычках и посмотрите, у кого она встречается: «Уникальность текста». В справке, которую я открыл, не описано, насколько строго учитываются кавычки.
• Названия брендов и запросов. Люди ищут без кавычек; текст страницы должен содержать название бренда в привычной форме. Кавычки в самой странице поиску не мешают; точное совпадение важнее оформления.
• Единый стиль. Если на сайте встречаются и «ёлочки», и “английские”, и прямые кавычки, текст выглядит неряшливо. Выберите один вариант и проверяйте новые тексты.

Как проверить кавычки на сайте

1. Найдите прямые кавычки. Поиск по исходному тексту страниц (" вне атрибутов) покажет места, где автозамена не сработала.
2. Проверьте «английские» кавычки (U+201C и U+201D) в русском тексте: они выглядят похоже, но принадлежат другой традиции.
3. Проверьте парность и вложенность: каждой открывающей кавычке должна соответствовать закрывающая; два одинаковых знака подряд — ошибка.
4. Проверьте положение точки и запятой после закрывающей кавычки.
5. Проверьте мета-теги и атрибуты на обрезанные значения из-за прямых кавычек.
6. Проверьте шаблоны, карточки товаров, фиды и выгрузки на единый стиль.
7. Прогоните ключевые тексты через типограф и сравните результат: типограф онлайн.

Десять частых ошибок

1. Прямые кавычки в текстах вместо «ёлочек».
2. Английские “лапки” вместо русских в основном тексте.
3. Ёлочки внутри ёлочек без смены рисунка.
4. Точка перед закрывающей кавычкой в русском тексте.
5. Кавычки у родовых слов и характеристик: «качественный», «надёжный».
6. Разный стиль для одного бренда на разных страницах.
7. Прямая кавычка в атрибутах и мета-тегах, из-за чего значение обрезается.
8. Кавычки в URL.
9. Автозамена CMS ломает код, шаблоны или фиды.
10. Не задан язык страницы, поэтому браузер ставит не те кавычки у <q>.

Что проверяю в аудите я

В техническом SEO-аудите я смотрю не только структуру и скорость, но и состояние текстов: единообразие кавычек и тире, сломанные мета-теги из-за прямых кавычек, шаблоны title и description, обрезанные значения атрибутов, фиды и разметку. Результат: PDF-отчёт на 30–50 страниц, технические задания для программистов, прогноз по трафику и заявкам и созвон, на котором я лично расскажу о найденных ошибках и отвечу на вопросы. Стоимость от 30 000 ₽, срок 3–5 рабочих дней для небольшого сайта и 7–10 для крупного магазина.

Итоговый чек-лист (короткая версия, полная в PDF)

• В русском тексте основные кавычки — «ёлочки», вложенные — „лапки“; прямые и английские кавычки заменены.
• Точка и запятая стоят после закрывающей кавычки; вопросительный и восклицательный знаки — по смыслу.
• Кавычки стоят у названий, цитат и речи, а не у обычных слов и характеристик.
• В атрибутах и мета-тегах нет прямых кавычек без экранирования; язык страницы задан.
• Автозамена в CMS проверена и не ломает код, шаблоны и фиды.
• Ключевые тексты прогнаны через типограф, стиль единый по всему сайту.

Об автореВладимир Родионов

Интернет-маркетолог, частный SEO-специалист cetto.ru. 10+ лет в IT, 200+ реализованных проектов, сертификация Яндекса и Google.

Все статьи автора →Задать вопрос в Telegram →