How to tackle a homepage migration

Your client wants to test a new design and improve their code ?????? So they are launching a new homepage design that runs on React to test performance ?? and user experience. It will run for a couple of weeks/months. And based on the monitored performance it will roll out sitewide

A common practice among business owners who invest in their UI/UX and want to test before rolling out sitewide. As well as for designers and developers that continuously improve their work.

BUT... what is happiness for some can be a headache for others ??

Enter SEO Professionals! ????

A new design means changed elements (or even worse broken) ????

Migrating to React means content rendering and Google being to crawl the site properly goes out of the window if not done properly ??

So what do you do? How do you make sure that the migration goes smoothly and you don't loose a chunk of your traffic?

Here are the proper steps to take as an SEO professional to identify top issues and not let the page loose Organic Traffic upon migration:

1) Heading Structure ??

Provide Heading structure recommendations based on the importance of the section and follow a semantic structure. Avoid heading markup in global elements:- Main navigation- Footer- 3rd party scripts

PS Many, many, MANY businesses forget about Heading 1. It is the most important heading on a page. It can be argued that big brands don't need it due to brand equity. But why not reenforce it?

• Option 1 is to add a static H1,
• Option 2 a hidden one (less favourite)
• Option 3 remove it (which is a no no from an SEO perspective)

Choose wisely and don't make any rushed decision. Always check your competitors.

2) Links and Navigation ??

• A common mistake with React is using a <div> element to change the URL.
• Use <a href> links where relevant. For example: <a href="yoursite<dot>com"
• All navigational links need to be <a> tags
• If the site uses faceted navigation common in eCommerce sites, it results in hundreds of filters. If there is content to support the combination then consider server side rendering the important ones (for example location page in Real Estate or Product PLP for specific combo). Otherwise consider client side rendering to preserve crawl budget ??
• The link itself needs to be marked as href. If dropdowns are used for navigation or filtering (not sorting) considering creating these as HTML/CSS styled drop with <a> tags
• Make sure Google can follow your links and index them. This can be achieved by adding them in your prerendered/server-side source code.

3) Meta Tags ???

• Place them in the head section of the page
• Page Title marked as <title>
• Meta Description marked as <meta name="description" content=" (Make sure to add your main services in the meta description
• )Canonical Tag - reference the canonical version of the homepage for example https://www<dot>yourdomain<dot>com, not https://www<dot>yourdomain<dot>com/home or paramaterized URLs (https://www<dot>yourdomain<dot>com?page=home) as Google will mainly index the canonical URL of a pag
• eMax-image-preview: Large - to use full size images in SERPs or Discove
• rAdd Open Graph (og:) attributes on a page level for social sharing

4) Content Rendering

The most significant issue we’ll need to tackle with React is how it renders content.

• Explore pre-rendering JavaScript into HTML before a browser requests the URL. This approach is called Static Site Generation (SSG), also known as Static Rendering. A great service is Prerender? that offers an out of the box functionality
• Add as much text to be rendered server-side as possible provided that is not dynamic or not useful to Google for crawling/indexing.
• Any personalised content needs to have a “cookieless” state which is a version of content (or navigational components) that is served when there is no personalization present. This ensures these personalized elements can still add value to search engines. That is common when you want to perform A/B testing on your homepage for example and you want to serve the older and new versions to the users with a control and experiment set. Make sure to serve one of them to Google. ???
• Avoid lazy loading essential HTML: It’s common for sites developed with React to inject content into the DOM when a user clicks or hovers over an element. Google won't see any content that is added to the DOM this way.
• If the content injected includes important textual content or internal links, this may negatively impact the page

5) Page Content ??

• Include a preferably Static Heading 1 that includes your brand. It should not change often. If you opt for the hidden H1 the same rule applies.
• Create a fixed content area to add non-promotional content that helps with targeting specific keywords relevant to the business and your product/services.
• Use your footer to link to the most popular pages and to pages which require additional SEO juice ??

6) Schema/Structured Data

Three of the most common structured data elements to add on your homepage are:

• Webpage markup
• WebSite markup
• Organization markup

You can find instructions on how to add schema using Google's structured data guidelines. And you can easily validate your schema using the Schema Markup Validator.

If you run into any trouble we are one message away!

7) Taxonomy ??

• The main navigation should include the main subfolder for all following levels.
• All sub folders should include the main navigation subfolder in the URL. For example
• https://www<dot>yourdomain<dot>com/category-page/
• https://www<dot>yourdomain<dot>com/category-page/product-page/
• Each element on the menu should include the focus keyword for each page as anchor

8) Image Optimisation ???

• Where an image is valuable to the search experience, it should be included within a <img> tag instead of a <div>
• Use responsive images
• Use alt attributes

9) Hreflang ???

In case you are planning to add multiple versions for different languages for example local language + English. We need to tell Google about these different variations. Doing so will help Google Search point users to the most appropriate version of our page by language.

There are three ways to indicate multiple language/locale versions of a page to Google:

1. HTML
2. HTTP Headers
3. Sitemap

For the new site we can add the HTML tag in the pre-rendered content as Hreflang will not change that often unless the URL of either language version changes. Here is the syntax of each link element:

All local Language pages:

• <link rel="alternate" hreflang="x-default" href="https://www<dot>yourdomain<dot>com/" />
• <link rel="alternate" hreflang="en-region" href="https://www<dot>yourdomain<dot>com/en/”>

Make sure you use iso codes for the language and region as described here.

Best practice is to have a language subfolder in the URL (/en/). It is important that all pages in the English version contain the Hreflang tag as well otherwise it will trigger an error for non-reciprocated Hreflang.

Therefore the English version of the site would have the same tag as above in all English language pages.

More on Hreflang in our relevant articles!

We highlighted the main areas to focus on during a migration of the homepage. If you have any questions or run into trouble don't hesitate to message us!

Other Articles from the Guide to International SEO Newsletter

• Localisation
• How to measure Hreflang?
• What hast though done to Hreflang?

-------------------------------------------------------------------------------My name is Nicolas Monti-Potsolakis ???? I am an SEO Consultant at NMP Consulting for Enterprises, SMEs and Start-Ups and Founder of Black Lantern Marketing

Follow me ? for actionable SEO Insights and PRO Tips ??

#SEOMigrations #SEO #SearchEngineOptimisation #SEOTips #SEOConsulting #NMPConsulting