Keys and Tips for Migrating a WordPress Site to Gatsby Without Losing SEO Quality.

Are you thinking of switching your website from WordPress to Gatsby? If so, you're likely wondering how to do it without losing the organic positioning you've achieved with so much effort.

In this article, I will recommend some things you should keep in mind before and during the migration so that it can be carried out without losing the positioning of the old website.

Gatsby is a tool that offers many advantages over WordPress, such as better performance, security, modernity, and flexibility. Although it is currently a bit outdated and a framework like Astro is more recommended.

Key Points to Consider Before Migrating from WordPress to Gatsby Without Losing SEO

Hosting for the New Site Created with Gatsby

One of the most important things to consider for migration is using a specialized hosting provider to separate the visible part of the site (frontend) from the content management in this case WordPress. Some of the hosting options for deploying static websites created with Gatsby are:

• Netlify: a web development automation platform that provides hosting and backend tools for static websites. It stands out for its easy integration with version control systems like GitHub, allowing automatic and continuous deployments. It offers features like custom domains, free SSL certificates, and a global content delivery network (CDN).
• Vercel: a hosting platform focused on developer experience, optimized for static websites and JavaScript web applications (especially Next.js). It provides automatic deployments from Git repositories, a global CDN, and other functionalities like automatic scaling and support for serverless functions.
• Cloudflare Pages: a hosting and deployment service from Cloudflare designed specifically for static websites and JavaScript frontend applications. It offers direct integration with Git repositories for automatic deployments, a global CDN, and security and performance features inherent in Cloudflare's infrastructure. Important Note Although you can host the new site within your current hosting, it is more advisable to do it on one of these platforms as they are prepared to offer better performance and speed, thus improving the SEO and user experience of the web.

Technically, you don't need to touch anything in the hosting of your current WordPress to carry out the migration. Except for changing the DNS to point to the new site.

Domain Management

Maintaining the Current Domain:

• Preserve the Domain: Ideally, keep your current domain to preserve brand recognition and SEO.
• DNS Configuration: Update the DNS records to point to the new hosting provider. This involves changing records such as A, AAAA, or CNAME, according to your new host's instructions.

SEO Considerations When Changing the Domain:

• Minimize Downtime: Coordinate the DNS change to minimize site downtime, which can affect your search engine ranking.
• Redirects and URLs: Ensure that all redirects are correctly set up in the new environment to maintain SEO integrity.

If for some reason you change any URL on your website, you must do a 301 redirect to inform the browser and search engines that the page has moved. This is one of the factors why many migrations fail from an SEO standpoint, as if you do not inform Google (search engines) that a URL has changed, it will not know that it should assign the positioning to the new URL.

Important Note
When pointing the domain to the new site, you will lose it on the current site. The ideal is to assign a subdomain to the WordPress site, which will be the API from which we will consume the content, for easy recognition.

Tips for Migrating from WordPress to Gatsby Without Losing SEO Quality

In the previous section, I developed the key points you should consider before carrying out a migration from WordPress to Gatsby. Next, I give you some tips that you should keep in mind in the development phase of the site.

1. Obtaining the Content:

The content of your website is the most important element in maintaining your SEO quality. Therefore, you should ensure to keep the same content, or improve it if possible, when migrating to Gatsby.

To obtain content from WordPress, you should use the gatsby-source-wordpress plugin, and within WordPress install the plugins: WPGatsby WPGraphQL, which are responsible for formatting all the content so it can be easily obtained from Gatsby.

2. Meta Data:

The meta data of your website provide information about the title, description, keywords, author, etc., of each page. These data are used by search engines and social networks to display your website in search results and posts.

Therefore, you should maintain or improve the meta data of your website when migrating to Gatsby.
From version 4.0 of Gatsby, you can create a Head function within the pages where you can define the meta tags for each page:

export const Head = ({ data }) => {
  const { wordpressTitle, wordpressMetaDescription } = data;


  return (
    <>
      <title>{wordpressTitle}</title>
      <meta name="description" content={wordpressMetaDescription} />

    </>
  );
};

You can also use the gatsby-plugin-react-helmet plugin to add the meta data of each page using the <Helmet> component of React.

3. Management of Sitemap and Robots.txt File

Effective management of the sitemap and the robots.txt file is crucial in the migration of a website, especially for maintaining and improving the SEO and indexing of the site in search engines.

Sitemap

Generation and Updating of Sitemap:

• Automatic Creation: In Gatsby, you can automatically generate a sitemap using plugins like gatsby-plugin-sitemap.
• Structure and URLs: Make sure the sitemap reflects the current structure of the site and all important URLs are included.

SEO Considerations:

• Submission to Search Engines: Submit the updated sitemap to tools like Google Search Console to facilitate indexing of your site.
• Post-Migration Review: Verify that all URLs in the sitemap are accessible and do not lead to 404 errors.

Robots.txt File

Proper Configuration:

• Use of gatsby-plugin-robots-txt: This plugin allows you to create and configure the robots.txt file on your Gatsby site, which is crucial for controlling how search engines crawl and access your site.
• Custom Directives: Customize the directives in robots.txt to exclude specific pages from crawling or to give specific instructions to search bots.

Impact on SEO and Indexing:

• Crawl Control: A well-configured robots.txt file can improve SEO by avoiding the crawling of duplicate or irrelevant pages.
• Avoid Blocking Important Content: Make sure not to accidentally block access to important CSS, JS, or image files that are important for the indexing and ranking of the site.

4. Image Optimization:

The images on your website are what add visual value and appeal to your content. They are also important for your SEO, as they can improve load time, engagement, and traffic to your website.

Therefore, you should optimize and adapt the images of your website when migrating to Gatsby. You can use the gatsby-plugin-image plugin to process and display your website's images optimally. This plugin allows you to use the <GatsbyImage> component of React, which applies techniques such as responsive design, lazy-loading, blur-up, webp, etc., to your images.

5. Add Structured Data Markup

Structured data are snippets of code that help search engines understand the content of your website and display it more attractively in search results.

For example, you can use structured data to indicate the type of content, author, date, title, image, rating, etc. To add structured data to your website, you can use the gatsby-plugin-jsonld plugin, which allows you to generate a JSON-LD with the information you want.

Important Note
Keep in mind that by default WordPress, thanks to plugins like Yoast SEO or Rank Math, generates structured data markup, so it's important to maintain them in the new site to not lose positions.

6. Publish your Gatsby Website and Monitor the Results

Finally, when you are satisfied with the result, you can publish your Gatsby website and enjoy its benefits. You can use services like Netlify or Vercel to easily deploy your Gatsby website, or use your own server or hosting if you prefer.

You can also use tools like Google Search Console, Google Analytics, Lighthouse, etc., to monitor and evaluate the results of your migration, and make necessary adjustments if needed.

Farewell

As you can see, migrating your WordPress website to Gatsby without losing SEO quality is possible if you follow the keys and tips I have given you in this article.

I hope this article has been useful to you. If you have any questions, feel free to contact me. If you liked the article, don't hesitate to share it, and if you need a Gatsby.JS developer, don't hesitate to hire my services. See you soon!