Как увеличить html спецсимволы
Перейти к содержимому

Как увеличить html спецсимволы

  • автор:

Курсы javascript

подскажите — как можно увеличить вертикальный размер символа (в высоте) ?
хочу скобки []|() растянуть например в высоту ячейки

Последний раз редактировалось _Eldar_, 28.02.2015 в 13:31 .

28.02.2015, 14:49

Регистрация: 02.01.2010

Сообщений: 6,455

Символа — никак. Можно трансформировать блок:

Но, имхо, лучше использовать в таких случаях картинку, чтоб не было проблем с кроссбраузерностью.

__________________

Последний раз редактировалось Aetae, 28.02.2015 в 14:52 .

1.9. Спецсимволы HTML

Спецсимволы HTML, или символы-мнемоники, представляют собой конструкцию SGML (англ. Standard Generalized Markup Language — стандартный обобщённый язык разметки), ссылающуюся на определенные символы из символьного набора документа. В основном они используются для указания символов, которых нет в стандартной компьютерной клавиатуре, либо которые не поддерживает кодировка HTML-страницы (Windows-1251, UTF-8 и т.д.).

Чтобы разместить символ на веб-странице, необходимо указать HTML-код или мнемонику.

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

Для вставки символов внутрь тегов воспользуйтесь HTML-кодом символа, а для использования символов в таблицах стилей, например, в качестве значения свойства content — CSS-код.

Спецсимвол наследует цвет от цвета текста родительского элемента. Чтобы изменить цвет спецсимвола, можно поместить HTML-код внутрь тега или задать нужное значение свойства color (при вставке спецсимволов через свойство content ).

Популярные спецсимволы HTML

  • Содержание:
  • 1. Полезные знаки и символы
  • 2. Знаки пунктуации
  • 3. Стрелки
  • 4. Карточные масти
  • 5. Деньги
  • 6. Знаки зодиака

1. Полезные знаки и символы

Вид HTML-код CSS-код Описание
�� 🖂 \1F582 Обратная сторона конверта
\2603 Снеговик
\2626 Православный крест
\2693 Якорь
\2706 Знак телефона
\260E Телефон
\2615 Горячие напитки
\270E Карандаш, направленный вправо-вниз
\270F Карандаш
\2710 Карандаш, направленный вправо-вверх
\2711 Незакрашенное острие пера
\2712 Закрашенное острие пера
\269C Геральдическая лилия
\26D1 Шлем с белым крестом
\269D Начерченная белая звезда
\2744 Снежинка
\2764 Закрашенное жирное сердце
\2745 Зажатая трилистниками снежинка
\2746 Жирная остроугольная снежинка
\2605 Закрашенная звезда
\2606 Незакрашенная звезда
\272A Незакрашенная звезда в закрашенном круге
\272B Закрашенная звезда с незакрашенным кругом внутри
\272F Вращающаяся звезда
\2749 Звёздочка с шарообразными окончаниями
\274B Жирная восьмиконечная каплеобразная звёздочка-пропеллер
\2732 Звёздочка с незакрашенным центром
\2600 Закрашенное солнце с лучами
\2601 Облака
\2602 Зонтик
\2611 Галочка в квадрате
\2612 Крестик в квадрате
\2639 Нахмуренный смайлик
\263A Улыбающийся смайлик
\263B Закрашенный улыбающийся смайлик
\262D Серп и молот
\2691 Закрашенный флаг
\2690 Незакрашенный флаг
\2630 Триграмма
\273f Закрашенный цветок
\2740 Незакрашенный цветок
\273E Цветок с шестью лепестками
\2741 Закрашенный обведённый цветок
\2742 Цветок из точек
\2709 Конверт
\2766 Сердце в виде цветка
\2776 Номер 1
\2777 Номер 2
\2778 Номер 3
\2779 Номер 4
\277A Номер 5
\277B Номер 6
\277C Номер 7
\277D Номер 8
\2792 Номер 9
\2793 Номер 10
\2716 Жирный знак умножения
\2718 Жирный крестик
\2714 Жирная отметка галочкой
\271A Жирный крест
\269B Символ атома
\267A Символ переработки
\2751 Незакрашенный квадрат с правой нижней тенью
\2752 Незакрашенный квадрат с правой верхней тенью
\25C8 Алмаз в оправе
\25D0 Круг с левой закрашенной половиной
\25D1 Круг с закрашенной правой половиной
\2042 Три звездочки

2. Знаки пунктуации

Вид HTML-код CSS-код Описание
  \00A0 Неразрывный пробел
­ ­ \00AD Место возможного переноса
< \003C Знак «меньше чем» (начало тега)
> > \003E Знак «больше чем» (конец тега)
« « \00AB Левая двойная угловая скобка
» » \00BB Правая двойная угловая скобка
\2039 Левая угловая одиночная кавычка
\203A Правая угловая одиночная кавычка
« " \0022 Двойная кавычка
\2032 Одиночный штрих
\2033 Двойной штрих
\2018 Левая одиночная кавычка
\2019 Правая одиночная кавычка
\201A Нижняя одиночная кавычка
\201C Левая двойная кавычка
\201D Правая двойная кавычка
\201E Нижняя двойная кавычка
\275C Жирная одинарная верхняя запятая
\275B Жирная одинарная повёрнутая верхняя запятая
& & \0026 Амперсанд
' \0027 Апостроф (одинарная кавычка)
§ § \00A7 Параграф
© © \00A9 Знак copyright
¬ ¬ \00AC Знак отрицания
® ® \00AE Знак зарегистрированной торговой марки
¯ ¯ \00AF Знак долготы над гласным
° ° \00B0 Градус
± ± \00B1 Плюс-минус
¹ ¹ \00B9 Верхний индекс «1»
² ² \00B2 Верхний индекс «2»
³ ³ \00B3 Верхний индекс «3»
¼ ¼ \00BC Одна четверть
½ ½ \00BD Одна вторая
¾ ¾ \00BE Три четверти
´ ´ \00B4 Знак ударения
µ µ \00B5 Микро
\00B6 Знак абзаца
· · \00B7 Знак умножения
¿ ¿ \00BF Перевернутый вопросительный знак
ƒ ƒ \0192 Знак флорина
\2122 Знак торговой марки
\2022 Маркер списка
\2026 Многоточие
\203E Надчеркивание
\2013 Среднее тире
\2014 Длинное тире
\2030 Промилле
} } \007D Правая фигурная скобка
{ { \007B Левая фигурная скобка
= = \003D Знак равенства
\2260 Знак неравенства
\2245 Конгруэнтность (геометрическое равенство)
\2248 Почти равно
\2264 Меньше чем или равно
\2265 Больше чем или равно
\2220 Угол
\22A5 Перпендикулярно (кнопка вверх)
\221A Квадратный корень
\2211 N-ичное суммирование
\222B Интеграл
\203B Знак сноски
÷ ÷ \00F7 Знак деления
\221E Знак бесконечности
@ @ \0040 Символ собака
[ [ \005B Левая квадратная скобка
] ] \005D Правая квадратная скобка

3. Стрелки

Вид HTML-код CSS-код Описание
\2190 Стрелка влево
\2191 Стрелка вверх
\2192 Стрелка вправо
\2193 Стрелка вниз
\2194 Стрелка влево-вправо
\21B5 Стрелка вниз и влево – знак возврата каретки
\21D0 Двойная стрелка налево
\21D1 Двойная стрелка вверх
\21D2 Двойная стрелка направо
\21D3 Двойная стрелка вниз
\21D4 Двойная стрелка влево-вправо
\27A0 Летящая стрела
\27A4 Наконечник стрелы
\27A5 Изогнутая стрела, указывающая вниз и вправо
\27A6 Изогнутая стрела, указывающая вверх и вправо
\27B3 Стрела направо
\21BA Круглая стрелка с наконечником против часовой стрелки
\21BB Круглая стрелка с наконечником по часовой стрелке
\21E7 Толстая полая стрелка вверх
\21A9 Стрелка налево с крючком
\27AB Наклонённая вниз объёмная стрелка
\2B07 Закрашенная стрелка вниз
\2B06 Закрашенная стрелка вверх

4. Карточные масти

Вид HTML-код CSS-код Описание
\2660 «Пики»
\2663 «Трефы»
\2665 «Червы»
\2666 «Бубны»
\2661 Контур «Червы»
\2662 Контур «Бубны»
\2664 Контур «Пики»
\2667 Контур «Трефы»

5. Деньги

Вид HTML-код CSS-код Описание
¢ ¢ \FFE0 Цент
£ £ \FFE1 Фунт стерлингов
\20BD Российский рубль
¥ ¥ \00A5 Йена или юань
\20AC Евро
$ $ \0024 Доллар
\20B4 Знак гривны
\20B9 Индийская рупия
\5713 Китайский юань
\20B8 Казахстанский тенге

6. Знаки зодиака

Вид HTML-код CSS-код Описание
\2648 Овен
\2649 Телец
\264A Близнецы
\264B Рак
\264C Лев
\264D Дева
\264E Весы
\264F Скорпион
\2650 Стрелец
\2651 Козерог
\2652 Водолей
\2653 Рыбы

Как использовать символы Unicode в Title и Description для привлечения пользователей из выдачи

like

121

  • Что такое спецсимволы Юникода и HTML
  • Зачем они нужны в заголовке и описании страницы
  • Правильное использование специальных символов и «всё хорошо, что в меру»
  • Как понять, как значок отобразится в браузере
  • Какие символы не стоит использовать
  • Где найти эти символы
  • Часто используемые спецсимволы
  • Вывод

Что такое спецсимволы Юникода и HTML

Символы Юникода – это конструкции SGML (англ. Standard Generalized Markup Language), с помощью которых можно использовать почти все письменные языки мира, а также большое количество специальных символов, которых нет в раскладке клавиатуры.
Применение таких знаков не ограничивается оформлением Title и Description, однако в этой статье вы узнаете, как их использовать именно в этом случае.

Зачем такие символы нужны в заголовке и описании страницы

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

Символы привлекают внимание пользователей.

Пример:

Пример использования символов в сниппете

Можно использовать не только стрелки, но и другие спецсимволы, подходящие по смыслу.

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

Правильное использование специальных символов и «всё хорошо, что в меру»

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

Пример использования значка папки в Title

Или, если сайт предлагает туристические путёвки за границу с перелётом, уместен будет спецсимвол с изображением самолёта:

Пример использования значка самолёта в Title

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

Пример слишком большого количества символов:

Пример некорректного использования символов в сниппете

Такой сниппет, возможно, привлечёт внимание, но слишком большое количество значков, скорее, отпугнёт пользователей, чем побудит заказать обувь.

Как понять, как отобразится символ в браузере

Важно помнить, что эти знаки по-разному отображаются в каждом браузере и на каждом устройстве.
Прежде чем оформлять Title и Description со значками, проверьте, как они будут отображаться.

Посмотреть, как отобразится тот или иной символ в сниппете, можно путём проверки в поисковой выдаче:

1. Откройте страницу поиска, введите любой запрос и нажмите «Найти».
2. Кликом правой кнопки мыши откройте меню, в котором выберите пункт «Просмотр кода страницы».
3. С помощью инструмента, изображённого ниже, укажите один из сниппетов выдачи и вы увидите этот элемент в коде.

инструмент выбора элемента страницы в коде

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

Проверка отображения символов в сниппете с помощью кода страницы

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

Плюс такого метода проверки – вы примерно узнаете, как будет выглядеть сниппет. Минус – занимает много времени и не очень удобно.

Существуют сервисы, в которых можно проверить конечный вид сниппета, однако они не гарантируют 100% варианта. Например, Saney позволяет проверить вид сниппета Google в десктопной выдаче:

Проверка сниппета в поисковых системах Google

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

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

Пример некорректного отображения:

Пример некорректного отображения символов в сниппете

Какие символы не стоит использовать

Стоит упомянуть, что Emoji больше не отображаются в сниппете десктопной поисковой выдачи Google.
Их ещё можно встретить в сниппетах некоторых сайтов, однако не стоит добавлять эмодзи сейчас – это может стать пустой тратой времени.

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

Где найти эти символы

Существует несколько сайтов со списком спецсимволов. Один из наиболее удобных для подбора подходящих значков – Таблица символов Юникода.

Выбор символов Юникода в сервисе

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

Также некоторые из них можно найти в Википедии.

Часто используемые символы:

Значение Символ Юникод HTML Символ Юникод HTML Символ Юникод HTML
Стрелки U+27A8 U+2794 U+27A4
U+279C U+25B6 U+261B
Знаки валют $ U+0024 $ U+20BD £ U+00A3 £
U+20AC U+20B4 ¥ U+00A5 ¥
Звезды U+2605 U+2606 U+272D
Специальные символы © U+00A9 © ® U+00AE ® U+2122
Значки телефона U+1F580 🖀 ? U+1F4DE 📞 ? U+1F4F1 📱
Транспорт ? U+1F69A 🚚 U+2708
Галочки U+2713 U+2705 U+2714
Разное U+271A U+2600 U+2665
U+273F U+2709 U+2662

Вывод

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

Не всегда сайт, находящийся на первом месте в выдаче, получает больше трафика, чем те, которые занимают 2–3 позицию. На это как раз и влияет привлекательность сниппета, улучшить которую можно с помощью спецсимволов Юникода и HTML.

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

Подписаться на рассылку

  • Нужен ли сайту безопасный протокол? «За» и «Против» переезда на https В каких случаях нужно переезжать на https Когда не стоит спешить с переездом Вывод Тема переезда на https, наверное, самая обсуждаемая в Рунете. Живой.
  • Почему не работает накрутка ПФ? Накрутка ПФ обрела массовый характер в Яндексе, появилось много вопросов по ней. Один из вопросов, почему накрутка ПФ не работает? Многие клиенты так или иначе.
  • Как не терять трафик из товарных карточек, если товара нет в наличии? Нередко владельцы интернет-магазинов сталкиваются с тем, что на сайте скапливается большое количество страниц с отсутствующим товаром. С одной стороны, карточка товара – это источник поискового.
  • Надо ли прописывать alt-ы для картинок-анкоров? Есть сайт, у которого внутренняя перелинковка реализована через картинки, т.е. текстовых ссылок очень мало и они ведут на основные разделы только. Нужно ли прописывать alt.
  • Как оптимизировать изображения на сайте Как правильно оптимизировать изображения на сайте, чтобы они соответствовали требованиям поисковых систем и могли приносить дополнительный трафик на сайт? Об этом кратко рассказал Никита Простяков.

Работала помощником руководителя в молодой IT-компании, после чего прошла курсы SEO. Пришла в SiteClinic и поняла, что хочу работать именно здесь.

Окончила курсы английского языка с уровнем Upper-intermediate, первую работу получила в 15 лет, работаю помощником SEO-специалиста.

Занимаюсь продвижением проектов клиентов.

Девиз: Работа сама себя не сделает.

Как использовать спецсимволы в сниппетах для увеличения поискового трафика

Спецсимволы в сниппетах

Ваш сайт высоко ранжируется в поисковой выдаче, но ваша ЦА охотнее кликает на сниппеты конкурента? Одна из причин неудовлетворительной кликабельности — «сырое» оформление сниппетов.

Ранее мы уже рассказывали, как сделать красивый сниппет для Яндекса и Google и дублировать информацию не станем. В текущей статье пойдет речь о том, как использовать спецсимволы в сниппетах для привлечения пользователей из выдачи.

Для того чтобы это провернуть, нам понадобятся спецсимволы Юникода и HTML. Давайте обо всем по порядку.

Что такое спецсимволы Юникода и HTML

Спецсимволы HTML они же символы-мнемоники — конструкции SGML (англ. Standard Generalized Markup Language), ссылающиеся на определенные символы из символьного набора документа.

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

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

Пример привлекательного сниппета

Стоит сразу же предупредить, что наличие спецсимволов напрямую не влияет на результаты поисковой выдачи. Однако их присутствие поможет выделиться на фоне конкурентов.

В последнее время спецсимволам нашлось еще одно применение — они отлично вписываются в контекст вместо знаков препинания.

Как правильно использовать спецсимволы в сниппетах

Собственно официальных правил не существует. Главное чтобы они подходили по смыслу и не резали глаза (всего хорошего должно быть в меру).

Можно ли добавить символы в Title

До второй половины 2018 года в поисковой выдаче Google и Яндекса можно было встретить множество заголовков, оформленных различными спецсимволами и даже красочными Emoji.

Эмоджи в результатах поиска

Сегодня подобные символы практически исчезли по всем коммерческим и информационным запросам.

Как сообщают представители Яндекса: «Формулы для формирования сниппетов регулярно меняются». Что ж, возможно в скором времени что-то изменится к лучшему.

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

Однако немного покопошившись, мы смогли найти в выдаче обеих поисковых систем Title, оформленные спецсимволами.

Yandex:

Спецсимволы в Title Яндекс выдачи

Google:

Спецсимволы в Title Google выдачи

Где найти спецсимволы Юникода и HTML

Для подбора подходящих значков, отправляйтесь на сайт — Таблица символов Юникода.

Для фильтрации поиска вызовите меню, кликнув на иконку-гамбургер.

После отображения меню навигации обратите внимание на вкладку «Наборы», которая разбита на семь групп символов:

Вкладка «Наборы»

  1. Стрелки
  2. Сердечки
  3. Символы цветов
  4. Эмоджи (эмодзи)
  5. Символы звездочки
  6. Знаки валют
  7. Греческие буквы

Выберите группу, скопируйте символ и выполните предварительную проверку.

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

Группы спецсимволов

Еще один способ найти спецсимвол — воспользоваться полем поиска.

Как вставить спецсимволы в Description

Существует два способа размещения:

  • скопировать изображение из окна браузера и вставить в поле описания;
  • скопировать html-код символа — текстово-числовой код, состоящий из знака амперсанда (&), решетки (#), набора цифр и точки с запятой, и вставить в поле описания.

Как проверить, отображается символ в браузере или нет

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

Нам известно четыре способа, как понять, отображаются спецсимволы в браузере или нет:

  • Проверить символ в каждом браузере. Для этого достаточно скопировать изображение либо код, вставить его в поиск и нажать клавишу Enter. Сигналом о том, что символ почти наверняка появится в сниппете, является его отображение в выдаче.
  • Проверить на панели инструментов разработчика. Чтобы это провернуть, откройте страницу поиска, введите любой запрос, нажмите Enter и после отображения результатов вызовите панель разработчика. Для этого нажмите на правую клавишу мыши и в оконном меню выберите «Просмотреть код элемента». На следующем этапе выберите элемент, который выделен на скриншоте, и обозначьте им любой возможный сниппет. Инструмент в палели разработчикаОстается только двойным щелчком левой кнопки мыши нажать на элемент кода, вставить вместо него любой желаемый символ и нажать клавишу Enter. Символ смело можно использовать, если в выдаче каждого браузера появятся результаты.Проверка символов на панели инструментов разработчика
  • Проверитьинструментом проверки структурированных данныхот Google.
  • Проверить насервисе Saney.

Учтите, даже эти инструменты не гарантируют, что в результате выдачи отобразится идентичная картинка. Единственное что нам остается — активно тестировать.

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

Итог

Наличие специальных знаков помогает творчески обыграть сниппет, сделать его сочным и привлекательным. Главные условия, при которых спецсимволы наверняка «выстрелят» — умеренность, органичность и тематичность. Как говорится: «На войне все средства хороши». И эта поговорка особенно актуальна в наше время, когда уровень конкуренции зашкаливает.

сообщить об ошибке

Обнаружили в тексте грамматическую ошибку? Пожалуйста, сообщите об этом администратору: выделите текст и нажмите сочетание горячих клавиш Ctrl+Enter

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

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