1. Почему я должен заботиться о SEO
2. Настройте свой json-ld
3. Оптимизация в социальных сетях
4. Рендеринг на стороне сервера
5. Карта сайта или RSS-каналы
6. Тестирование всего этого
7. Не расслабляйся

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

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

Почему я должен заботиться о SEO

Может быть, вы не должны? Но мы все хотим больше трафика для нашего приложения. Несколько лет назад я провел выходные, работая над SEO для приложения рецептов, которое я создал во время Rails Rumble. Мы получали стабильный рецепт и набирали новых пользователей с приличной скоростью. Я знал, что время, проведенное в эти выходные, в конечном итоге окупится, но я понятия не имел. В течение трех месяцев мы увеличили наш поисковый трафик Google на 2000%, со 100 посетителей в день до 2000 посетителей в день.

Конечно, это приложение существовало задолго до появления мета-тегов в социальных сетях. В настоящее время я склоняюсь к тому, чтобы работать над SEO, включая теги для социальных сетей. Не оставляйте это на волю случая, когда кто-то делится вашим приложением на социальной платформе, найдите время, чтобы настроить правильные заголовки, описания, изображения и т. Д. Вы можете сделать красивую ссылку для обмена, если вы просто потратите несколько минут. И кто не хочет, чтобы их материал выделялся, когда им делятся в Twitter, Facebook или Slack?

Настройте свой json-ld

JSON-LD (JavaScript Object Notation для связанных данных) был чем-то новым для меня, когда я проводил исследования. Это простой и понятный способ описания контента на странице, чтобы Google и другие пользователи могли быстро использовать и правильно отображать ваш контент. Вы когда-нибудь видели один из этих фантастических результатов поиска Google со звездами обзора, указанными под ссылкой? Использование JSON-LD - это простой способ заставить это работать!

Я недавно использовал AggregateRating схема чтобы получить богатый фрагмент, чтобы показать на сайте моей жены, она автор и пишет книги , У нее уже были все ее книги, перечисленные на ее сайте с отдельными страницами, все, что нам нужно было сделать, это добавить данные JSON-LD следующим образом:

<script type = "application / ld + json"> {"@context": "http://schema.org", "@type": "Product", "name": "Wash Me Away", "description" : «Монстры могут следовать за вами», «url»: «http://wendyowensbooks.com/books/wash-me-away», «aggregateRating»: {«@type»: «AggregateRating», «ratingValue» ":" 4.5 "," reviewCount ":" 15 "}} </ script>

Результаты пошли от скучно и скучно:

Чтобы получить результат с такими богатыми фрагментами:

Оптимизация в социальных сетях

SMO - это настоящая аббревиатура? Если нет, то должно быть. Чистые и хорошо продуманные данные по социальному обмену должны быть главным приоритетом, если вы ожидаете, что ссылки будут распространяться из вашего приложения javascript.

Я запустил Crater.io, и мы недавно переместили весь сайт в React, и SEO был в центре внимания этих усилий. Мы использовали React Helment и SSR, чтобы получить метаданные на каждой странице. Вот пример использования метатегов в социальных сетях для Facebook (теги og) и Twitter (теги twitter):

<meta data-реагирующая каска = "true" property = "og: type" content = "article" /> <meta data-реагирующая каска = "true" property = "og: url" content = "https: // crater.io/out?url=http:%2F%2Fhashbangweekly.okgrow.com%2F "/> <meta data-реагировать-шлем =" true "property =" og: image "content =" https: // кратер. io // meteor_circle2.png "/> <meta data-реагировать-шлем =" true "property =" og: title "content =" БОЛЬШИЕ НОВОСТИ! Meteor Weekly теперь является HashBang Weekly. Отчет обо всех вещах Meteor, GraphQL и React "/> <meta data-реагировать-шлем =" true "property =" og: description "content =" Последние новости программирования появляются здесь первыми! "/> <meta data-реагировать-шлем =" true "name =" twitter : card "content =" summary "/> <meta data-реагировать-шлем =" true "name =" twitter: image: src "content =" https://crater.io//meteor_circle2.png "/> <мета data-реагировать-шлем = "true" name = "twitter: title" content = "БОЛЬШИЕ НОВОСТИ! Meteor Weekly теперь является HashBang Weekly. Отчет обо всех вещах: Meteor, GraphQL и React" /> <meta data-реагировать-шлем = "true" name = "twitter: description" content = "Последняя программа Новости Минг приземляются здесь в первую очередь! "/>

Как вы можете видеть, просто добавив несколько мета-тегов вверху, вы получите совершенно другой вид в твиттере:

Рендеринг на стороне сервера

Рендеринг на стороне сервера, для краткости SSR, очень важен для целей SEO / SMO. Есть несколько причин, почему вы хотите тратить время на SSR в целях SEO:

1. Google использует скорость загрузки для определения места страницы в результатах поиска.
2. Google утверждает, что рендерит JS, но я видел увеличение поискового трафика с момента добавления SSR
3. Twitter, Facebook, Slack и т. Д. Не выдают JS. Нам нужно дать им обычный HTML с метатегами

Первая причина может показаться немного странной, но в случае чего-то вроде Crater, мы обнаруживаем, что пользователь не вошел в систему, затем мы обслуживаем кэшированный HTML. Nginx намного быстрее обслуживает статический HTML с диска, чем ожидание чего-то вроде Meteor или Express для создания HTML из компонентов React на сервере. Эта скорость что-то значит для Google, поэтому дайте им это как можно быстрее. У меня есть более длинный пост в ближайшее время по SSR и кешированию.

2-я и 3-я причины взаимосвязаны. Google некоторое время назад внес изменения, чтобы поддержать JS-рендеринг сайта. Но я видел скачок в поисковом трафике с момента перехода на прямой кешированный HTML. Кроме того, такие места, как Slack, Facebook и Twitter, вообще не тратят время на рендеринг JS - они хотят, чтобы обычный HTML из коробки получал свои метатеги.

Карта сайта или RSS-каналы

Еще один простой совет - сообщить Google обо всех имеющихся у вас страницах, которые он может проиндексировать. Есть два простых способа сделать это:

1. sitemap.xml
2. RSS-каналы

Файл sitemap.xml - это просто краткое описание всех общедоступных страниц в вашем приложении. посмотрите небольшой пример на сайте автора моей жены ,

Для RSS-каналов это может иметь больше смысла, если у вас есть сайт, который обновляется ежечасно, ежедневно или еженедельно с новым контентом. На Crater.io у нас есть на первой странице RSS-канал, который показывает главные новости на нем ,

Получив один из этих двух файлов, вы можете зайти в инструмент Google для веб-мастеров и добавить карту сайта или RSS-канал, чтобы сообщить Google об URL-адресах вашего сайта. Затем Google проверит эти файлы на наличие обновлений и отправит новые данные прямо в боты Google, чтобы потреблять новые вещи для вас! Вот пример того, как приборная панель выглядит для карты сайта wendyowensbooks.com:

Тестирование всего этого

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

1. Инструмент тестирования структурированных данных Google - Это позволяет вам проверить данные JSON-LD и другие имеющиеся у вас микроформаты
2. Facebook Open Graph Debugger - Это позволяет вам проверить, что видит Facebook и как он будет отображать ссылку для обмена.
3. Валидатор твиттера - Twitter покажет вам, что он потребляет из вашего HTML. ТРЕБУЕТСЯ получить белый список для корректной работы карт Twitter.
4. Google Webmaster - Удобное приложение, добавьте свой сайт и обязательно добавьте в него свою карту сайта или RSS-канал. Кроме того, вы можете попробовать Fetch as Google test, убедитесь, что вы также выбрали 'render', вы можете увидеть, что будет использовать Google.

Не расслабляйся

Поначалу просмотр вашего общедоступного приложения может показаться пугающим или пугающим, но несколько простых настроек оставят ваш сайт в гораздо лучшей форме. Потратьте несколько минут и примените некоторые из упомянутых здесь советов в своем приложении React, Angular или Vue.js и получите больше трафика при минимальных усилиях!

Вы можете увидеть все трюки в действии с потрясающей новой микрофреймой для React под названием Next.js. Я использовал Next.js для создания быстрого сайта React с поддержкой SSR для предстоящий кратер конф в 2017 году ! Пойдите, посмотрите на это и обязательно «просмотрите источник», чтобы увидеть все эти советы по SEO на практике.

Похожие

Комментарии