1. По этому поводу мы будем использовать «ARKEditor», один из самых полных и функциональных, на наш взгляд....
2. Название и псевдоним статьи:
3. Вставьте и отредактируйте изображения:
4. Выбор изображения для вставки:
5. Выравнивание изображения в статье
6. Метки метаданных в изображениях:
7. Редактирование текста статьи:
8. Вставьте мета-тег описания:

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

Прямая ссылка на каждый раздел статьи:

Статьи редактора | Название статьи | Вставить изображения | Редактирование изображений | Выровнять изображения | SEO изображения | Вставьте и отформатируйте текст | Метаописание тег

Мы опишем и объясним более подробно каждую из этих функций редактора Joomla на ARKEditor, что мы и рекомендуем, хотя функции и их значки очень похожи во всех редакторах.

Название и псевдоним статьи:

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

Длина заголовка не должна превышать 66 символов. Остальные символы не будут отображаться в результатах поиска Google и в наиболее часто используемых поисковых системах (Bing и т. Д.). Речь идет о создании в сообщении, которое обобщает основную тему статьи менее чем за 66 символов. Чтобы измерить количество символов в заголовке и отредактировать его, мы рекомендуем использовать наш " Счетчик символов для заголовка (title) и описания (meta description) «Позже мы увидим, как создать адекватное описание для тега« meta description »статьи.

Псевдоним генерируется автоматически из заголовка, который мы даем статье, но если вам не нравится, как он есть, вы можете отредактировать его, всегда сохраняя ключевое слово (ключевое слово) main и без пробелов (используйте дефисы вместо этих пустых пробелов). Псевдоним - это элемент, который будет последней частью URL, который ведет к статье, например, в этой статье псевдоним присутствует в последней части URL как " ..... / how-to-create-Articles-web- con-seo-basico-en-gestion-de-contenido ".

Вставьте и отредактируйте изображения:

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

Выбор изображения для вставки:

Давайте теперь посмотрим, как вставить изображение, которое мы ранее загрузили, в папку изображений, которые мы настроили в Мультимедиа в Backend нашего Joomla. Если он еще не был загружен, нам придется выполнить другую процедуру, которую мы объясним позже (см. Сейчас, как загрузить изображения в Joomla из интерфейса).

Имея изображение, которое мы хотим вставить в статью в одной из мультимедийных папок, и чтобы выбрать изображение, которое мы хотим вставить в статью, мы должны сначала щелкнуть на папке, в которой оно содержится (шаг 1 на изображении).

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

Мы рекомендуем хорошо организовывать изображения по темам в папках мультимедийного контента Joomla Backend. Хорошая организация помогает нам легко идентифицировать и находить изображения с последующей экономией времени.

Мы также рекомендуем редактировать изображения перед их загрузкой в ​​менеджер контента, в зависимости от функции, которую они будут иметь в статье, с соответствующим размером, и если у них есть текст, мы должны учитывать, как они будут выглядеть на мобильных устройствах, особенно на смартфонах. Важно проверить, и если шрифт или размер буквы плохо различимы на небольших планшетах или смартфонах, удобно исправить шрифт или букву буквы.
Если у вас нет программы для разработки и редактирования платных изображений, таких как Photoshop, вы можете использовать несколько бесплатных. Для его простоты рекомендуем онлайн-программу » Canva Photo Editor «Это не требует регистрации.

В качестве последнего совета, мы должны позаботиться о весе изображений. Если они имеют чрезмерный вес, они замедлят загрузку статьи в браузерах и будут наказывать нашего SEO, понижая наши позиции в поисковой выдаче (страницы результатов поиска) поисковых систем. Google особенно ценит этот вопрос, поэтому желательно проверить рейтинг страницы статьи с помощью инструмента. PageSpeed ​​Insights это даст нам список, который мы должны отформатировать и сжать и помощь для оптимизировать изображения , В этой статье есть несколько компрессоров изображений Как сжимать изображения для оптимизации PageSed и SEO на странице «Мы проанализировали 2 бесплатных, которые объясняют, как они работают.
Еще один интересный инструмент оптимизации GTmetrix , что в бесплатной версии уже предлагает большую помощь для улучшения скорости загрузки и других параметров сайта, а также для оптимизации веса изображений. Для этого он предоставляет нам оптимизированную версию изображения, которую можно загрузить и заменить той, которую мы загружаем на нашем сайте.

Выравнивание изображения в статье

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

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

В целом, критерии, которым необходимо следовать :

Большие изображения (от 600 до 900 пикселей или более) выберите «Центр»

Для изображений среднего размера (от 200 до 600 пикселей) выберите «Влево» или «Вправо»

Маленькие изображения (менее 200 пикселей) будут зависеть от того, как мы хотим их использовать , если, например, значки можно перемежать, например, во фразе.

Метки метаданных в изображениях:

Для оптимизации SEO статьи , ее позиционирования в поиске в Google и других поисковых системах, а также позиционирования собственных изображений в Поиск картинок Google в Bing Images и другие поисковые системы нам понадобятся:

• Используйте название для изображений , которое соответствует и соответствует содержанию статьи, а также опишите, что изображено на картинке.
  
• Не используйте пробелы в имени . Желательно заменить пробелы дефисами и желательно все в нижнем регистре. Например, первое изображение, которое содержит эта статья, было названо « создать-или-редактировать-статьи-для-веб-в-контент-менеджеры-cms-joomla.png », которое описывает то, что показывает изображение, является последовательным с содержанием статьи и актуальным для SEO.
  
• Избегайте специальных символов , акцентов и буквы «ñ» в названии изображений.
  
• Отметьте изображения с помощью инструментов, предлагаемых редактором изображений Joomla. Для этого мы должны вставить описание и заголовок изображения в соответствующие поля, как мы увидим ниже.
  Название и описание могут содержать один и тот же текст, но мы рекомендуем использовать эти теги атрибутов изображений, чтобы предлагать больше SEO-метаданных, включая длинное и краткое описание изображения, по одному в каждом поле (см. Изображение ниже):

Описание эквивалентно метке «Alt» ( альтернативный текст или альтернативный текст ), который является атрибутом, который используют поисковые системы, чтобы их роботы могли «читать» то, что показывает изображение. Вместе с названием, которое мы даем изображению, оно помогает роботам поисковых систем полностью интерпретировать и индексировать содержимое изображения. Если бы «Alt» не включал его для робота Google и других роботов, информация была бы неполной.
Также «Alt» будет текстом, который браузеры показывают, когда изображение не может быть загружено (например, из-за неправильной ссылки), и поэтому не будет отображаться на странице, но текст помогает узнать, что это такое.

Атрибут «Alt» также является текстом справки для инвалидов, который используется программами чтения с экрана и браузерами для слепых, что особенно ценится Google.

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

Чтобы максимально оптимизировать SEO изображений нашей статьи, нам придется хорошо использовать имя одного и того же атрибута вместе с атрибутом «alt» и «title», предпочтительно, чтобы они отличались друг от друга, но сохраняли связь и согласованность с объектом изображения и статьи, которая содержит его, и особенно с текстом, который близок к нему.

Редактирование текста статьи:

Чтобы вставить текст в статью, мы просто должны начать писать в редакторе. Мы рекомендуем написать все содержание статьи на первом этапе, и когда мы будем довольны окончательной формулировкой, продолжаем добавлять изображения в соответствующие части статьи и завершать текст контента, который мы хотим выделить остальным с помощью одного или нескольких вариантов, которые мы объясняем ниже:

Для форматирования мы выбираем текст, который хотим отформатировать, и применяем условия форматирования в соответствии с тем, что нас интересует из того, что мы объясняем ниже:

Когда мы уже выбрали текст статьи, мы отображаем вкладку «Формат» для отображения параметров инструмента и отмечаем тот, который нас интересует.

Текст с характеристиками, настроенными по умолчанию, соответствует опции «НОРМАЛЬНЫЙ». Если мы хотим выделить конкретный текст в остальной части содержимого статьи, мы пометим его одним из параметров заголовка, соответствующих HTML-тегам «H», поэтому первая HEAD, которую мы видим, соответствует HTML-тегу H1. тот, который находится чуть ниже, перемещаясь внутри квадрата, соответствует H2, следующий за H3 и т. д., чем меньше текст, когда мы идем вниз, то есть:

«H1» Пометить текст как очень большой , обычно используется для заголовка статьи в начале, мы можем сказать, что он эквивалентен заголовку новости и должен резюмировать статью, будучи похожим, но не равным названию, о котором мы говорили в начале , Как и заголовок, желательно содержать ключевые слова (ключевые слова) статьи, и в этом случае нет необходимости ограничивать себя 66 символами, чтобы мы могли включить больше ключевых слов, чем в заголовок статьи.

«H2» Отмечает большой текст , он эквивалентен субтитру или вступлению в новостной ленте. Таким образом, он должен быть использован в пункте ниже H1 (владельца)

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

На вкладке «Шрифт» предлагаются параметры для изменения шрифта, но мы должны учитывать, что мы можем выбирать только те источники, которые установлены на нашем компьютере. Если у нас нет той, которую мы хотим, мы можем найти ее и установить с онлайн-сайтов, которые предлагают бесплатные загрузки для различных типов источников, таких как " Dafont.com ».

Вкладка «Размер » отображает параметры для изменения размера шрифта и должна использоваться с текстом в формате «NORMAL», изменяя его на больший или меньший с более сегментированным масштабом, чем тот, который предлагается в форматах «HEADER».

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

B: текст, который мы выбрали, приобретает смелый стиль

I: выделенный текст приобретает курсивный стиль

U: выделенный текст подчеркнут

S: текст, который мы выбрали, помечен как зачеркнутый

X2: выделенный текст (в примере 2) приобретает стиль верхнего индекса

X2: выделенный текст (в примере 2) приобретает стиль индекса

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

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

Если бы это было не в той палитре того цвета, который мы хотим, нажав «Другие цвета», мы открываем окно с расширенным редактором, где мы можем настроить именно тот, который нас интересует. даже напрямую, вставив цвет в код RGB.

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

Вставьте мета-тег описания:

Чтобы вставить мета-тег Description в статью Joomla, нажмите на вкладку «Публикация» над редактором (см. Изображение ниже):

В новом окне мы получаем доступ к окну, в которое необходимо вставить текст этого ярлыка:

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

Разница между одним элементом и другим заключается в том, что хотя заголовок статьи будет виден на странице чтения браузера , метаописание не отображается в этом содержимом страницы чтения, и мы видим его только в исходном коде . Оба атрибута важны для SEO, и хотя до сих пор было понятно, что заголовок имеет большее значение, чем мета-описание, правда в том, что в последнее время мы убедились, что оба они одинаково важны для SEO на странице, что мы и пытаемся в этой статье. Фактически, в настоящее время Google не выделяет условия поиска пользователя в заголовке, а выделяет их только выделением жирным шрифтом в описании, которое появляется под заголовком, как мы видим в следующем примере в поиске Google:

Количество символов, рекомендуемых для мета-описания (мета-описания в HTML), составляет 158 , это мета-описание, которое мы вставим в нашу статью, потому что несколько месяцев назад Google начал индексировать результаты поиска в описаниях с большим количеством символов, которые он извлекает из контента. нашей статьи ( до 300 с пробелами), отсюда важность предоставления релевантного и интересного контента для пользователей поисковой системы, который связан с темой, с которой мы имеем дело. Ниже приведен пример описания с почти 300 символами, извлеченными из содержания статьи, в результате поиска по запросу « совет имиджевого канала компании на YouTube »:

Как видим, заголовок статьи не меняется в результатах поиска, связанного с ее содержанием, но при изменении описания, которое показывает Google, в зависимости от условий, включенных в каждый поиск.

Чтобы измерить количество символов в заголовке и мета-описании, вы можете использовать инструмент счетчика символов , доступный в ОПТИМИЗАТОР НАЗВАНИЙ И ОПИСАНИЯ ДЛЯ GOOGLE, BING И YAHOO "

Похожие

Комментарии