Рис. 23а Пример использования длинных цитат в HTML.
Победители европейского забега:
Участник № 1
ماقسيم
99 баллов – 1 место
Участник № 2
دميتري
97 баллов – 2 место
Участник № 3 John Connor 96 баллов – 3 место
Результат нашего примера:
Рис. 25 Пример использования разнонаправленных языков.
Обращаю Ваше внимание, что браузеры Internet Explorer
и Edge
не поддерживают тег .
Нюансы восточно-азиатских символов.
В HTML присутствуют элементы , и
Здравствуйте, друзья!
Написать о красивом оформлении цитат в тексте статей на блоге под управлением WordPress я решил, так как напрямую столкнулся с необходимостью такой работы. Мне пришлось менять шаблон на одном из сайтов. Но , на самом деле, довольно трудно. Несмотря на то, что сейчас существует огромное количество платных и бесплатных шаблонов, подобрать удовлетворяющий всем нашим требованиям очень сложно. Обязательно в шаблоне найдется что-то, что нам не нравится. Поэтому чаще всего приходится выбирать тему с наименьшим количеством недостатков, и потом ее дорабатывать.
Так вот, одним из недостатков выбранной мною темы было невыразительное выделение цитаты. Она выделялась только дополнительным отступом слева. Пришлось дорабатывать CSS-стили, чтобы этот элемент текста стал более заметным и красивым.
Назову три причины:
Вы показываете читателям, что данная часть текста является цитатой. Это необходимо для соблюдения авторских прав того человека, которого вы цитируете. С другой стороны, ссылка на авторитетного автора придает вес и вашей статье.
Поисковые системы «любят» уникальные тексты, и, если не будет правильно оформлена цитата, это будет засчитано как плагиат, и рейтинг сайта будет снижен, его позиции в поиске опустятся.
Особый вид цитат делает текст внешне более разнообразным и привлекательным. Его легче читать.
Для того, чтобы выделить часть текста особым образом, можно использовать различные способы.
Редактирование CSS-стилей
Первым и наиболее правильным способом оформления цитаты следует считать использование тега blockquote
и его стилей. Хотя с помощью CSS-правил можно выделить любой фрагмент (я об этом писал в статье ), только тег blockquote
дает знать поисковым системам, что этот фрагмент является цитатой, и он не может быть уникальным.
Именно этот тег ставится в код, если мы используем кнопку в
Но, как я уже отметил, не всегда стили этого тега такие, как нам хочется. Чтобы их отредактировать, нужно найти соответствующий код в файле style.css
и заменить правила, прописанные для тега blockquote
, на свои.
Этот файл можно редактировать двумя способами:
Скачать его с помощью FTP-клиента с сервера на свой компьютер, открыть в , внести изменения и снова закачать. Файл style.css
находится по адресу wp-content/themes/ваша_тема/style.css
.
Можно воспользоваться встроенным в WordPress редактором кода. Чтобы его открыть в панели управления WP выбираем Внешний вид – Редактор
. К сожалению, этот редактор не показывает номера строк, что затрудняет поиск.
Прежде, чем вносить изменения в файл style.css
, отредактируйте код с помощью в браузере Google Chrome
или аналогичном в браузере Mozilla Firefox
. С помощью этих средств можно сразу визуально увидеть, как будет выглядеть цитата на вашем сайте.
Примеры оформления цитат
Цитата с символом «кавычки»
Этот символ считается общепринятым для обозначения цитат, поэтому применяется чаще всего. Кавычки можно вставить, используя рисунок, что встречается чаще, а можно это сделать, применив код символа «\201C»
, что и показано в приведенном примере.
Вот изображение
А вот соответствующий код
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
blockquote {
background: none repeat scroll 0 0 #fea;
color: #009a82;
font-family: Georgia,serif;
font-size: 18px;
font-style: italic;
line-height: 1.45;
padding: 1.25em 50px;
position: relative;
width: 750px;
}
blockquote:before {
color: #009a82;
content: "\201C";
display: block;
font-size: 60px;
left: 1px;
position: absolute;
top: 1px;
}
blockquote {
background: none repeat scroll 0 0 #fea;
color: #009a82;
font-family: Georgia,serif;
font-size: 18px;
font-style: italic;
line-height: 1.45;
padding: 1.25em 50px;
position: relative;
width: 750px;
}
blockquote:before {
color: #009a82;
content: "\201C";
display: block;
font-size: 60px;
left: 1px;
position: absolute;
top: 1px;
}
В этом коде во второй строке #fea
– цвет фона, можно заменить на свой,
3 строка – цвет шрифта,
4, 5, 6, 7 – параметры шрифта,
8, 9 – положение фрагмента,
10 – ширина блока, ее можно указать в процентах, например, 90%.
13 – цвет,
16 – размер,
17-19 – положение.
Выделение рамкой
Вот пример:
А вот простой CSS-код для него:
1
2
3
4
5
6
7
blockquote {
color: #333;
font-family: Verdana, Geneva, sans-serif;
border: 1px dashed #999;
background: #F8F4AB;
padding: 10px 20px;
}
blockquote {
color: #333;
font-family: Verdana, Geneva, sans-serif;
border: 1px dashed #999;
background: #F8F4AB;
padding: 10px 20px;
}
Если вас заинтересовала тема оформления цитат, предлагаю скачать мини-книгу . В ней подробно разбираются различные примеры выделения фрагментов текста. Изучив эти примеры, вы сможете создать свой собственный стиль оформления.
Плагин WP-Note для оформления фрагментов текста на блоге
Этот плагин позволяет легко и просто оформить фрагменты статьи. Но сразу следует отметить, что для поисковиков эти фрагменты цитатами не будут считаться, так как в них не используется тег blockquote
. Плагин служит только для внешнего оформления, а не для выделения цитат.
По умолчанию, в настройках плагина есть пять вариантов оформления. Для того, чтобы их применить, не нужно изменять какой-либо код, достаточно не посредственно в визуальном редакторе вписать в начале и конце фрагмента вписать соответствующие теги.
Теги плагина WP-Note
Редактирование плагина
Если варианты оформления, установленные по умолчанию, вам не нравятся, или они не гармонируют с дизайном вашего сайта, их можно изменить. Но для этого уже придется вносить изменения в файл стилей. Найти его можно по адресу wp-content/plugins/wp-note/style.css.
Можно также использовать и встроенный редактор WordPress. Для этого в панели управления выбираем Плагины – Редактор
, потом справа в выпадающем списке находим Wp-note и нажимаем кнопку Выбрать
, появится список всех файлов плагина.
Надеюсь, я достаточно хорошо все объяснил, и теперь вам понятно, как оформлять цитаты на сайте. Не забывайте делиться статьей в социальных сетях.
До скорой встречи!
Слепое следование рекомендациям приносит пользу примерно с той же вероятностью, с какой блондинка может встретиться с динозавром – 50/50, то ли встретит, то ли нет. Чтобы не повстречать динозавра, нужно включать мозг даже тогда, когда, казалось бы, все расписано по пунктам. Профессионал тем и отличается от ламера, что на слова «
это сказано в инструкции
» отвечает вопросом «
а почему именно так?
».
Например, использовать вместо нужно вовсе не потому что «
Яндекс так больше любит
». Тег в семантике разметки означает именно
bold
–
жирное
начертание шрифта. А вот – это смысловой акцент, тег сообщает роботу, что автор хотел подчеркнуть что-то важное.
Или такие простые теги:
И .
Заключение фрагмента текста в теги
образует логическую единицу текста – абзац (paragraph). В тексте конец параграфа выглядит как обрыв строки (нажатие на Enter) – следующий параграф начинается с новой строки.
Тег – это конкретный символ «обрыв строки», он переносит следующий символ на новую строку. Но он никак не влияет на логическую структуру.
А со стороны результат действия обоих тегов может выглядеть одинаково
. Опытный сеошник понимает, к чему все это – ключевые слова внутри одного параграфа рассматриваются вместе, а разделение между двумя параграфами нарушает связь между ними.
Очень наглядно разницу между тегами можно увидеть в любимом Ворде:
И кстати, этим можно пользоваться. Чтобы завершить абзац, вы нажимаете Enter. Чтобы оборвать строку, надо нажать Shift+Enter.
Об одном заклинании … простите, про один интересный тег пойдет речь в этой статье.
Этот тег позволяет вставлять заимствованный текст с указанием источника. Таким образом вы можете использовать чужие слова без последствий для оценки уникальности и добавлять тексту авторитетности.
Семантическое ядро определяет не характеристику, а смысловое значение текста. Подбирая ключевые слова, важно думать не только о релевантности, но и о технической возможности поисковой системы отнести текст к той или иной группе документов по его смысловому значению.
Семантика – это не только единицы языка в лингвистике, но и значения конструкций в программировании. Это гораздо важнее с точки зрения SEO, ведь поисковые системы – это программы, работающие в полном соответствии с реализованными алгоритмами.
Например:
семантика HTML-документа определяется значением и иерархией его элементов. Так, тег определяет область данных HTML-документа, состоящую из описания (тег
) и содержания (тег ) документа. Уберите тег , и семантика документа будет нарушена.
Ссылочное ранжирование до сих пор играет немаловажную роль в продвижении сайта, но его значение лежит именно в плоскости цитирования, непонимание которого и привело к санкциям со стороны поисковых систем.
Индекс цитирования
(или ИЦ) - принятая в научном мире мера «значимости
» трудов какого-либо учёного. Величина индекса определяется количеством ссылок
на этот труд (или фамилию) в других источниках.
Есть и другие варианты определения смыслового значения (семантики) цитаты, где могут фигурировать теги (группировка элементов) и (описание для FIGURE), микроразметка и прочее, но здесь легко допустить фатальную ошибку, которая нарушит семантику и приведёт к непредсказуемым последствиям интерпретации.
Подведём итоги
Копирайтерам и сеошникам важно не только слепо следовать советам для веб-мастеров, но и понимать суть предлагаемых решений, определённых спецификациями.
Семантика – это не только единицы языка в лингвистике, но и значения конструкций в программировании, что гораздо важнее в разрезе продвижения сайтов в поисковых системах, которые являются программами.
Ссылочное ранжирование крепко завязано на смысловом значении цитирования.
Новинкой HTML5 является расширение семантической составляющей HTML-документа вообще и тега в частности - используйте генератор правильного HTML-кода цитат.