Последнее редактирование: авг 2022
1. Введение
SEO (Search Engine Optimisation) была кратко представлена в посте 6.2 в контексте политики Google «Mobile First». В том посте были даны рекомендации по оформлению макетов экранов, призванные обеспечить заметное место в поисковой выдаче Google. Теперь пришло время рассмотреть этот вопрос немного глубже и изучить, как поисковые выдачи вообще попадают в поисковые системы.
В первые дни существования Интернета индексация вашего сайта поисковыми системами происходила автоматически. После сохранения ваших html-файлов на общедоступном сервере они регулярно просматривались «поисковыми ботами», установленными Google и другими компаниями, которые рыскали по Интернету в поисках информации для внесения в индексы поисковых систем.
Стартовое руководство Google по SEO показывает, как после того, как вы тщательно заполнили информацию о заголовках в html-файле, потенциальные пользователи вашего сайта смогут использовать поиск Google для получения его url. Боты также способны заглянуть вглубь вашего сайта и добавить более общее содержание сайта из элементов <p> и тому подобных.
Но в современном веб-приложении, несмотря на наличие html-файла с секцией <head>, общее содержимое сайта, скорее всего, будет спрятано в удаленных базах данных или локальном внутреннем хранилище. Хотя javascript, который связывает все вместе, в конечном итоге будет генерировать элементы <p> и т.д., они не будут напрямую доступны для индексирующих ботов, как это было в прошлом. Как это вообще может работать?
2. Получение записей в индексе поисковых систем для веб-приложения Javascript
К счастью для современных веб-приложений Javascript, поисковые боты теперь фактически имитируют действия, которые пользователь может предпринять при запуске веб-приложения, и запускают «безголовый браузер» — т.е. урезанную версию чего-то вроде Chrome или Firefox — для «гидратации» веб-приложения, а затем анализируют полученный DOM.
Все, что вам затем нужно сделать (по крайней мере, в теории), это направить бота, предоставив ему список страниц, которые вы хотели бы, чтобы он изучил. Для этого нужно создать файл «sitemap». Вот файл sitemap.xml для индексного сайта для этих постов.
<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
xmlns:xhtml="http://www.w3.org/1999/xhtml">
<url>
<loc>https://ngatesystems.com/about</loc>
<changefreq>weekly</changefreq>
<priority>0.5</priority>
</url>
<url>
<loc>https://ngatesystems.com/waypoints</loc>
<changefreq>weekly</changefreq>
<priority>1.0</priority>
</url>
<url>
<loc>https://ngatesystems.com/examples</loc>
<changefreq>weekly</changefreq>
<priority>0.6</priority>
</url>
</urlset>
Этот файл должен быть помещен в каталог public вашего проекта webapp вместе с файлом index.html, чтобы он был развернут в корне проекта Firebase.
Затем вам нужно указать Google, где найти карту сайта, используя Google Search Console для вашего url. Производительность поиска Google на вашем сайте также можно отследить с ее помощью — см. документ Google Basic Search Console usage document для получения рекомендаций по использованию Search Console.
По моему опыту, если у вас не слишком много страниц для регистрации (на больших сайтах может потребоваться создание файла sitemap), вам, вероятно, лучше использовать вкладку URL инспекции Search Console для отправки адресов ваших страниц непосредственно ботам краулера. Я обнаружил, что это дает результаты в течение нескольких часов, в то время как вы можете потратить недели на ожидание действий по карте сайта.
Особенно полезным преимуществом такого подхода является то, что после того, как Google просмотрит вашу страницу, на вкладке «Проверка URL» можно увидеть html-код, который она использовала, что является огромным стимулом для уверенности, если вы создаете ее с помощью props и JSX.
Конечно, окончательный тест — это провести поиск самостоятельно, чтобы узнать, что Google знает о вас. При тестировании своего индексного веб-приложения я обнаружил, что лучший способ сделать это — провести поиск Google по содержимому сайта. Так, например, после того как Google проиндексировал мой сайт, поиск по запросу «Github — это бесплатный сервис Microsoft, который предоставляет вам место, где вы можете хранить и рекламировать исходный код в Интернете». — цитата со страницы «Примеры» сайта — мгновенно выдал url сайта. Я все еще не могу понять, как Google может это сделать, особенно когда вспоминаю, что этот конкретный кусок текста даже не закодирован в html — он спрятан в Json.
Думаю, я должен упомянуть, что у меня не было успеха в получении записей в индексе для веб-приложения site-index, пока оно все еще использовало свой первоначальный, бесплатный, Firebase url на ngatesystems.web.app. Индексирование моего сайта заработало только после того, как я заплатил Google 10 фунтов стерлингов за регистрацию домена ngatesystems.com. Я не чувствую себя удрученным по этому поводу — в конце концов, это была смехотворно маленькая плата за потрясающий сервис, который они предоставляют.
3. SEO — оптимизация поисковых систем
Многое зависит от того, насколько хорошо проиндексирован ваш сайт. Если люди не могут легко найти вас, они не будут пользоваться вашими услугами. Но это не просто вопрос получения упоминания в индексах поисковых систем. После того как вы хорошо проиндексируетесь, вы захотите, чтобы поисковые «хиты» вашего сайта были на видном месте. Добро пожаловать в мир поисковой оптимизации — искусства добиться того, чтобы поисковые системы уважали ваш сайт.
Я уже дал несколько подсказок о том, как можно убедить Google в том, что ваш сайт заслуживает его внимания. Политика Google «mobile first» является одним из примеров того, как вы можете повлиять на их мнение. Но это глубокая и сложная тема, и поскольку этот сайт предназначен только для введения в тему, я собираюсь уклониться от ответа и направить вас в сторону авторитетных экспертов.
Вы найдете очень полезную информацию обо всем этом в документе SEO для приложений React от Ahref. Ahref — это коммерческий поставщик SEO-инструментов, который широко используется крупными веб-пользователями для настройки своих сайтов. Их сайты полны действительно полезных советов. Когда вы сами начнете зарабатывать деньги, вы, возможно, сочтете целесообразным отплатить им тем же, используя их для улучшения вашего SEO, чтобы вы могли заработать еще больше денег!
О других способах повышения производительности вашего сайта и влияния на его SEO-показатели вы можете прочитать в посте 6.4 этой серии, где рассказывается о том, как технология Next.js дает возможность оптимизировать время отклика без увеличения затрат на разработку.