DEV Community: Juneiker

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

Juneiker — Sun, 21 Jan 2024 18:22:34 +0000

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!

AdventJS Challenge 4, midudev 2023 - Turn the parentheses around

Juneiker — Tue, 05 Dec 2023 15:29:07 +0000

Instructions for the challenge:

In 🎅 Santa's workshop, some Christmas messages have been written in a peculiar way: the words within the brackets must be read backwards.

Santa needs these messages to be correctly formatted. Your task is to write a function that takes a string and reverses the characters within each pair of parentheses, removing the parentheses as well.

However, bear in mind that there may be nested parentheses, so you should reverse the characters in the correct order.

const a = decode('hola (odnum)')
console.log(a) // hola mundo

const b = decode('(olleh) (dlrow)!')
console.log(b) // hello world!

const c = decode('sa(u(cla)atn)s')
console.log(c) // santaclaus

// Step by step:
// 1. Reverse the nested -> sa(ualcatn)s
// 2. Reverse the remaining one -> santaclaus
Notes:

The input strings will always be well formed with parentheses that match correctly, you do not need to validate them.
There should not be any parentheses left in the final message.
The maximum nesting level is 2.

My solution AdventJS Challenge day 4

Before explaining the solution, I identified that to solve this problem, I needed a complex regular expression to find patterns of open and closed parentheses.

I'm not good with regular expressions (in fact, I'm quite bad), so for this particular case, I sought help from ChatGPT. Now, I'll proceed to explain the solution.

function decode(message) {
  const regex = /\(([^()]+)\)/
  let match = message.match(regex)

  while (match) {
    const reversed = match[1].split('').reverse().join('')
    message = message.replace(regex, reversed)
    match = message.match(regex)
  }

  return message
}

Define a regular expression /\(([^()]+)\)/g: \( and \) match open and closed parentheses, respectively. ([^()]+) is a capture group that matches any character except parentheses, at least once. The g modifier indicates global search, meaning it looks for all matches rather than stopping after the first.
Initialize the variable match using message.match(regex). This finds the first match of the regular expression in the message and stores information about the match in the variable match.
Start a while loop that continues as long as there are matches (match !== null).
Inside the loop, you can print the current match to the console with console.log(match) (this can be helpful for understanding the process). Inspecting the console with match may return something like this: [ '(cla)', 'cla', index: 4, input: 'sa(u(cla)atn)s', groups: undefined ]. From these data, we need the value at index 1 to reverse it.
Reverse the content of the found substring using split(''), reverse(), and join(''). This is stored in the variable reversed.
Replace the original substring (message) with its reversed version in the message using message.replace(regex, reversed). This finds the first match and replaces it with the value of reversed.
Assign a new value to the match variable using the updated value stored in message.
The loop continues until there are no more matches.
Finally, return the modified message.

Previous Challenges:

Useful Resources

Challenge 3 adventjs midudev - The Naughty Elf

Juneiker — Mon, 04 Dec 2023 01:10:23 +0000

Juneiker Castillo

Problem Statement

In Santa's workshop, a naughty elf has been playing around in the gift manufacturing chain, adding or removing an unplanned step.

You have the original sequence of steps in the manufacturing process original and the modified sequence modified that may include an extra step or miss a step.

Your task is to write a function that identifies and returns the first extra step that has been added or removed in the manufacturing chain. If there is no difference between the sequences, return an empty string.

const original = 'abcd'
const modified = 'abcde'
findNaughtyStep(original, modified) // 'e'

const original = 'stepfor'
const modified = 'stepor'
findNaughtyStep(original, modified) // 'f'

const original = 'abcde'
const modified = 'abcde'
findNaughtyStep(original, modified) // ''

Considerations:

There will always be one step of difference or none.
The modification can occur anywhere in the chain.
The original sequence can be empty.

My Solution

function findNaughtyStep(original, modified) {

  if(original === modified){
     return ''
  }

  let differentElementIndex = 0;

  for(let i = 0; original[i] === modified[i]; i++){
    differentElementIndex = i + 1;
  }

  return original.length > modified.length ? original[differentElementIndex] : modified[differentElementIndex];

}

Declare a conditional statement that returns an empty string if the original string is equal to the modified string.
Initialize a variable differentElementIndex to 0, which will store the index where the elements at the same position in both strings are different.
Create a for loop that increments a variable i while original[i] === modified[i] are equal. When they are not equal, assign the value of the current index + 1 to differentElementIndex.
Finally, check if the string named original is longer than the modified string. If true, extract the element at the differentElementIndex obtained previously. Otherwise, if modified is longer, extract the element from the modified string.

Code Challenge 3

Previous Challenges:

Challenge 2 Advent JS 2023 by Midudev

Juneiker — Sun, 03 Dec 2023 00:41:02 +0000

My solution to challenge 2 in this series

Instructions:

In Santa's workshop, the elves have a list of gifts they want to make and a limited set of materials.

The gifts are strings and the materials are characters. Your task is to write a function that, given a list of gifts and the available materials, returns a list of gifts that can be manufactured.

A gift can be manufactured if we have all the necessary materials to make it.

const gifts = ['tren', 'oso', 'pelota']
const materials = 'tronesa'

manufacture(gifts, materials) // ["train", "bear"]
// 'train' YES because its letters are in 'tronesa'
// 'bear' YES because its letters are in 'tronesa'
// 'ball' NO because its letters are NOT in 'tronesa'

const gifts = ['juego', 'puzzle']
const materials = 'jlepuz'

manufacture(gifts, materials) // ["puzzle"]

const gifts = ['libro', 'ps5']
const materials = 'psli'

manufacture(gifts, materials) // []

Solution

function manufacture(gifts, materials) {
  const materialsSet = new Set(materials);

  const lettersInWord = (word) => {
    return word.split('').filter(letter => materialsSet.has(letter)).join('');
  };

  return gifts.filter(gift => gift.length === lettersInWord(gift).length);
}

Create a Set that separates all the letters from materials.
Create an auxiliary function lettersInWord that takes a word, splits it into letters (using .split()), filters the letters based on whether they belong to the materialsSet previously defined, and finally joins them back into a string.
The final step is to apply a filter on the gifts array and return only those elements whose length is equal to the length of the word returned by the lettersInWord function.

Solution

Previous Challenge Solutions

Challenge 1 Advent JS 2023

Challenge 1 Solution AdventJs 2023 by Midudev.

Juneiker — Fri, 01 Dec 2023 22:23:17 +0000

As is customary for the past couple of years, Miguel Ángel Durán García (midudev) has published the traditional AdventJs with programming challenges from December 1st to December 25th.

Honestly, I haven't been very active in past events, but I've set out to complete this challenge, and what better way to do it than by documenting it here.

Description of the First AdventJs 2023 Challenge

"In the toy factory at the North Pole, each toy has a unique identification number.

However, due to an error in the toy machine, some numbers have been assigned to more than one toy.

Find the first identification number that has been repeated, where the second occurrence has the smallest index!

In other words, if there is more than one repeated number, you should return the number whose second occurrence appears first in the list. If there are no repeated numbers, return -1."

const giftIds = [2, 1, 3, 5, 3, 2];
const firstRepeatedId = findFirstRepeated(giftIds);
console.log(firstRepeatedId); // 3
// Although 2 and 3 are repeated,
// 3 appears first for the second time

const giftIds2 = [1, 2, 3, 4];
const firstRepeatedId2 = findFirstRepeated(giftIds2);
console.log(firstRepeatedId2); // -1
// It is -1 since no number is repeated

const giftIds3 = [5, 1, 5, 1];
const firstRepeatedId3 = findFirstRepeated(giftIds3);
console.log(firstRepeatedId3); // 5

My solution to this challenge

function findFirstRepeated(gifts) {
   /* The filter function checks if the current index of the element is different from the first index of occurrence of the element. */
  const repeatElements = gifts.filter((elem, index, arr) => arr.indexOf(elem) !== index );
  return repeatElements.length > 0 ? repeatElements[0] : -1;
}

Code Explanation:

The important part of this code is the constant repeatElements. I created a filter on the gifts array that essentially iterates through the array and applies the condition (arr.indexOf(elem) !== index) which adds the element if the index of the first occurrence of the current element (using the indexOf method) is different from the current index.

Finally, thanks to the ternary operator, if the length of the repeatElements array is greater than 0, we return the value of repeatElements at index 0 (which is precisely what we need in this case), and if not, it returns -1.

What Score Did I Get?

My score was 400 initially (hence the screenshot), then I tried again and it changed to 270.

About the Use of Chat-GPT
Midudev clarified that the spirit of this challenge is to solve problems on our own to improve our problem-solving skills.

He also mentioned that if you get stuck, it's not wrong to ask the AI for a bit of help. After all, this is not a technical job test but rather a way to enhance our abilities as developers in a more entertaining manner than typical programming challenges.

Personally, I didn't use chat-GPT, but the idea of using the .filter() method along with indexOf() was inspired by a tutorial I had recently created on removing duplicate elements from an array. Link to the tutorial One of the methods is similar to the use case of this challenge.

If you've made it this far, I hope you've understood my explanation 😊😊 Thank you very much for reading. I invite you to participate in this challenge and share your achievements.