Migrate a site to Webflow·续1

Website migrations can be difficult, they can be complex, and there can be a lot of different parts going on. Now, when it comes to migrating websites, the two things I like to think about are: don't hurt discoverability, so like, don't kill your SEO and AEO, and also don't hurt the downstream reporting, the stuff that the marketers and executives are looking at. The actual design and build of the website is kind of the easy part now. So we're going to look at, when I migrate a website, what I'm thinking about and what I'm doing to try to make it a successful migration. Now, we have an example for you today, and I'm excited to get to that. But we're going to tackle it in three phases. We're going to plan our migration, and then we're going to actually build it. And we're going to be using Claude, we're going to be using AI for this. And then phase three, we're going to ship it and QA it. So, ordinant-carbon.com is a fictitious company and brand and website that we created for this example. We see they do carbon reporting software for the enterprise and they have a legacy website, but they want to modernize it and move it into Webflow so that their marketing team can make changes and work collaboratively, because they don't want to work in GitHub and they're just tired of their legacy platform here. And so the website that they have is this really cool design that we have in Figma here. It looks, feels more modern. It's got kind of some fancy artwork that describes what their company does. It just feels more minimal and clean. And yeah, we like it. So we're excited to tackle this build and we see that there's like a, okay, there's Platform here, there's Case studies, there's a case study detail page, and there's an About and Contact page here. And we have some assets already ready to go for us from the designer. So thank you, Brandon Roth, for that. This design is by Brandon Roth, hugely talented designer. And there's also a bit of a style system over here, so things I'm taking a note of and also like, okay, we have designs for these pages and it looks like it maps out roughly equally to the nav. I didn't see a customer stories page in the design request. A Demo goes to About and Contact and, you know, where does this form go? If I just submit this, it goes to a thank you page. I don't have designs for a thank you page. So I don't even know what platform they're using for their CRM. Does this, like, just send an email to somebody? Does it go to HubSpot? We're not sure, but we're going to find all that out and we're going to take care of it. So here we go at the planning phase. Now, one thing I want to show you is if I go to Settings here and I go to Usage, my usage actually just rolled over yesterday, so I've already spent $51 on this thing. But that's okay. What we're going to do is compare our usage and spend before we start to after. So we can see kind of how much you might expect to spend if you were using Claude in this scenario. What I've kind of done for this is I've made these really elaborate prompts so that I'm not wasting your time in Claude and you're not just seeing me type a bunch of typos into Claude. So I'm going to paste a big block of text. Let's go ahead and read this prompt. Using our sitemap, CMS export, list of existing redirects, and Google Analytics plus Search Console data, generate a URL plan for an upcoming website migration. Essentially, what we're trying to do with our URL plan is figure out the scope of our project. What are the URLs or the website addresses that exist on the old website that we now need to have on the new website? We might want to dump some along the way. We might want to combine content from two into one, but we need to figure out exactly what that is, and all of these sources here can help us do that. So let's go ahead and cruise over to ordinant-carbon.com. So what we're going to do is first we're just going to go to the sitemap.xml. A website may or may not have a sitemap.xml. It might be named differently. So just try to figure it out, what you can get. And now in here we see this is just a list of essentially all the live URLs on this site. So this is a great place to start. And I could just copy paste this or I could maybe download it. Let's Save as, and sitemap. And that looks good. Okay, so we saved it. Next we want to get, what was the next thing on our thing here? An export of the CMS. Now, it turns out that the owners of this website have an admin portal. If I go to /admin and then I just put in their password that they've given me and I export the CSV. Now I have a CSV export right here that I can give to Claude. If we look at this, we can see that the website has a bunch of posts. Now these are called case studies. They have a case studies kind of content management system already in place. And looking at this, I can already see like this image URL. This is relative path syntax. And Webflow is going to need a public URL. So I already know if I try to import this directly into Webflow, this would fail. And then rich text is also a place where importing into Webflow can get tripped up a lot, because it's expecting sanitized HTML. And if I look at this, I'm seeing definitely some HTML. If I look closer, I want to see like, look, I can see these square brackets, which is not considered HTML. This is probably some sort of like plugin system that their website uses to maybe inject other components or certain HTML elements within their own rich text system. Cool. So we've seen that. And what we can do is we can have Claude write a script to clean up and sanitize this HTML for us so that it's ready for Webflow rich text. And then we see all this other stuff. These are all basically text fields. So I'm not too worried about any of these. Again, the main thing, we're not quite into our CMS plan yet. The main thing we're more worried about is the URLs. And that would come from the post name likely here, though that's not 100% guaranteed. This is just the CMS export. We can go ahead and look. We have the case studies here and we see the case studies. You know, it's a, it's a list, right? And if we click into one of these, look, there's this weird one too. Like why is there, maybe this is a duplicate or something. And so we can see there is some rich text for each CMS item and it has like some callouts that might have some fancy sort of styling on them or something that we'll have to consider as we migrate this to Webflow. But the big thing we're looking at are these URLs. So it looks like it's ordinant-carbon.com/case-studies/meridian-advisory-partners-case-study. And that's key, because when we set up our CMS schema in Webflow, we'll want to make sure to match that URL structure. Assuming the client hasn't told us that they want to use a new URL structure. I think that is enough on the CMS export piece. So let's get back over into Claude. Now we need a list of existing redirects and this may be, depending on the provider, the hosting, the DNS, all this, it may be in a number of spots. So for this example, I've been given access to the GitHub repository for Ordinant Carbon and actually right in the root of their directory there they have this _redirects file, and this is what's defining the redirects. And we can test it out. So if I go to ordinant-carbon.com/contact, notice it redirects. It essentially takes us to a certain section in the page. It's looking for a section with the ID of contact. So back here we found these four redirects, so we want to account for these. Actually, these are four 301 redirects. So we see one down here. It looks like they have a case study that is draft and not published yet. So there's this other redirect that they have going on. I'm not going to worry about that. I'm going to let Webflow's Draft status handle whether or not something is actually published. So let's just copy those and I'll just paste them down here because I need a place to put them. So those are there. And finally we need our Google Analytics and our Google Search Console data for Claude. So let's go ahead. I am going to go to analytics.google.com and we have the Ordinant Carbon demo here. We see it. Oh, it has some active users, 178 over whatever time period this is. So that's kind of cool. And the report that we want to get, if I go to Reports and then I come down to, let's see, let's see, which one is it? Pages and screens, inside this view, user engagement and retention. So this is kind of telling us like what slugs have what amount of views and traffic and event counts and whatever you might want there. So we see it's had, you know, again, this is an example, but pretty cool. We've got some mock Google Analytics data here for us and I'm just going to press this Share this report button and then Download file and we'll download this as a CSV and I'll just open this just so we can see it. And this is just exactly what I was showing you in the web UI. So we have our views, our active users, views per active user. And Claude is going to use this to get a sense of what pages are important. What do we really not want to mess up, and kind of help us prioritize what pages are important. And this is views specifically. So if somebody lands on that page, boom, count it as a view. Now we also want to know which ones are performing well for discoverability. And for that we're going to get our data from Google Search Console. So let's go over to, boom, the internet here, and we'll go to Google Search Console just like so. Click into this. Let's start now. And unfortunately I can't get a ton of like great Google Search Console data mocked up like I can for Google Analytics. But what we'll go ahead and do is I'll just show you how to export this and then we'll just have Claude make something up. Okay, so for this one we're going to go into indexing of pages in Google Search Console. Very important. If you're doing a website migration, we might make a mental note of this, or not even a mental note. We'd write it down if I had a pen and paper. But how many pages are not indexed and how many are indexed? And you could also drill into like, why are pages not indexed? So it looks like there's pages with a redirect. It's saying there's 22. And from what I'm seeing here, it's like all this, when the URL ends in .html, it's probably redirecting to the slug without .html. It's called like pretty URLs. Or we could see like, how many 404s are there? What's 404ing? Apparently this Kingsley Academic Group reporting. So maybe it was a CMS item that got unpublished. And case study detail, somehow there was a case study detail page published that doesn't exist anymore. So these are the kind of things you will want to make a mental note of, or not even mental, just like store it somewhere so that when we revisit after the migration, we can make sure that we're still indexing the same number of pages and we haven't introduced new problems into the system. Okay, that's enough on that. What we want is that data, that performance data. And to get that, where we will go is instead of in indexing on pages, we're going to go to Performance. And from Performance you probably want to select the last 16 months. We're not going to get a ton of data from that. You look at, it starts at August 18, which is when I made this mock website. But hopefully you can get as much data as you can. And then we're going to go down here to Pages, and you don't actually need to select it, when we export Google Search Console is going to export everything. But I'm just showing you like, okay, this is kind of telling us how many impressions and how many clicks each individual page is getting on Google Search. So if somebody searches like ordinant-carbon.com Aldergate Hotels, then hopefully they, you know, hopefully Google serves up this URL. And we may not know why. Maybe Aldergate Hotels are really popular or they're in the news or something. So we don't know why this one has the most number of impressions, but we just know it does. So we want to make sure that it keeps a lot of impressions. Now it doesn't get any click-through rate, but hey, again, this is an example. Okay, so let's go back up and I'm going to click this big Export button in the top right and we're going to download CSV. Now this gives us a zip file. So if I just click it, it's going to open that zip file and we see that each tab in there is given a CSV, and the one I care about is Pages here. And so we see, this is just exactly what I was showing you in the web UI. Now we have it as a CSV that we can give to Claude. So let's open up my Downloads folder. I want this Pages CSV from Google Search Console. I want this Pages and screens by path from Google Analytics. I want this CMS export, which we identified isn't too crucial here, but we're going to give it to it anyways. And then also the sitemap. And you could have Claude crawl the sitemap itself if you want. But yeah, there we go. Let's go ahead. I've got Opus 5 selected here on high. You could probably get away with Sonnet 5 here. Let's go Sonnet. I'm going to use Opus 5 for the build and Sonnet for my planning. I think, although they say like use Opus for your planning, use the smart models for your planning. So let's go the smart model. And I'm bypassing permissions because I don't want to have to give permission for anything. Okay, we pressed Enter on our big prompt. Let's let it turn for a little bit. Okay, so it looks like Claude has finished up here and I'm seeing this Excel file and a CSV. And just a reminder, we were expecting to get, I think, two CSVs or a CSV with two sheets, but Claude has told me that that's not possible with CSV. So that's why we've got the Excel file here. And there's a number of things to flag and look up. So it's saying two judgment calls and there's some stuff I need to review, but we'll get to that. First, let's take a look at the plan and see if it even is close to our expectation. So I'm going to Open in Finder so that I can double click this thing. Here we go. We've got a big list of URLs and we see we have old URL, new URL, and this is great. Remember we talked about when old URL and new URL will often match but sometimes might not, and those ones are going to get highlighted in red here. So we've got kind of our plan here and I'm liking that. It seems to already be sorted by the Google Analytics views in the last 28 days. So we already have kind of this prioritization list. And if I'm just looking, if there's any other things, it's got the Google Search Console click data right here. It's done a great job and it even assigned different priorities and tells me if there's a redirect required. So this is great, because what I can do later is pull out the redirect requireds, put them in their own sheet and export that. And actually it's done that already for me here in Redirects. So we see old URL, new URL. And yeah, so we're kind of ready to go with our URL plan. So let's go ahead and move on to the CMS plan. Okay, so let's start a new session with Claude and I'm just going to paste this big old prompt. This is my CMS plan. So I'm giving it the references, the documentation that I want it to read. Again, we have these inputs and then we have our outputs that we want. So we want a CSV of sanitized CMS items compatible with import to Webflow. And we want a Webflow schema definition. What is a schema definition? It's just basically outlining how to define your collections or your CMS in Webflow. Cool. So let's, we already have this, we already have this, and let's give it a site ID as well, just to be super sure, because we're going to build our collections here. If I go to Webflow and I create a new project, a blank site, Site settings, so I'm on General and I'm going down to the site ID here. This is a cool place to get site ID. I'm going to reopen the site in Webflow. While I give it the site ID, let's give it a link to these Figma designs. So I'm just going to right click, Copy link to page, back to Claude. Boom, there you go. And we need to give it that CSV. Not that one, not that one, this one. Okay, let's press Enter. Great. So while Claude is working, let's go ahead and kind of recap what's going on here. The main thing that we want to do is we want to make sure, one, will the content that we exported work in our new designs? So if I'm looking at the case study detail page here, I notice that it doesn't actually match what's on the legacy page. So are there like, you know, are there more assets in here that I need to know about, or do I have to ask the client for a bunch