Как увеличить 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 для привлечения пользователей из выдачи

121

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

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

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

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

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

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

Пример:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Существуют сервисы, в которых можно проверить конечный вид сниппета, однако они не гарантируют 100% варианта. Например, Saney позволяет проверить вид сниппета 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:

Google:

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Итог

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

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