Assumptions are that we already have the new design completed, WordPress template built, and staging URL set up.
Steps to migrate web pages into a new template
Preparation (Lead Dev)
- Run Screaming Frog crawl of current website and get a list of web pages for migration.
- Build spreadsheet.
- Make a copy of our spreadsheet template (in Google drive, go to the clients /dev/ folder, right click in white space, move mouse over Google Sheets and then arrow on right, a popup should open, then select “From a Template” and finally choose “(TEMPLATE) Site Migration Spreadsheet.” Give it a name of “domain.com migration spreadsheet date.”
- Add the web page URL list from the above Screaming Frog crawl into the migration spreadsheet.
- Edit list of web page URLs, we should only have web pages (no images, no js, no dynamic pagination, blogs, blog tags, categories, galleries, or any data that will be migrated automatically, etc.).
- Set up task in ClickUp, with link to spreadsheet, and assign the dev(s) to work on this migration.
Migration (Dev)
- Go to the ClickUp task and open migration spreadsheet.
- The cells for each row in this spreadsheet are a check, they must be filled out as you go through this process for each web page. Think of this as you personally signing off on each step with your signature, you are accountable for any mistakes.
- Using the migration spreadsheet, choose your first web page to migrate. Open both versions (current and staging) of this web page into two browser windows side by side (one window with the current website on the left side of screen/monitor, and the other window with the staging website on the right side screen/monitor, see below screenshot).
- Checks:
- The URL should stay exactly the same (if not possible, ask lead dev if okay to change).
- SEO data; Title Tag, Meta Description and H1 tag all must be verbatim.
- Content and images must be verbatim (make sure alt attributes for each image are migrated).
- After web page has been migrated, review your work.
- With both versions (current and staged) open in two browsers windows (left and right), slowly scroll down each browser, comparing current to new, checking that you have migrated all content and images.
- Make sure everything looks good, the new web page should obviously always look better than the old. If it doesn’t, and you feel you need more time than we’ve assigned to fix this, please let the lead dev know.
- There should be no pixelated images, no enormous images, all styling should be consistent, padding should be consistent, it needs to look good.
- Check mobile resolution on staged webpage, and make sure it looks good. The images should be easy to view, no large text, no tiny text that is not readable, no big padding, all styling should be consistent, padding should be consistent, it needs to look good!
- Make sure each cell in the migration spreadsheet is filled out. If all is completed, mark the entire row with green highlight.
- As mentioned above, think of this as you signing off on each step with your signature, you are accountable for this being completed correctly.
Migration Quality Control (Lead Dev or Manager)
- Go to the gear icon and URL Mapping
- Review all staging web pages. Choose your first web page to review and open both versions (current and staging) of this web page into two browser windows side by side (one window with the current website on the left side of screen/monitor, and the other window with the staging website on the right side screen/monitor, see below screenshot).
- Scroll down each window and make sure all content is migrated and everything looks great.
- Review mobile resolution and look for issues.
- If a page gets your final approval, add your name in the spreadsheet column marked QC, you are accountable for any mistakes.
Side by side comparison example screenshot:
Using Screaming Frog to compare
Reference Screaming Frog doc for more detailed info: https://www.screamingfrog.co.uk/how-to-compare-crawls/
- Change to Database Storage mode if not already using
- Run crawl of “Previous” website, and run a second crawl of the “Current” staging URL
- Select Crawls To Compare:
- When in ‘Spider’ or ‘List’ modes, navigate to ‘File > Crawls’ and highlight two crawls by holding down ‘control’ on Windows, or the ‘command’ key on macOS. Then click ‘Select To Compare’, which will switch you to ‘compare’ mode.
- For clarification: Previous should be current website URL; Current should be staging URL (we can swap this using the opposite arrow icon next to the gear, top right).
- When in ‘Spider’ or ‘List’ modes, navigate to ‘File > Crawls’ and highlight two crawls by holding down ‘control’ on Windows, or the ‘command’ key on macOS. Then click ‘Select To Compare’, which will switch you to ‘compare’ mode.
- Adjust Comparison Config For Change Detection:
- Click on the compare configuration via ‘Config > Compare’ (or the ‘cog’ icon at the top) and select the elements and metrics you want to identify changes in
- We should check Page Titles, Meta Description, H1, Word Count at a minimum
- Click ‘Compare’ To Perform The Analysis
- View the “Change Detection” tag to see results.
URL Mapping for comparing staging
We can compare URLs directly using the Compare>URL Mapping feature in Screaming Frog.
See below example, we have two regex calls 1) replace .php with / and 2) we are comparing the Previous “https://www.armored-trucks.com/” with the current “https://armored.ampv.dev/”
Note the field “URL before writing” if you enter an example URL of the “Previous” URL here, with page URL example, the “URL after rewriting” field (not editable) will show you the the example output of your regex. Really cool.
