 Okay everybody, I'm really excited about our next speaker who I've introduced many times Dana de Tommaso Dana is far too modest about herself. I think this is because she's Canadian I'm not sure her bio her official bio bio says she's president and partner at kick point and she helps people do better marketing She is so underselling herself So Dana is a frequent Mozcon speaker where she consistently Surprises and delights us with her insights in the marketing local SEO analytics She's virtually an expert on everything She also just recently released a new course on LinkedIn on technical SEO if you haven't you should go check it out Now Dana's title talk today is titled build for search modern web dev that puts SEO first now Why is this important? I'm sure we've all been in this situation where we built a new site and we're think we're building for SEO I've done it with every side. I've ever worked with myself So I'm looking forward to what Dana has to say. Please welcome my friend Dana de Tommaso The best and worst thing you may ever hear in your career as an SEO is we've decided it's time to redo our website Very exciting also a little bit terrifying because finally you can be free of that terrible website that drags you down causes you all these issues But the reality of the work involved in creating a whole new website can really set in and feel really intimidating The other question you might want to be asking yourself is is it actually time to redesign your website? maybe you know the CEO says I want to change not a great reason or You have a new director of marketing and they want to leave their mark on the site also not a great reason, but Maybe it is a good time to make this change And so good reasons are say you're making a lot of concessions in terms of the stuff that you can or can't Blow to the site because it just doesn't work Well, or maybe you're spending thousands of dollars a month on management because you can't change anything without involving a developer Or maybe you can't measure anything which maybe that's an analytics problem But it could also be a website problem too Or you just can't make the changes to your site that you need to in order to present information to your clients or customers in a Way that they prefer so for example Maybe your sales team is doing a ton of the heavy lifting your call center in terms of getting information out to customers When in reality it might actually be easier for them to just I don't know to see your website Those are good reasons to change Now the other half of this question of course is when somebody says to you when should SEO get involved And I've heard this question a lot in my career I think it's a really common question that comes along with the website redesign process I think because fundamentally SEO is seen as something you sort of sprinkle on top at the end like it like a nice garnish as opposed to something that should be baked right into the product all the way through and Obviously, this is a huge misconception that we work against constantly in SEO. It's still there This presentation is not necessarily going to fix that But hopefully I can help you sort of be less of a garnish and more of a main dish and that's enough for cooking metaphors I'm not a cook so The worst thing you could ever be asked is the website's almost done and can SEO take a look at it this definitely means you're in the garnish category and The worst part of this is if somebody says we're launching tomorrow. Can you take a look? You've never seen this site before that's the worst thing to have happened Hopefully you're involved in a position with the site redesign that you're not stuck at this point Hopefully you're earlier in this process Because one of the problems that we have as SEOs is we aren't necessarily in the room with the decision-makers, right? Sometimes we're locked out. We don't seem as important enough. So we can't get involved in the process as early as we should be as SEOs we really straddle the worlds of content technical knowledge and conversions all things that are really important to have at any part of a website redesign process But maybe you don't consider yourself to be an expert at all these things. That's okay as you go through your career You're definitely going to get a depth of information on a lot of different topics so there's a theory of a t-shaped marketer and I actually tried to find out where I originally read this forever ago I don't know if it was distilled or I think Rand Fishkin shared it at one point But the idea of the t-shaped marketer is that you should know a little bit about everything and then dive really deeply into one Of the disciplines in digital marketing So if SEO is your discipline for example, maybe you dive right into on-page technical and off-page or Maybe you know off-page is really your jam. Maybe you're a great link builder But that means you should still know a little bit about technical and on-page And I think that as you grow in your career, especially if you're new in your career Maybe you don't feel confident about these things yet But this is going to become your wheelhouse and it's okay if you realize you know technical SEO Not my calling, you know, I much prefer working on page or off page That's fine But you should still know enough about it to speak intelligently to it and to help me people make good decisions about it And so I think a good well-rounded digital marketing and particularly the SEO education should involve learning a little bit about all these things and Then diving in where it really matters The other problem that we have as SEOs and why we don't necessarily end up in the room when the decision-makers are It's because we're really terrible communicating what it is that we do, you know, if I say to you Hey, can you make me a report on something? I bet you the first thing you're going to turn to is a table or Excel and Well, that may be how SEOs brains work. We like numbers. We like data. We like to look at spreadsheets Lot of people aren't necessarily built like that spreadsheets are not many ideas people idea fun And so I think we really need to get away from tables and start presenting things in a more visual fashion Right because that is one of the reasons we bore people, right? We're like, look at this exciting spreadsheet spreadsheet never exciting Okay, so I think you should really think about how you can present your data to make it just a little bit better There was recently a great article from Tom Critchlow That talked about how you can talk to execs about SEO and I'm going to link to that in the reading Additional reading at the end of this presentation. So I think it's a really important read So talks about how to present SEO in a way that isn't just like look at this nerd stuff We need to do but actually thinking about outcomes and no tables involved. I promise So now that I've talked a little bit around the website development process What should the website development process actually look like last year at Mozcon? I talked about a discovery process for marketing projects And this year I'm going to be talking about our discovery process for website projects And sometimes these things work in conjunction. Sometimes people just need marketing or they just need a website But we have used a discovery for both and we found it to be really successful So hopefully I can impart some of this onto you So back in you know, ye olden days of kick-point the way we used to do things and the way you might still be doing things And the way really common way that people manage website projects is called the waterfall method And a waterfall things move from one step to the next can't really go back, right? Waterfall is a one-way trip And you can't really go back without some serious significant effort. We use this for a long time It's not for us. And if you are using the waterfall process, I'm going to tell you why it isn't great It really isn't a good fit with modern web development projects And I think it's a holdover from again yield and days of the internet when waterfall did make sense, but It doesn't make sense anymore So one of the big reasons that we find is that Because in waterfall all design is done before development starts all the designs have to be complete Approved done and dusted before they can move on to development And then a decision maker might say just as the designs are done or just before they move into development Oh, you know what? I actually hate this or I've Come to a conference and I've learned something and I want to completely change things And you have to start all over again Which is obviously a huge budget suck because you just spent all this time developing all these designs You really only had so much budget for making all these designs And now you have to go back and start all over again huge problem Which leads us to budget can get eaten up too soon because the pacing isn't very good And a lot of that has to do with these endless iterations. You can get stuck in early in the process Budget can get eaten up way too early, which means either taking hit on the project So for example, if you're an agency and you said it's going to cost 40 000 and then you spend 30 000 of that arguing about design You got to pay for it somehow, right? Or if you're in-house it means that they just say, you know what this is all the budget we have this year I guess we're going to see you next year and then you have to figure out what you're going to do after the fact For the website that you had no input on Related to this of course its developers come in way too late So what you don't want to have happen is a developer comes in when all the designs are done approved Everybody signed off on and it was a Herculean task and now it's done And the developer comes in and is like, oh I actually can't do that or you know a huge part of our audience uses Internet Explorer, let's hope not but you know or edge and you can't do that on that platform Or this isn't going to work on mobile or you can't do something You know that you thought you could do and now it's going to be a huge problem But you've already had these designs approved So now you have to go back again redo the design get the decision makers back on board Or you just I don't know develop and hope no one notices that's not going to work And of course problems also don't show up until coding starts and a lot of this has to do with how we present design Right a website is not a static image. It's not a brochure. We all know this but yet when we present website designs We use products like envision and I'm not crapping on envision. We use it too But there really isn't a great way to present a website design, which is static medium inherently Without I don't know showing something that isn't static But there isn't really a way to do that So while for example, you can describe the movement that an element might have or say, hey There's going to be a wavy underline here unless you can send a client a code pen Which is something that we've done to explain this in the past It's really hard for people to visualize something that isn't static in a static medium And so because of that no one is on the same page until coding happens They see it and they're like, oh that isn't what I was expecting and then back to the drawing board you go Another issue is that decision makers really struggle to visualize it and It's because honestly decision makers don't do this every day It is difficult for them to just figure out what a website's going to look like and that's okay That's that's not their job, right? So if I say to you, oh, we're going to have a drawer here This will be an accordion, you know, you might know what that means and I might know what that means But as a decision maker who thinks of an accordion is like, you know A musical thing is not necessarily going to know what the heck we're talking about and frankly that that's fine You know, I don't expect decision makers to have a fully fledged website living rent-free in their heads until it's launched I think that we have some expectations in terms of explaining things But realistically we can't expect them to have the expertise that we do we don't have the same jobs So I don't think it's fair to layer all this in decision makers and say, oh, yes, no vision Well, maybe we didn't do a great job of explaining it And also because all the design happens and then it goes off into development development locks themselves in a small Unlip room for a while and then the website comes out Development can take a long time and then decision makers can wander off and think about stuff And this is super dangerous because let's say you're happily through development The decision maker comes back and is like, oh, I heard about mobile first. Did we do that? You say, oh, well actually 95 percent of visitors to our site are desktop and they'll always be desktop And this is why I'm like, yes, but I heard mobile first was really important for google And you're like, yes, it is but this is what we need to think about for our users And then now you're back at those drawing board again horrible horrible things can happen if you Essentially leave decision makers lingering too long on iterations without getting a lot of feedback from you And then the last thing that happens before you launch the site is quality assurance quality assurance is not great in the best times And sometimes you don't really know what you're going to find especially if it's been poorly specced all the way through And that can really show and shine a light on where miscommunications happen between your team members So if you unload in all your qa the end of the project becomes horrible slog against time and budget And can really easily turn into an exercise and finger pointing not fun for anybody So now that I've told you how horrible waterfall is I'm going to talk to you about what we call agile ish Now I'm sure you've heard about agile right things that happen in two week sprints Everybody's happy and productive all the time. I'm lying. That's not actually how agile happens But the two week sprint thing is actually true We call it agile ish because we don't actually adhere to the idea of a sprint being a fixed period of time But a sprint is more something that we're achieving throughout the process agile is frankly a delight and is really transformed how we do website development And I feel like I could speak to this with authority because when I first started my career in digital marketing way back in 2000 I started out as a web developer And I hated it, which is why I work in SEO now, but I actually enjoy working on website projects again So after 21 years if I'm like, oh, actually, you know what website design isn't so bad I feel like you too may also be convinced by the wonders of agile ish Part of the reason why is because agile ish fixes a lot of the problems that I just went through with waterfall So for example, we can get developers involved as early as possible in the project But we don't really bog them down with stuff right away. They're necessarily at every meeting But their feedback is there So we end up jumping into development a lot faster, which means that we move from Idea to design to seeing it live on a screen way faster And I'll talk more about what that looks like in a moment But another big advantage of agile ish is that because deliverables are presented often and regularly There isn't a lot of dead time where someone can wander off and have those thoughts about mobile first or whatever it might be Right. You're showing stuff to them all the time. So they're feeling super involved in the process There's lots of little wins and so you can continue to get fine in the project on a regular basis So Now they've told you about the gospel according agile ish. How does this actually work? The first thing we do is keyword research, which yes A lot of things in life start with keyword research like all great things in SEO There's keyword research It's boring. I mean, okay. I find keyword research boring. Maybe you love it and good for you We need people like you in the world's don't ever give that up, but I it's not personally not a fan So you look up thousands of weird things that people typed into google that relate to what it is that your company does And then you make a spreadsheet, of course in terms of how your health these keywords are going to be laid out And then you show someone the spreadsheet and they just don't understand, right? And remember we talked earlier about how spreadsheets not necessarily the best presentation topic for everything So I learned this great trick from Rebecca bags and chris corack on how to present keyword research in a way That's way more interesting. Um, and honestly, it's so simple Use a pie chart So I mean as I mentioned I've been working this field for 21 years I cannot believe it never occurred to me To present keyword research in a pie chart form until I read their book And I'm gonna have a link to their book at the end as well It's about presenting SEO and and how SEO and content work together. It's a really great read But the number one takeaway I had from this book was You need to use pie charts when you're presenting keyword research to clients So this is an example of an actual pie chart that we presented to a real client of ours And one of the things that they were struggling with was how much do they write about the different topics that they cover? Their investment planning, which is pretty clear based on the heading you see here So they think about things like well, we really like this topic. So should we talk about it a lot? But if that topic isn't really a big slice of the pie Maybe it isn't something necessarily that they should talk about even though it's something that they're really interested in Unless they can specialize in that, right? So that's really the balance between volume Specificity and competition if they're really good at this there isn't a ton of volume It can also help you figure out, you know, okay, we're gonna write about this topic But you can't make people google stuff more. That's how advertising works more in marketing so I think That's one of the things you can think about is is what You know, what can we do to present this information in a way that says the client I know you really love this that people just aren't searching for it And a spreadsheet is not the way to do that Presenting keyword research in this pie chart format has been really Makes it really easy for clients to understand what's important And then of course that flows into the types of content you need in your website because now you understand things Like here's the major headings of your services section Here's the pages that we need to get rid of because literally no one's googling that And here's the pages that we need to beef up more because there's just not enough information on this topic So once you have the keyword research done, then we move into something that we call blueprints Each page goes into a blueprint and a blueprint is like a seriously improved site map And it contains tons of information about the site We build our blueprints in a tool called gaffer content Which is a really useful tool for this and it's so much better than emailing links to google docs or Word documents back and forth So in each page and gather content, we lay out some basic groundwork information Like what is the point of this page? What keyword should we take into consideration of this content? What is the call to action going to be on this page? That's also a really important consideration that I find doesn't really get thought about until late in the process If you're in waterfall But because you're thinking about the call to action and at this point remember We haven't even talked about design yet We're still in the content planning phases because you're already thinking about what those calls to action are It really helps the people who are writing copy be a lot more Effective with the copy that they turn out because they can be both optimizing for keywords and thinking ahead to say Okay, so the call to action this page is to Fill out this form or sign up for our newsletter or buy this product And they can really tilt the copywriting towards that eventual goal And because as well in the blueprint you've laid out every single page on the site And I mean every page you don't just have a section of services And it's like a bunch of layered on top of pages like this is the service page This is the stuff we're covering this page I find that it's much easier for clients to be able to visualize what that final website project is going to look like And remember at this point no design only stuff and gather content And yeah, as I mentioned gather contents have been a really great tool for us to help organize these blueprints We also include an SEO section on every page and gather content with the basic stuff You know you're going to need so for example is a redirect going to be needed because the URL is changing And again, like we're not at the development stage Have you ever been in a website project where you're like we're launching tomorrow? Where's the redirects and they have to scramble and do a crawl and figure out You know how 6000 pages are going to get moved over to the new website In the blueprint process we're thinking about the redirects incredibly early in the process So it means that before when we're done we just export this hand it off development They build it into an hd access or say a plugin for WordPress and then it's all taken care of so much less stress and pain and suffering Additionally on every page we also map up what the content is going to look like This makes it really clear for the content team So we'll say things like there's going to be banner text on this page It's going to be an introduction that's going to be 300 words. There's going to be a primary cta There's going to be a testimonial. Oh, by the way, you need to start asking your clients to get testimonials because we really want to include them on the site And because we come to the content team with what we need and because we've justified why we need this Looking back to the keyword research, for example It helps them write more effectively as I said and decision makers most importantly Understand why we're asking for these things because it's really clear What the end goal is and so they can be on board with like yeah, okay You can interview our customers and find out what they what they think about us So here's an example of what I mean From one of the sites that we've done every content block has some little details on what we're looking for Does this take a while to set up? Oh, yes This is not like a super quick process with templates and gather content It can get easier over time But there's still a lot of manual effort that goes into setting the step up But it's more you do this now and it saves you time later and it saves us a ton of time It saves us time because it's incredibly clear and also limited right because you want to give people Sort of barriers to them to say you can write about this But don't write, you know a whole essay or I do need you to write an entire essay about this You can be really clear what the expectations are right? No one wants to go into something with super unclear expectations And then fail to the unclear expectations and then that really builds up resentment So by being extremely clear as to what the expectations are people can meet those without feeling like they invisibly failed on something that they didn't even know that they were supposed to be passing And there really isn't any confusion No one is going rogue and gather content as well We have a nice workflow of this is ready for you to enter content This is ready for this team to take a look at it This is ready for legal to review it for example And then you don't need to deal with docs and whatnot being shoveled back and forth Gather content is seriously a massive time saver. They're not paying me to say this I just really like their tool So because we've set everything up and gathered content It also makes the transition to the website admin easier as well Right because if we go back to the previous slide you can see it almost looks like the back end of a cms Does it not so that means that when we get into the actual cms admin itself We can really take a lot of cues from how gather content is set up And then when the client does move from gather content into the website admin They're not completely lost and how does this work because it's all set up in a lot of the same way Or if you want to get fancy gather content has an api So you can even use it as a headless cms if you want which is pretty cool. We haven't done that yet I know some other people have there's studies out there about it If you're looking into headless cms's that might be something to consider as well Something else that's really important and I mentioned this is also planning that admin Because again, you don't want to have surprises and in the admin And you may have seen this in the previous screenshots as well We have a lot of micro copy micro copy is in tiny little hints telling you what needs to be done We're big fans of micro copy because again, we want to make sure that we're clearly setting expectations And people might think oh, I don't need this. I understand what's going on But you can't assume that everyone has the same level of knowledge and understanding and memory Frankly that you do or level of focus like maybe they zoned out in that part of the meeting, right? Might as well just write it out there. No one has ever said to us. This was far too clear I'm not interested in this level of explanation. You know, I think this is always helpful for everybody You know, no one says I prefer to fly by the seat of my pants And if they do like they don't actually mean the way you think they do So this is an example of the micro copy that we included for our build for the Edmonton fringe festival website When we built this website, this was a few years ago And we knew that volunteers are going to be editing the site and they may not have gotten the same level of training But say the staff for the fringe festival had gotten so we wanted to use lots and lots of micro copy And frankly it was so successful that all of our sites now we build micro copy into what it is that they do Um, and if you've heard me talk about reports, I talk about how important micro copy is there as well Just explain stuff, right? Like nobody has ever suffered through having a little tiny bit more explanation and context as to what's going on So now as soon as you have that approved blueprint You can build the admin side right away because you already know what the admin side is going to look like And you can start loading in the pages and that means the dev is working with actual pages instead of you know dev one Test two test three in the classic developer pages foo and bar You actually have the real stuff Now finally Guess what we're going into wireframes So we've already done so much by this point. Everything is really laid out that people the wireframes aren't really a surprise At this point, there's no surprises left in the project Which means that the design process goes actually really well and smoothly because we know what the site structure is We're just pulling it all together at this point We use envision to present wireframes and I mentioned earlier that you know static representations with dynamic website can be difficult But this is an example of how that content I showed you earlier gets turned into the actual wireframes and also as I mentioned sometimes you use code pen To explain elements that are going to be moving so clients can visualize what it's going to look like For this particular client We chose to do really high fly wireframes because at this point we're pretty clear as to where things were going to go But you could also choose to do low fly wireframes And take a look and see you know, this is roughly where we're thinking about going. How does this feel? But again, you really shouldn't have any surprises at this point Now i'm going to talk agency side for a second. Just put on my agency hat at this point We actually end our discovery project and this is where we say okay It's going to cost x number of dollars to build the site finish the design And build the project because at the end of the blueprints and at the end of the wireframes We know exactly what the site's going to be and by separating the billing into two pieces We actually end up being on budget, which I know right for websites is crazy But it happens because we're able to split these processes Sometimes it can be a bit of a hard sell for clients But we find that the end products is so much stronger That over time, you know get referrals people talk about this and hopefully You too can add this into your agency's processes because I find that this is a really effective way to sell web design Anyway agency head off back to talking about the rest of us now So getting into design We don't necessarily present all the wireframes at once we break it into rounds and it isn't necessarily page based So for example, maybe the first term will be the menu the home page and the onsite search functionality And then we build up more and more as we go Since we're just showing tiny bits and pieces before we get approval and move on to the next round We never have to go back and fix absolutely everything because you know We get to the end of the entire design and they say oh this menu sucks I don't like it. Please change it and then we have to go back and change it So once the design round was approved then it immediately moves over to development while we move on to the next round of design And that means that you're moving into testing a lot faster and you can also move into SEO a lot faster Therefore you can avoid the recent horror story We had to deal with where otherwise truly delightful client was working with another agency for their website work And then they said hey, can you check out the site launching tomorrow? Guess what wasn't there basically everything we asked for right and unfortunately Like we weren't doing that process with other agency and it just was not good And it just reminded me of all the reasons why we have this process now So one of the things I would encourage you to do is to develop your own list of SEO technical specifications This is a document that we present to clients early on in the process and work with developers if we're not developing it in house But even internally for us we have this document of all the different stuff that we're going to need So i'm going to go quickly through a little list of stuff that we would include So one of the things is you can test with the proper robots.txt file Sometimes if it's a simple site, this isn't necessarily a big headache But if you're using a fancy cms or if it's big this building these robots can be quite a process You can address canonicals and pagination a lot sooner and maybe hreflang if it's multi-lingual Developers really struggle with these items and they're difficult to explain And it's not really their fault like it's a weird seo thing that not a lot of people talk about and nobody knows why canonicals exist Or what they're for so if you can explain it early on in the process that can really help developers understand why And your recommendations can get implemented so early on that you know it's going to work right before launch You can also include site map recommendations if you're using wordpress It's a plug-in great, you know, but you then you know what site maps not to include Because obviously you may not want site maps for every single custom post type For example that exists on the site and if you're using another cms Maybe site maps aren't built in and then your developers need to build it so at least you can tell them what to include Something else we really try to nail in our technical specifications is explaining why h ones are so important because You really want to make sure that you're not using headings for presentation purposes It's headings for outlining content You don't want to have an h one than h four than an h two than an h six, right? And especially if you have to worry at all about accessibility requirements You don't want to have that situation happen So make sure to look up the rules in the jurisdiction where the company is located And know that you're following those accessibility requirements because there's very likely rules and what that website needs to have in terms of accessibility And while there's great widgets, you know, we use monsito for example a lot of the time It don't really solve the core issues with not having an accessible website And then you can also include schema recommendations because you already know what the content's going to be So you can say oh this page is an faq We're going to include faq markup on this page for example, and then that can get built smartly into the cms early on in the process Additionally, you can think about things like 404 pages We even have a round that would include a 404 page design Because you really want to make sure that these utility pages like 404s and search and privacy policies Those aren't just thought about at the end, but actually part of the actual design process So for example, this is a 404 you built for client knowing that people come to their website to find certain things But also often they come to their site to find new news articles So if you find a dead link great, there's a link to news articles Funny 404s are also great, but they're not necessarily usable 404 should take you places And of course, I want to talk about site speed I mean other speakers here are talking about site speed and I'm going to leave the nitty-gritty details to them But core web vitals has finally made it Able for us whiny marketers to get site speed top of mind when it comes to development, which is great But because again development is entering so early in the cycle You can start testing for core web vitals again so early in the process And it's not something that you're adding on to the end or saying, oh We'll just toss a plug-in on that. It'll be fine. And there's not necessarily a plug-in for really bad coding Right? It's something that you really want to work on as early as possible So agile ish means that you can speed test early and often and make sure to share the resources that you're using for testing with your developers And walk them through how you do that because I think that that would also be really helpful for them I have included some additional reading resources, etc This link that should help you with every step of the process of cover today And I really want to talk at the end here about a momentum, which is something you can't force right momentum is either there or it isn't Agile ish really keeps that momentum going throughout the entire process Because you're seeing the fruits of your labor come to life quickly or problem solving together We're not panicking about budget or timeline and decision makers can see what we're doing and are able to present quick wins Often and we're doing what we're so we're going to do This open process really builds trust because everything is visible Nothing is hidden or a to reveal you have a website you build a lot of trust between your team And you know your clients or your boss or whoever it is that you're working with in this project And you know, I realized when I was writing the slide that almost every talk I've given in mozgon comes down to trust Because that's actually how things get done, you know, not the tools we use or our processes Those are important But building trust is really the fundamental way that we get stuff done and having an open process builds trust Like Agile ish Thank you