Как перенести сайт WordPress на Gatsby без потери качества SEO

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

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

От функциональности и обслуживания до качества производительности и доступных льгот — вот более подробный обзор как WordPress, так и Gatsby, а затем подробное руководство о том, как безопасно перенести сайт на основе WordPress на платформу Gatsby без потери качества SEO в процессе. .

Определение WordPress

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

Статистика отмечает, что около 29% владельцев сайтов по-прежнему используют WordPress, что делает платформу очевидным первым выбором. Причины, по которым многие пользователи отдают предпочтение WordPress, связаны с его упрощенной загрузкой контента и точностью изменения всех аспектов контента и его SEO. WordPress может похвастаться обширной галереей плагинов, как бесплатных, так и платных, но большинство пользователей находят последний гораздо более функциональным вариантом.

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

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

Проблемный контент-менеджер

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

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

Написание PHP

Чтобы изменить сайт WordPress, изменения должны быть написаны на PHP. Хотя в WordPress существуют пользовательские модификации, многие пользователи считают их слишком сложными и трудоемкими. И поскольку PHP не самый популярный язык, за исключением сайтов WordPress, работа с ним кажется излишней.

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

Определение GatsbyJS

Многие считают WordPress устаревшей технологией, но по мере роста конкурентов GatsbyJS стал одной из наиболее подходящих альтернатив. Большинство создателей сайтов и пользователей прибегают к сайтам, использующим такие языки, как JavaScript и React.js, и это именно то, что предлагает Гэтсби. В отличие от природы WordPress с открытым исходным кодом, GatsbyJS — это генератор статических сайтов, в основном построенный на React.

Когда пользователи посещают сайт на основе Gatsby, платформа не отображает страницы. Вместо этого GatsbyJS генерирует страницы при компиляции, а затем перемещает их все в онлайн. Система не требует серверов или их обслуживания и совместима со статическими файлами, такими как JS, HTML и CSS. Наконец, Гэтсби вообще не использует PHP, что является большим облегчением для бывших пользователей WordPress.

Платформа не лишена недостатков, одним из которых является невозможность непосредственного просмотра результатов любых изменений сайта, которые вы вносите, как и в случае с Gatsby, сначала все должно быть скомпилировано. Однако, чтобы решить эту проблему, многие полагаются на конвейеры Gitlab CI/CD, чтобы сначала скомпилировать веб-сайт, а затем разместить его в Интернете. Gatsby позволяет пользователям создавать шаблоны сообщений в блогах и записывать весь контент в уценке.

Вот еще ключевые преимущества использования Gatsby:

• Нулевые перезагрузки

Как одностраничное приложение или SPA, Gatsby не требует, чтобы страница сайта, по которой щелкнули, загружала совершенно новый ресурс.

• Уточнение изображения

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

• Предварительная выборка ресурсов

Gatsby может определить все ссылки, доступные на определенной странице, и загрузить данные в кеш сайта.

• Изменения кода

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

Перенос данных WordPress в Gatsby Framework

Когда вы планируете перенести весь свой контент с WordPress на Gatsby, самый важный аспект, который следует учитывать, — это не потерять существующую ценность SEO.

К счастью, Gatsby делает прием контента других платформ довольно простым.

Первое, что вам нужно для переноса контента, — это исходный плагин. Плагин исходного кода поможет Gatsby беспрепятственно и автоматически заполнить его хранилище Graphql, предоставляя вам доступ ко всей входной информации. Исходный плагин можно изменить в соответствии с вашими потребностями и даже сделать вашу платформу открытой, а не статической.

Graphql представляет собой усовершенствованное решение для получения данных API и значительно отличается от своего предшественника, REST API. Graphql — это дополнение к платформе Gatsby, предназначенное для использования как часть самой системы. Полный обход Graphql возможен, но крайне игнорируется как вариант, поскольку он не предоставит вам доступ к различным важным функциям.

Следующий шаг — упростить процесс написания и перевести все в Markdown. Файлы Markdown или .md позволяют пользователям писать простой и простой текст, который затем можно легко преобразовать в HTML. Более того, Markdown будет доставлять все файлы .md вместе с кодом сайта Github и контролировать версию процесса. Некоторым пользователям может быть полезен Gatsby Advanced Started (GAS), поскольку этот проект позволяет создавать сайты Gatsby, ориентированные на SEO.

Как перевести сообщения WordPress в Markdown

Прежде всего, вам нужно будет экспортировать все жизнеспособные статьи WordPress. Как только это будет сделано, вам нужно будет преобразовать их в обычный текст или Markdown. Для этого есть инструмент, который называется WordPress Export to Markdown. С помощью этого инструмента вы можете извлечь весь контент WordPress, его теги, категории и важные аспекты SEO. Инструмент делает дополнительный шаг, чтобы преобразовать не только содержимое статьи, но и изображения публикации.

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

Как создавать посты и страницы с Гэтсби

Производительность Gatsby аналогична PHP, используемому в WordPress. Однако, поскольку Gatsby использует React полностью, он помещает языковые соединения в папки страниц, автоматически превращая их в страницы сайта. Эта функция идеально подходит для одномерного содержимого страницы, такого как «Индекс» и «Обо мне».

Что касается динамического контента, такого как категории или сообщения в блогах, пользователи могут полагаться на готовые шаблоны Gatsby для создания определенных страниц. Те, кто будет использовать GAS, уже будут иметь под рукой шаблоны сообщений вместе с их тегами и категориями. Не стесняйтесь еще раз оценить свой контент и сделать его более динамичным и, следовательно, более совместимым с Гэтсби. Все изменения, которые вы делаете, сразу же отображаются в вашем браузере, что делает Gatsby удобным для быстрой итерации.

Помните, суть Gatsby заключается в его файле gatsby-node.js. Здесь вы можете оценить поведение как шаблона, так и страницы, а также слаг, элементы и дополнительные данные для использования. Файл также вреден для рассмотрения, поскольку он помогает вам заполнять узлы, или, другими словами, данные хранятся в вашем GraphQL.

Как оформить сайт в стиле Гэтсби

Что касается написания стилей сайта, Gatsby предлагает множество жизнеспособных вариантов, таких как файлы .css, Sass, CSS-in-JS и другие. Вот несколько советов о том, как оформить сайт Gatsby:

• Изучите доступные ресурсы дизайна, такие как Ant, MaterialUI и Materialize.
• Будьте готовы к развертыванию! Статические сайты, такие как Gatsby, делают развертывание сайта очень простым и доступным. Для этого вы можете использовать ряд бесплатных и быстрых инструментов, таких как Netlify, AWS Amplify, Now и Surge.
• Оптимизируйте, оптимизируйте, оптимизируйте! Использование Gatsby означает наличие более быстрого сайта, и вы всегда можете использовать платформу, чтобы сделать его еще более быстрым, оптимизированным для SEO и доступным. Одним из лучших инструментов оптимизации является Lighthouse, так как он делает все автоматически: аудит, метрики, веб-практики, подробные данные и даже полезные ссылки. Вы можете запустить аудит Lighthouse через Google, Firefox или использовать Lighthouse CLI.

Как заставить ваш сайт Gatsby работать быстро

Как только весь контент будет перенесен, вы можете ускорить свой сайт Gatsby, выполнив следующие действия:

• Обработка всех данных Gatsby через GraphQL.
• Избегайте использования тяжелых библиотек, таких как moment.js, так как они могут замедлить работу сайта.
• Доверьте своему серверу изменять даты, отправлять эти данные на ваши страницы и выполнять другие сложные задачи.
• Управляйте меньшим объемом данных с помощью GraphQL. Таким образом, вы получите доступ только к тем данным, которые вам нужны, и избежите ошибочного накопления чрезмерных объемов данных.
• Сделайте это доступным. Ваши пользователи не будут взаимодействовать с вашим сайтом так, как это делаете вы, поэтому убедитесь, что сайт охватывает все категории пользователей, включив в него качественную а11у, что также может привести к улучшению HTML и оптимизации показателей SEO. Чтобы исправить проблемы a11y, вы можете использовать соответствующие инструменты, такие как Axe.

Как поддерживать высокое качество SEO

Поняв основы того, как Google ранжирует сайты, вы сможете вывести свой сайт Gatsby на рынок. Для этого обратите внимание на следующие аспекты:

• Звездный и актуальный контент
• Большая доступность для пользователей
• Более быстрый сайт
• Создание ссылок или демонстрация вашего сайта на других доменах

Упрощенное руководство по переходу с WordPress на Gatsby

Чтобы подытожить и облегчить процесс, вот пошаговое руководство по полной миграции вашего сайта с WordPress на GatsbyJS.

• Загрузите XML-файл из WordPress, который можно найти в меню «Инструменты» > «Экспорт».
• Используйте инструмент для преобразования XML в Markdown или обычный текст, который иногда выполняет более половины работы по преобразованию сообщений в блоге.
• Загрузите все изображения и содержимое сервера. Перетащите изображения из загрузки WordPress в папку с изображениями.
• Исправьте неработающие списки и отступы блоков кода, чтобы они соответствовали стилю Гэтсби.
• Сохраните эскизы и переместите их в соответствующую папку для повторного использования.
• Подключитесь к Netlify, чтобы настроить автоматическое развертывание. Если написано на JavaScript, перенесите его на машинописный текст, чтобы включить его.
• Измените параметры стиля, чтобы они могли использовать CSS-in-JS. Обновите стиль и макет.
• Запустите обновления, чтобы содержимое блога попадало в категорию «/blog/».
• Используйте перенаправление для всех URL-адресов.
• Используйте React Context API в качестве оболочки для создания ночного режима.
• Перенесите комментарии WordPress в Gatsby с помощью ручного или автоматического импортера.

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

Сколько времени займет процесс миграции?

Перенос всего контента с WordPress на Gatsby будет зависеть от объема контента, имеющегося в вашем распоряжении, а также от ваших личных усилий. В идеале вы должны быть в состоянии перенести весь контент не более чем за две недели. Однако имейте в виду, что если вы новичок в React, вам потребуется время, чтобы приспособиться к нему.

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

Последняя вещь…

Хотя для управления Gatsby требуется набор навыков и опыт работы с CSS, HTML, JavaScript, Node.js, React, ES6 и GraphQL, и это лишь некоторые из них, начинайте медленно и изучайте каждую технологию по мере ее появления.

Даже если процесс представляет собой проблему, в конечном счете, вы можете следовать Учебному руководству по началу работы Gatsby, чтобы получить еще более подробное руководство по процессу миграции.

Давайте кодить, а?