Как сделать заголовок wordpress
Оптимизация заголовков WordPress
Не все слова в заголовке страницы одинаково полезны: слова в начале имеют больший вес при ранжировании, чем слова в конце заголовка. Старые браузеры времен первых версий Netscape показывали только 62 символа в заголовке. Современные браузеры могут показывать гораздо больше, но большинство мониторов все равно вносит ограничение на максимальную длину видимого заголовка. Поисковые системы в своей выдаче, также, обрезают заголовки, чтобы хорошо выглядеть при разрешении 800×600. По этой причине для SEO оптимизации значимыми являются примерно 70 первых символов title.
Понятно, что каждая страница сайта должна иметь свой уникальный заголовок, оптимизированный под ее контент. При использовании различных CMS (таких как WordPress) заголовком страницы, обычно, является название статьи, расположенной на этой странице.
Кроме наличия ключевых слов, заголовок должен хорошо читаться и привлекать внимание, так как именно от этого зависит, придет ли на ваш сайт посетитель с результатов поиска.
В WordPress заголовки страниц с постами по умолчанию содержат только название поста. Чтобы иметь возможность настраивать заголовки страниц по своему желанию, установите плагин All in One SEO Pack.
Самой часто встречающейся ошибкой является задание заголовка h1 для названия сайта на всех страницах. Название сайта должно быть заголовком первого уровня только на главной странице сайта, т.к. оно оптимизировано именно под эту страницу. На всех остальных страницах название сайта, выведенное заголовком h1 будет ухудшать оптимизированность страницы под другие ключевые слова.
Чтобы исправить это в WordPress, придется отредактировать исходный код темы. Для этого открываем в текстовом редакторе файл темы, который выводит заголовок (обычно это header.php или title.php) и находим конструкцию bloginfo(’name’).
Вместо h1 может быть тег h2 или div. В этом случае заголовок не будет ухудшать оптимизацию страниц с постами, но вы не выжмите все возможности из главной страницы. Поэтому, замените код на такой:
Функция is_single() возвращает true для страниц постов. Таким образом, название сайта будет выводиться тегом h3 для страниц постов и тегом h1 для остальных страниц, включая главную. Возможно, вам придется поправить CSS таким образом, чтобы название сайта выглядело одинаково, независимо от того, каким тегом оно выведено (в примере за это отвечает CSS класс title).
Заголовки WordPress. Как использовать H1-H6
Отсутствие заголовков в тексте делает его сложным к прочтению. Заголовки WordPress, а также и подзаголовки — это, своего рода, знаки, на которые ориентируется пользователь в тексте.
Они помогают посетителю сайта понять общее содержание и интересна ли будет эта статья или нет. Я расскажу про важность заголовков для Seo и покажу их правильное использование.
Заголовки WordPress и структура текста
Заголовки — указатели, направляющие читателей через текст. Они должны раскрывать общий смысл абзаца.
Более того, если пользователь отвлечется от чтения, заголовок поможет найти область в тексте, на которой он остановился.
Создавая интригующие заголовки, вы можете еще больше заинтересовать читателя.
Но основное назначение заголовков — быть информативными и создавать более легкий к прочтению текст.
Если вы хотите улучшить структуру статьи, вам необходимо обратить внимание на:
В первом абзаце текста вы должны четко сформулировать, о чем будет ваша статья.
В книгах писатель обычно начинает с какого-то тизера, но для текстов на сайте у вас есть только секунды, чтобы привлечь внимание читателя.
Не забудьте поставить ключевое слово (focus) в этом первом абзаце.
Убедитесь, что первое предложение каждого абзаца является самым важным, основным предложением.
В конце концов, человек склонен читать лишь первое предложение нового абзаца, когда просматривает контент.
Заголовки WordPress и SEO
Заголовки важны для SEO, хоть и не являются основным фактором ранжирования сайта.
Google, как и живой читатель, любит понятный и информативный контент.
Если вы создаете хорошо структурированный, легко читаемый и интересный текст, поверьте, поисковик оценит его.
Как использовать заголовки h1-h6
Для форматирования текста используются заголовки, по-другому их еще называют тегами, h1, h2, h3, h4, h5, h6.Их можно найти в окне редактора вашей страницы или записи.
Все о том, как создать новый пост на сайте, читайте в нашей статье «Как добавить запись на сайте WordPress».
H1 — название страницы/записи, т.е. заголовок. И вы должны использовать его ТОЛЬКО один раз.
Другие заголовки можно использовать несколько раз, если это имеет смысл.
Заголовки WordPress имеют иерархическую структуру, которую вы должны соблюдать. Поэтому перед назначением H3 важно использовать H2 хотя бы один раз. Далее в тексте вы можете ставить H2 после использования H3.
H2 — его можно использовать 1 или 2 раза во всем тексте. Дело в том, что частая простановка H2 ведет к уменьшению его значимости для поисковиков.
H3 — можно использовать в подзаголовках абзацев. Он также должен содержать те или другие важные ключевые слова.
Что касается H4, H5, H6 — они не так часто используются в тексте.
Но вы также должны соблюдать иерархию: нельзя ставить тег H5 до H4, H6 до H5. Надеюсь, смысл понятен.
Не используйте в заголовках те слова, которые не передают смысл вашей статьи.
Вывод
Заголовки WordPress важны как для пользователя, чтобы сделать прочтение статьи легким и интересным, так и для поисковика, чтобы он воспринимал ваш сайт как информативный и внушающий доверие.
Вам может быть интересно:
Хотите узнать, как задавать рубрики и метки для записей блога? Читайте нашу статью о таксономии WordPress.
Вам также может быть интересна наша статья «Как создать навигационное меню на сайте».
Надеюсь, вам понравилась статья.
Если у вас есть вопросы, пишите в комментариях.
И подписывайтесь на нас в Facebook, Instagram и YouTube.
Заголовок h1 в WordPress – проверяем, исправляем
Здравствуйте уважаемые коллеги! Давно обещал и вот наконец выкладываю на свой блог WordPress-book.ru методику по замене тегов форматирования заголовков статей с H2 на H1. Зачем и кому это необходимо срочно сделать, читайте далее.
Как известно, поисковые системы при ранжировании страниц сайтов в поисковой выдаче, уделяют большое внимание тексту в заголовке статьи, заключенного в тег h1. По всем правилам внутренней SEO оптимизации в этом заголовке должно содержаться основное ключевое слово/словосочетание. Иначе ваша статья не будет релевантна поисковому запросу и, соответственно, будет занижена в поисковой выдаче.
Подробно про релевантность я писал в статьях «Оптимизация текста» и «Анализ сайтов конкурентов». Как проверить, все ли у вас с этим в порядке? Просто посмотрите исходный HTML код любой страницы вашего сайта. Для этого нажмите комбинацию клавиш Ctrl + U или щелкните правой клавишей мыши по любому участку страницы и в выпавшем меню выберите соответствующую ссылку, в моем браузере — « Просмотр кода страницы ».
Как видим, заголовок этой статьи отформатирован тегом h2. Более того, он содержит в себе ссылку на самого себя. Ссылка в заголовке допустима только в анонсах статей. Наличием таких SEO ошибок в заголовках грешат некоторые старые и все шаблоны, написанные в Artisteer третьей версии. Если заголовок вашей страницы заключен в тег h1 и он некликабелен, то у вас все с этим в порядке и дальше можете не читать. Если же ваши дела как в примере выше, читаем и исправляем. В шаблонных шаблонах, сделанных по шаблону :-), ошибка форматирования заголовков исправляется довольно просто. Как это сделать хорошо показал мой коллега Петр Куприянов в своем видео. Методика исправления других, нестандартных шаблонов, например, сделанных в Artisteer, как у меня, изложена чуть ниже.
Видео — «Как сменить заголовок WordPress на h1»
Как сменить теги заголовка статьи на h1 в шаблоне от Artisteer3
Если в футер темы вашего блога/сайта встроена иконка RSS (более неподходящего места для иконки rss и не придумать :-)),
в панели администратора в меню « Внешний вид » присутствует такая опция как « Artisteer Options »,
знайте, ваша тема создана в Artisteer 3 и следующая методика для вас. Иерархия заголовков в вашей теме должна соответствовать следующей правильной схеме:
На картинке я обозначил коды, отвечающие за цвет и размер шрифта заголовка статей и заголовка сайта. В файл post_title.php добавьте два фрагмента кода как на скриншоте ниже. Это изменение произведет перезаключение заголовка записи с тега h2 на правильный h1 а также уберет ссылку с заголовка в статье (не путать с анонсом статьи).
Завершите корректировку вставкой двух кусков кода, как показано на следующем рисунке:
WordPress.org
Codex
Дизайн Заголовка
Говорят, вы не можете судить о книге по ее обложке, и все-таки люди делают это каждый день. Они берут книгу, смотрят на обложку, а затем берут новую либо кладут обратно, или переворачивают и смотрят, что написано на обратной стороне, ИЛИ открывают её, только взглянув на обложку. Вебсайты также оценивают по их обложке и первому впечатлению, которое часто исходит от Заголовка.
Мы расскажем Вам об Архитектуре Заголовков в WordPress и предложим советы о том, как настроить его таким образом, чтобы он стал Вашей собственной «книжной обложкой», заманивающей людей на Ваш сайт, производя хорошее впечатление. Затем мы предложим Вам некоторые советы экспертов о том, что именно представлет собой Хороший заголовок на сайте.
Contents
WordPress Заголовок
По умолчанию, заголовком в WordPress является простой кусок кода. Вам не нужно разбираться в коде, чтобы изменить заголовок, который поставляется с любой WordPress темой. Вам нужно установить в блоге или на сайте Название и Описание сайта в Административная панель> Параметры> Общие, а WordPress сделает все остальное.
Заголовок расположен в h1 теге и и выполняет функцию Тега шаблонов, использующихся в двух различных вариантах или параметрах. Вы можете узнать больше об этих параметрах в документации по bloginfo(). В принципе, первый отображен в URL сайта в ссылке, а второй отображает имя блога или сайта, как установлено в Administration_Panels> Administration_Panels#General> Settings_General_SubPanel панели. Когда пользователь перемещает курсор на название заголовока, заголовок может быть нажат, чтобы вернуться к основной или главной странице сайта, как это предусмотрено в Административная панель> Параметры> Общиеl панели.
Тема Default WordPress определяет особенности изображений в фоновом режиме и представляет заголовок, как это в wp-content/themes/default/header.php:
Тег шаблона показывает имя блога или веб-сайта в ссылке, но это демонстрирует другое использование похожего на URL запроса выше. Он получает такую же информацию, просто по-другому. Он добавляет из описания сайта в Административная панель > Настройки > главная.
Проще говоря, эти два примера заголовков делают одно и то же разными путями. Они обеспечивают информацию для заголовка с потенциальной возможностью размещения изображения, а создание кликабельного заголовка может помочь в навигации на сайте. Это всего лишь вопрос того, сколько информации Вы хотите видеть в своем заголовке и как эта информация будет отображается.
Используя первый пример из Classic Theme, изображение все еще может быть использовано в качестве фонового, установленного в таблице стилей в h1 селекторе, вторая тема дает больше контроля в использовании картинки в заголовке путем присваивания ей собственносй области разделения. То, как это выглядит, полностью контролируется таблицей стилей.
Стиль Заголовка
Зеленый оттенок выбран в качестве цвета фона и границы вокруг заголовока, но граница имеет другой оттенок и создает утопленный, теневой эффект. Шрифт Times New Roman задается размером 230% с более широким, чем обычно, межсимвольным расстояние. Отступ к стороне создает отступы для текста внутри заголовка.
Все они могут быть легко изменены простым редактированием каждого атрибута стиля: может быть увеличина толщина границы и всё с тем же цветом, измененён цвет фона, размер и стиль шрифта, расстояние между буквами и т.д.
То же самое относится и к заголовку в Default WordPress теме, за исключением того, что в ней несколько больше стилей, о которых придётся позаботиться. Они находятся внутри header.php в «head» теге и в style.css. Когда имеется большое количество стилей, лучше перемещать всю информацию в таблицу стилей.
Изменение заголовка изображения по умолчанию WordPress тема была упрощена с введением утилиту под названием Kubrickr. Он просто просит вас поставить новое имя файла изображения для заголовка, а затем переводит его для вас, поэтому вам не придется копаться в коде. Если все, что вы хотите изменить это изображение заголовка, это чрезвычайно полезный и простой инструмент.
Если вы хотите, программировать или копаться в ваших стилях заголовка и внесить необходимые изменения. Ниже приведен простой учебник по изменению только заголовок изображения вручную.
Изменение изображения заголовка
Есть много различных изображений заголовока и дизайнерских решений доступны для редактирования и использовать. стили для заголовка изображения по умолчанию или Кубрика WordPress тема, и любая тема основана на эту тему, являются более сложными, чтобы изменения, чем те, на классические темы. стили находятся в пределах стилей в header.php «голова» раздел, а также в styles.css. Чтобы изменить только ссылки заголовка изображения, откройте файл header.php шаблона и искать стили вроде этого:
Для изменения файла, заменить «kubrickheader.jpg» с именем нового графического изображения вы загрузили на ваш сайт, чтобы заменить его. Если она находится в другой каталог, изменение, заменив bloginfo () теги с конкретным адресом графического месте.
Если вы используете образ, который имеет тот же размер, то просто заменить изображение. Если это различного размера, заполнить в высоту и ширину изображения в следующем разделе называется #headerimg. Если вы не знаете и не используете Windows, просматривать папки, в которой находится изображение на вашем компьютере в режиме просмотра «Миниатюра». Нажмите кнопку «View> Миниатюра» из меню Windows Explorer. В режиме просмотра Миниатюра, найти свой образ и удерживайте нажатой клавишу мыши. небольшая заметка шар появится список размеров. Использовать эту информацию в стилях. В противном случае, просто щелкните правой кнопкой мыши на графический файл и выбрать «Свойства», и это должно дать вам размер файла и размеры.
Сохранить шаблон файл и загрузить его и изображение на Ваш сайт и take a look. Некоторые изменения, возможно, должны быть сделаны для тонкой настройки размещения и вид.
С заголовок изображения на месте, пришло время для решения остальных заголовков. Откройте style.css стиле файл лист и обратить внимание на следующее:
Ваша тема может или не может иметь все эти, но тема по умолчанию имеет все из них в разных местах в таблице стилей. Все или некоторые из этих, возможно, должны иметь атрибуты изменены, чтобы изменить внешний вид вашего заголовка. При изменении размера изображений заголовка или заголовка искусства, убедитесь, что и изменение другие структурны CSS селекторов, такие как содержание или боковую панель согласно изменениям в размере заголовка.
Спецификация на заголовок изображения
Заголовок изображения, что вписывается в WordPress тема по умолчанию составляет около 192 х 740 пикселей. При замене заголовка в любом WordPress тема, проверить размер заголовка изображения, а затем найти замену, что матчи такого размера. Если вы выбираете изображение заголовка, который меньше или шире или выше, чем замены, вы, возможно, придется изменить другие структурные элементы веб-страницы, чтобы для изменения размера заголовка.
Если вы изменяете тема всего сайта, ширина общую страницу или содержание области должны быть приняты во внимание на размер заголовка изображения. Два наиболее распространенных размеров экрана 1024×768 и 800×600 пикселей. Тем не менее, широкие мониторы набирают силу и веб-дизайнеры теперь нужно готовиться к экран шириной 1280×1024 и 1600×1200.
Если вы установите ваш веб-сайт «плавать», расположен в средней части окна браузера с места на обе стороны, то вы можете установить ваш заголовок ширину, что вы хотите. При разработке темы с гибкими или «упругих» ширины экрана, то ширина заголовок становится важным.
Если вы используете заголовок изображения, что может быть повторен, и вы используете упругой ширины, вы можете установить стили в заголовке повторить для заполнения пространства:
Это заствит изображение заголовка повторяться горизонтально начиная с верхнего левого угла и до конца. Вы можете настроить это поведение как пожелаете background position согласно вашим техническим и дизайнерским потребностям.
Искусство заголовка
Выбор готовых заголовка искусство имеет некоторые преимущества. художники сделали работу и все, что вам нужно сделать, это выбрать дизайн, который наиболее соответствует Ваш сайт. И графический готова к использованию, уже размера и сохранить как небольшой размер файла.
Digital Westex’s WordPress Header Art имеет большой выбор Искусственных заголовков доступных для бесплатного скачивания специально для WordPress
Копирайт Искусственного Заголовка
Лучший выбор для Искусственного заголовка, если вы не хотите создавать его самостоятельно, это любой из Creative Commons License в спецификации которого указано возможность публичного использования. Прочитайте индивидуальное пользовательское соглашение на использования изображений что быть уверенным что у вас есть разрешение на использование данного искусственного заголовка на сайте. Как правило, вы должны указывать авторство, долю авторства и не использовать его в коммерческих целях. Если вы сомневаетесь, всегда спрашивать разрешения у автора перед использованием.
Искусственные заголовки сделаны и лицензированы дизайнерами/авторами «как есть», некоторые искусственные заголовки не могут быть изменены без разрешения автора. Проверьте лицензию и копирайт сайта, и спросите автора если у вас есть какие либо сомнения по поводу этого или вы хотите внести изменения.
Разработка вашего собственного заголовка
Вы можете разработать свой собственные Искусственный заголовок. Подойдет любое ПО для разработки графического дизайна. Наиболее популярные это: Adobe Photoshop, Adobe Elements, JASC PaintShop Pro, The Gimp and Macromedia Fireworks. ПО для создания графического дизайна должно обладать функциями масштабирования, управления разрешением изображения и его типом при сохранении. Размер вашего Искусственого заголовка должно быть соразмерен с контейнером для этого изображения в заголовке сайта.
Скрытие текста заголовка
Многие темы и тема дизайнеры хотят, чтобы показать их заголовок с фотографиями, без текста. Некоторые из них будут поместить текст в графическое изображение, поэтому не требуется фактическое использование текста. Один из вариантов заключается в удалении тегов шаблона, которые генерируют заголовок и описание. Другим вариантом является оставить его, но это скрыть.
Чтобы скрыть заголовок, оставляя его в код, ничего не меняют в файлах шаблона. Только изменения CSS. Добавить Дисплей: нет в CSS селекторы вы не хотите, чтобы появиться. Например, чтобы скрыть текст в h1 селектора:
Создание интерактивного заголовка
Чтобы сделать заголовок интерактивным, вы должны поместить всю графику заголовка в ссылку. Есть два способа сделать это:
Чтобы заголовок искусства интерактивными путем внедрения ее в заголовок, в файл шаблона wp-content/themes/classic/header.php вашего WordPress тема, изменять следующие:
Вы можете придать требуемый стиль заголовку h1 так что бы он перекрывался другим блоком или опустить его ниже, или даже сделать его не видимым. Для того, чтобы вся площадь заголовков стала интерактивной, заголовок должен иметь ширину области набор для h1 якорь HTML теги, чтобы активная область крышку заголовок изображения в фоновом режиме. стили устанавливаются в таблице стилей.
Вращающееся изображение заголовка
Чтобы действительно сделать это в вашем заголовке, или в другом месте на вашем сайте, добавьте ссылку на изображение в блок header:
Скрипт вращения изображения включает:
Добавление навигации к Вашему Заголовку
Это может быть также просто, как отображение вашей категории в верхней части заголовка с помощью одного из Список категории template tags. Давайте посмотрим на пример используя тег list_cats()
В этом примере, шаблонный тег list_cats() устанавливает сортировку листа категории по ID в не упорядоченный лист (
- ) без дат или подстчета постов, не скрывает пустые категории, использует категорию "описание" для титула в ссылке, не показывает наследников родительской категории, и исключает категории 1 и 33. Он находиться в своей собственном блоке "категории". Обратите внимание что ссылка на "домашнюю" старницу или главную страницу бфла добавлена вручную в начале листа.
Для того что бы придать стиль этому листу, используем #categorylist в style.css:
Блок будет выглядеть вот так:
Вы так же можетет добавить ваши Pages, архивы, и другие навигационные ссылки в заголовок. Для дополнительной информацией по навигационным меню, читайте:
Советы по созданию Заголовка
Вот некоторые советы и информацию, которая поможет вам выбрать и настроить заголовок вашего WordPress сайта.
Bold and dramatic headers lend themselves to boldly designed sites, whereas soft and pastel colored sites lend themselves to gentler graphic headers. A site dedicated to punk rock and grunge should have a header look punky and grungy. It is up to you, but think consistency.
Дерзкий и эффектный заголовков предназначены смелым сайтам, в то время как мягкие и пастельные тона сайтов поддаются мягкие графических заголовков. Сайт, посвященный панк-рок и гранж группам должна иметь панковский или гражевый заголовок. Это зависит от вас, но делайте это согласованно.
Заголовки не всегда должны быть с картинками. Не все заголовки должны быть с фотографиями и картинками. Иногда слова более важны, являются ли они против мыть цвета или белом фоне. Беспорядочный заголовок делает сайт ещё более беспорядочным. Избегайте навязчивых объявлений, заграможденной навигации, нечитабельного текста, длинных новостных лент в Заголовоке. Чем проще тем лучше. Следуйте стандартам accessibility в Заголовоке. Мы говорили скрытии текста в Заголовке, но есть нечто больше что вы можете сделать, чтобы убедиться, что ваш заголовок соответствует стандартам доступности. Используйте h1 теги тогда спциальные программы которые читают текст с экрана признать его в качестве заголовка. Использование Alt в ссылках и изображениях. Заголовки могут быть любой высоты, но помните, содержание это главное. Средняя заголовок менее 200 пикселей в высоту, но заголовки диапазоне высот от очень тонких до половины страницы. Помните, что основная причина люди посещают ваш сайт является его содержание, и больше они должны прокрутить вниз мимо вашего заголовка, чтобы добраться до содержимого, менее заинтересованы они, как правило. Справка привести их к содержанию с заголовка. Продумайте "Индивидуальность сайта". Заголовок является частью личности сайта, люди нужна уверенность что они на том же сайте, когда он нажимают ссылку на другую страницу сайта. Рассмыстривайте Заголовок и/или Искусственный заголовок как "брендовый знак" вашего сайта.
Дополнительная информация
Изображения Заголовка
Вот несколько ресурсов где вы можете найти изображения для Заголовка: