SEO на странице: Maquetación y disño

  1. 1. Введение Когда мы разрабатываем приложение с использованием любого языка программирования, предполагается, что код должен быть хорошо структурирован и организован, а также применять ряд хороших методов программирования для получения качественного кода, оптимального и легко поддерживаемого. Тем не менее, по моему опыту, когда вы переходите к части разработки с языками разметки, эти рекомендации отодвигаются на второй план. Кажется, нет никакой разницы между использованием тегов <span> для ввода даты вместо использования тега <time> или заключением основного заголовка страницы между тегами <p> вместо тегов <h1>. Ничто не является дальнейшим от реальности, все это злоупотребление служебным положением понижает семантический уровень Интернета, непосредственно влияющий на органическое позиционирование нашей страницы, что не будет смешным для владельца продукта . Следовательно, для повышения семантического качества сети необходимо применить ряд хороших методов, известных как SEO On-Page , - улучшения, которые вносятся в саму страницу для достижения лучшего органического позиционирования в результатах. поисковых систем. То, что достигается с помощью хорошего SEO на странице, заключается в том, чтобы облегчить процесс индексации поисковыми системами и позиционирование страницы, то есть улучшает выдачу поисковой выдачи нашего сайта, увеличивая органический трафик на наш сайт. Необходимо уточнить, что для достижения хорошего позиционирования необходимо принимать во внимание другие типы факторов, такие как, например, SEO Off-Page , которые представляют собой методы, выполняемые извне нашего сайта, такие как раскрытие контента или ссылки. здание , хотя эта тема выходит из этого поста. 2. Как работает индексация страниц в Google?
  2. 3. SEO на странице
  3. 3.1 Дизайн и верстка
  4. НАЗВАНИЕ Наклейка
  5. Дружественные URL
  6. Оптимизировать скорость загрузки
  7. Якорные ссылки
  8. Разметка структурированных данных (расширенные фрагменты)
  9. Заголовки h1, h2, ...
  10. Язык разметки HTML5
  11. образность
  12. Адаптивный дизайн
  13. robots.txt
  14. 3.2 Маркетинг
  15. Качественный контент
  16. Обновленный контент
  17. Внутренние ссылки
  18. 4. Выводы

1. Введение

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

Тем не менее, по моему опыту, когда вы переходите к части разработки с языками разметки, эти рекомендации отодвигаются на второй план. Кажется, нет никакой разницы между использованием тегов <span> для ввода даты вместо использования тега <time> или заключением основного заголовка страницы между тегами <p> вместо тегов <h1>.

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

То, что достигается с помощью хорошего SEO на странице, заключается в том, чтобы облегчить процесс индексации поисковыми системами и позиционирование страницы, то есть улучшает выдачу поисковой выдачи нашего сайта, увеличивая органический трафик на наш сайт. Необходимо уточнить, что для достижения хорошего позиционирования необходимо принимать во внимание другие типы факторов, такие как, например, SEO Off-Page , которые представляют собой методы, выполняемые извне нашего сайта, такие как раскрытие контента или ссылки. здание , хотя эта тема выходит из этого поста.

2. Как работает индексация страниц в Google?

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

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

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

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

3. SEO на странице

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

3.1 Дизайн и верстка

Веб-архитектура

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

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

НАЗВАНИЕ Наклейка

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

Это название - то, что Google покажет в результатах поиска:

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

Текст между символами 160 и 320 не обязательно будет отображаться в описании в результате, поэтому в этот диапазон необходимо добавить дополнительную информацию.

Это описание появится в объявлении нашей страницы:

Дружественные URL

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

Гораздо лучше иметь веб-сайт, который называется / our- expert -думают, что /exp-op-2.html . Также желательно скрыть расширение страницы, чтобы не добавлять специальные символы или акценты.

Оптимизировать скорость загрузки

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

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

В наших руках стоит выполнять небольшие функции, облегчающие загрузку сети, такие как:

  • Оптимизация изображений и видео.
  • Установите ширину и высоту.
  • Минификация кода.
  • Минимизируйте доступ к файлам.
  • Чистый и бесшумный код.
  • Используйте AMP , Ускоренные мобильные страницы .
  • Включите функцию кэширования.
  • Избегайте загрузки внешнего контента.
  • Добавьте атрибут rel = "canonical", чтобы избежать индексации дублирующих страниц.

Есть несколько инструментов для измерения скорости загрузки, мы рекомендуем Google Pagespeed Insights , Вы должны измерить все страницы, а не только домашнюю страницу .

Якорные ссылки

Ссылки должны быть вставлены естественным образом в Интернете, если мы хотим связать документ или внешнюю сеть, желательно сделать это, связав слова или фразы одного и того же контента. Мы не должны перегружать страницу многочисленными ссылками, которые не повышают ценность сайта. Также полезно использовать атрибут title тегов <a>.

Разметка структурированных данных (расширенные фрагменты)

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

<script type = "application / ld + json">
{
"@Context": " http://schema.org " ,
"@Type": "IT Consulting",
«Имя»: «atSystems»,
«Телефон»: «(+34) 999 999»,
"URL": " http://www.atsistemas.com "
}
</ script>

Есть веб-страницы, которые помогают нам создавать эти коды, такие как 51 Блок-схема генератора ,

Заголовки h1, h2, ...

Несомненно, это еще один из самых важных факторов с точки зрения SEO . Они служат как для структурирования страницы, так и для информирования поисковых систем о ее содержании. Существует 6 уровней заголовков, от <h1> до <h6>, причем первые 3 являются наиболее важными на уровне SEO .

На каждой странице должен быть только один тег <h1>, который будет содержать основной заголовок и где мы должны вводить наши ключевые слова , всегда естественным образом и как можно выше в Интернете. Теги <h2> хороши для заголовков различных разделов и <h3> для заголовков других внутренних блоков.

Очень важно соблюдать иерархию заголовков, то есть не должно быть тега <h2 внутри блока с заголовком <h3>.

Для Chrome существует плагин под названием Web Developer, который показывает нам, помимо других функций, структуру заголовков страницы, помогая быстро выявлять ошибки.

Нажав на опцию View Document Outline, вы увидите иерархию заголовков:

Язык разметки HTML5

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

Основные метки для структурирования страницы:

  • header : верхняя часть страницы, где будет находиться меню навигации, логотипы и т. д.

  • nav : представляет меню навигации в Интернете.

  • main : с помощью этого ярлыка мы сообщаем Google, что в нем будет основной контент, где необходимо уделить больше внимания. Если есть какая-либо несовместимость этого тега с браузером, это можно записать так: <main role = "main">

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

  • статья : Блок независимого и многоразового контента. Он имеет семантику сам по себе.

  • Нижний колонтитул : относится к нижней части страницы, где будут добавлены права на копирование, сертификаты, контактные данные и т. д.

  • в сторону : определяет содержимое, которое будет отображаться на боковой стороне страницы.

Я добавляю несколько важных семантических тегов:

  • время : чтобы указать даты.

  • знак : для обозначения выделенных текстов.

  • Диалог : чтобы указать всплывающее окно .

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

  • Summary : указывает заголовок блока <detail>.

в w3c мы можем увидеть полный список элементов HTML5 ,

образность

Обработка изображений - очень деликатная проблема, поскольку мы ранее отмечали, что мы должны оптимизировать вес и размер, чтобы увеличить скорость загрузки сети. Медленная страница предоставляет плохой пользовательский опыт, заставляя их покинуть наш сайт. Важно добавить ваши теги <alt> и <title>, поскольку именно они предоставляют поисковой системе информацию об изображении.

Другим важным методом будет изменение имени файлов на более естественный текст. Таким образом, поисковая система будет лучше понимать семантику изображения, имя файла которого - infographic-seo.jpg , которое называется info2348-new.jgp . Наконец, изображение должно иметь описание, которое содержит ключевое слово нашей страницы.

Вы можете использовать этот небольшой код CSS, чтобы детализировать те изображения, к которым мы не добавили атрибуты alt или title :

Адаптивный дизайн

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

И удобство использования, и пользовательский опыт являются определяющими факторами для оценки качества сайта. Этот тип дизайна упрощает загрузку веб-страниц в дополнение к предоставлению лучшего пользовательского опыта. Кроме того, Google реализовал специальные теги для результатов поиска, ориентированные на адаптивную версию сайта.

robots.txt

Его цель - сообщить поисковой системе, какие страницы мы хотим включить в свой индекс, а какие нет. Этот файл должен находиться в корневом каталоге домена. Если имеется несколько поддоменов, в каждом из них должен быть файл robots.txt.

Основные функции этого файла:

  • Запретить доступ к страницам.
  • Не индексируйте различное содержание.
  • Избегайте индексации дублированного контента.
  • Показать файл sitemap.xml (этот файл также важен, поскольку он помогает поисковой системе легче находить структуру нашего сайта).

Мы видим, как правильно создать файл robots.txt и как будет выглядеть его синтаксис в страницы поддержки Google ,

3.2 Маркетинг

Ключевые слова исследования

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

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

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

Качественный контент

Без сомнения, если веб-сайт отлично спроектирован и структурирован, с завидной скоростью загрузки, с правильным использованием HTML5 и т. Д., Если контент, предлагаемый нашим сайтом, не является актуальным, текущим и выдающимся, мы в конечном итоге теряем позиции в рейтинге.

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

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

Обновленный контент

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

Внутренние ссылки

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

4. Выводы

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

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

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

Надеюсь статья была интересной и полезной. Если вам понравилось, следуйте за нами щебет !

Привет!