Text is an integral part of any website, and not just because it\u2019s the most convenient way to relay information. Search engines rely on text to understand and evaluate the websites\u2019 content.<\/p>\n\n\n\n
Of course, your content itself needs to be as high-quality as possible. Content quality is one of the major SEO factors, which puts a great responsibility on its maker. But to increase content\u2019s visibility in search engines even further, you need to optimize it with keywords \u2013 words and phrases which people use to find whatever they want online.<\/p>\n\n\n\n
You know, phrases like \u201cSEO for web designers.\u201d Chances are, you found this very article in Google by typing those words or something along those lines. And this article appears in Google because it has \u201cSEO for web designers\u201d in the title.<\/p>\n\n\n\n
Are you starting to see the pattern?<\/p>\n\n\n\n
Here\u2019s how you find and use keywords.<\/p>\n\n\n\n
- \n
- Identify the topic of your page\u2019s content.<\/li>\n\n\n\n
- Use an SEO tool to find keywords related to your topic. For example, this is what you can get with WebCEO\u2019s Keyword Suggestions tool:<\/a><\/li>\n\n\n\n
![\"\"](\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2024\/08\/seo-for-web-designers-keyword-research-1200x748.png\")
<\/figure>\n\n\n\n- Pick specific, descriptive keywords from the table. Avoid using short, non-descriptive keywords since they are unlikely to be used by the people you want to visit your site.<\/li>\n\n\n\n
- Include your chosen keywords in your content. Prioritize the page\u2019s <title><\/i> tag, <meta description><\/i> tag, <H1><\/i> to <H4><\/i> headings and, of course, the rest of the text on your page.<\/li>\n<\/ol>\n\n\n\n
And a few more recommendations to make sure your keywords don\u2019t backfire on you:<\/p>\n\n\n\n
- \n
- Don\u2019t optimize multiple pages for the same keywords.<\/li>\n\n\n\n
- Likewise, avoid optimizing the same page for multiple unrelated keywords.<\/li>\n\n\n\n
- Include keywords in your text naturally, like how you would use them in a real conversation.<\/li>\n<\/ul>\n\n\n\n
Just remember: content comes first. As long as you dedicate a page to a specific topic, you will see how easy it is to use keywords without even trying.<\/p>\n\n\n\n
<\/span>2. Make your site\u2019s architecture SEO-friendly<\/span><\/h2>\n\n\n\n
Web pages are connected with each other via links. And while there\u2019s any number of ways to interlink your pages, most webmasters prefer not to experiment with it \u2013 and rightly so. There\u2019s already a tried and tested method which is the most efficient and SEO-friendly:<\/p>\n\n\n\n
- \n
- Homepage;<\/li>\n\n\n\n
- A few other pages you can access directly from the homepage;<\/li>\n\n\n\n
- Each of those pages leads to the rest of content on the website.<\/li>\n<\/ol>\n\n\n\n
Together, the pages form a hierarchy of sorts, based on how users look for information and gradually narrow down their search. It can be displayed in a diagram like this:<\/p>\n\n\n\n
![\"A](\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2018\/12\/ecommerce-seo-mistakes-18.jpg\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
What makes this structure so SEO-friendly? Because most of the time, people link to the homepage more often than to anything else. This advantage gives the homepage the highest authority score \u2013 and that can be passed down to the other pages on the domain.<\/p>\n\n\n\n
What else can you do to give your site\u2019s structure more SEO edge?<\/p>\n\n\n\n
- \n
- Optimized page URLs.<\/strong> Avoid using random strings of letters and digits for your URLs. You want them to include keywords and be descriptive at a glance, like this: https:\/\/homepage.com\/category-name\/subcategory-name\/page-topic.<\/i><\/li>\n\n\n\n
- The rel=\u201dcanonical\u201d<\/i> attribute.<\/strong> You should avoid having pages with identical or even just too similar content, but if you can\u2019t, then put rel=\u201dcanonical\u201d<\/i> in the copycat pages\u2019 <link><\/i> tag like this: <link rel=”canonical” href=”https:\/\/website.com\/original-page” \/><\/i>.<\/li>\n\n\n\n
- Site navigation<\/strong> at the top of the page.<\/li>\n\n\n\n
- Footer<\/strong> at the bottom of the page.<\/li>\n<\/ul>\n\n\n\n
And most importantly, every site structure needs working links to function properly. No 404 errors nor faulty redirects are allowed. Find broken links on your site<\/a> and fix them.<\/p>\n\n\n\n\r\n
\r\n Find Broken Links on Your Site<\/span>\r\n Sign Up Free<\/a>\r\n <\/p>\r\n \n\n\n\n
<\/span>3. Index your pages and content correctly<\/span><\/h2>\n\n\n\n
Every single search result you see in Google is an indexed page. If a page hasn\u2019t been added to Google\u2019s index, it does not appear in search \u2013 and I assume you don\u2019t want that to happen to you.<\/p>\n\n\n\n
Fortunately, it\u2019s very easy to index any website\u2019s pages, no matter how many. All you need to do is create a sitemap (a list of all pages on your site) and help Google find it.<\/p>\n\n\n\n
How and where?<\/p>\n\n\n\n
- \n
- Use a tool like WebCEO\u2019s Sitemap Generation<\/a> to create a sitemap.<\/li>\n\n\n\n
- Download it when prompted.<\/li>\n\n\n\n
- Upload the sitemap onto your site\u2019s server.<\/li>\n\n\n\n
- Submit your sitemap to Google. (You can do this step in the same Sitemap Generation tool.)<\/li>\n<\/ol>\n\n\n\n
That\u2019s it! Takes about 5 minutes to do.<\/p>\n\n\n\n
Note that certain pages should never be indexed, like robots.txt. To make a page invisible to search engines, add this line to its HTML code:<\/p>\n\n\n\n
<meta name=\u201drobots\u201d content=\u201dnoindex\u201d><\/i><\/p>\n\n\n\n
Conversely, the pages you actually want to appear in search must never have this line.<\/p>\n\n\n\n
One last indexing tip: search engines often struggle with detecting hidden content on pages \u2013 for example, if it\u2019s put behind a collapsible tab.<\/p>\n\n\n\n
<\/span>4. Make your site mobile-friendly<\/span><\/h2>\n\n\n\n
Perhaps one of the most important steps designwise: making sure your site works perfectly on every kind of device. To do that, you need to make your site\u2019s design responsive \u2013 i.e. make it automatically adapt to a screen of any size.<\/p>\n\n\n\n
One way to do it is to install a plugin like WPTouch<\/a> or JetPack<\/a>. But plugins are a third-party resource, so a more reliable option is to do it yourself.<\/p>\n\n\n\n
How do you do that? There\u2019s a whole lot to making a responsive design<\/a>, and chances are, you will not need to use every trick in that book. But the two absolute must-haves for SEO are the viewport<\/strong> and responsive images<\/strong>. Those are fairly easy.<\/p>\n\n\n\n
- \n
- Set the viewport for responsiveness.<\/strong><\/li>\n<\/ol>\n\n\n\n
The viewport is the user\u2019s visible area on the screen. When your viewport isn\u2019t responsive, it may look okay on a computer\u2019s large screen, but turn into a jumbled mess on a smartphone. Like this:<\/p>\n\n\n\n
![\"\"](\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2023\/04\/mobile-unfriendly-site.jpg\")
<\/figure>\n\n\n\n<\/p>\n\n\n\n
I\u2019m sure you don\u2019t want your site to look like that.<\/p>\n\n\n\n
Fortunately, the solution is unbelievably easy. Just add this line of HTML code to its pages\u2019 <head><\/i> tag:<\/p>\n\n\n\n
<meta name=”viewport” content=”width=device-width, initial-scale=1″><\/i><\/p>\n\n\n\n
And you will enjoy a much more natural view on your screen, like this:<\/p>\n\n\n\n
![\"The](\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2023\/04\/mobile-friendly-site.png\")
<\/figure>\n\n\n\n- \n
- Make your images responsive.<\/strong><\/li>\n<\/ul>\n\n\n\n
There are two ways to do it: either use the max-width<\/i> tag in your CSS file, like this:<\/p>\n\n\n\n
img {<\/i><\/code><\/p>\n\n\n\nmax-width: 100%;<\/i><\/code><\/p>\n\n\n\n}<\/i><\/code><\/im><\/p>\n\n\n\n Or prepare multiple, differently sized versions of the same image and display whichever is appropriate for the device you are using to browse your site. It\u2019s done using the srcset<\/i> attribute, like this:<\/p>\n\n\n\n
<img<\/i><\/p>\n\n\n\n
srcset=”image-480w.jpg 480w, image-800w.jpg 800w”<\/i><\/p>\n\n\n\n
sizes=”(max-width: 600px) 480px, 800px”<\/i><\/p>\n\n\n\n
src=”image-800w.jpg” \/><\/i><\/p>\n\n\n\n
Where image-480w.jpg<\/i> and image-800w.jpg<\/i> are the names of your images.<\/p>\n\n\n\n
To see if your site is mobile-friendly, test it with WebCEO’s Mobile Optimization tool<\/a>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2024\/08\/seo-for-web-designers-mobile-optimization-1200x949.png\")
<\/figure>\n\n\n\n\r\n \r\n Make Your Site Mobile-Friendly<\/span>\r\n Sign Up Free<\/a>\r\n <\/p>\r\n \n\n\n\n
<\/span>5. Optimize your images<\/span><\/h2>\n\n\n\n
Images are an important element of the majority of websites. Therefore, you must ensure your images make your site stronger and don\u2019t drag it down.<\/p>\n\n\n\n
How do you optimize the images on your site?<\/p>\n\n\n\n
- \n
- ALT texts:<\/strong> they need to be descriptive and include keywords.<\/li>\n\n\n\n
- Filenames:<\/strong> they also need to be descriptive and include keywords.<\/li>\n\n\n\n
- File format:<\/strong> save your images in the format which yields the smallest size, but mind the quality.<\/li>\n\n\n\n
- Height and width:<\/strong> an image\u2019s dimensions directly affect its size, so they should never be larger than needed.<\/li>\n\n\n\n
- Responsiveness:<\/strong> make your images automatically resize themselves to suit any device. (See the previous section about mobile friendliness.)<\/li>\n\n\n\n
- Geodata:<\/strong> this data can be valuable for local businesses, helping the site rank higher in local search.<\/li>\n<\/ul>\n\n\n\n
Check if your images are missing anything by scanning your site with WebCEO\u2019s On-Page Issues tool<\/a>.<\/p>\n\n\n\n
![\"\"](\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2024\/08\/seo-for-web-designers-on-page-seo-1200x636.png\")
<\/figure>\n\n\n\n\r\n \r\n Fix Your On-Page SEO Issues<\/span>\r\n Sign Up Free<\/a>\r\n <\/p>\r\n \n\n\n\n
<\/span>6. Improve your site\u2019s loading speed<\/span><\/h2>\n\n\n\n
No web designer with an ounce of dignity wants to make a slow website. After all, it\u2019s the best way to repel users and not get paid!<\/p>\n\n\n\n
How do you make sure your site is a hare, not a tortoise?<\/p>\n\n\n\n
- \n
- Reduce your images\u2019 file size.<\/strong> You can do it by making your images smaller, saving them as the most optimal format and compressing them.<\/li>\n\n\n\n
- Enable browser caching.<\/strong> You can use a plugin for that, or you can set the expiration times yourself in the .htaccess file.<\/li>\n\n\n\n
- Host your site on a fast server or a CDN<\/strong> (content delivery network).<\/li>\n\n\n\n
- Use lazy loading.<\/strong> With this, browsers will load only the parts of the page that are currently on screen instead of everything at once.<\/li>\n\n\n\n
- Minimize your page code<\/strong> (but only if you know how). Whether it\u2019s HTML, CSS, Javascript or anything else, shortening and simplifying the code helps browsers process your pages faster.<\/li>\n\n\n\n
- Use asynchronous loading<\/strong> for your CSS and Javascript. Similar to lazy loading, it means your CSS and Javascript files will load only when it\u2019s their turn.<\/li>\n\n\n\n
- Have as few redirects as possible<\/strong> (ideally zero). And if you use them, make sure they can be cached.<\/li>\n\n\n\n
- Have as few plugins as possible.<\/strong><\/li>\n<\/ol>\n\n\n\n
Run a speed check on your site<\/a> right now to see what you can improve. WebCEO\u2019s Speed Optimization tool offers plenty of recommendations on increasing your site speed.<\/p>\n\n\n\n
![\"\"](\"https:\/\/site.wstatic.net\/blog\/wp-content\/uploads\/2024\/08\/seo-for-web-designers-improve-site-speed.png\")
<\/figure>\n\n\n\n\r\n \r\n Make Your Site Load Faster<\/span>\r\n Sign Up Free<\/a>\r\n <\/p>\r\n \n\n\n\n
<\/span>7. Use heatmaps to analyze user activity<\/span><\/h2>\n\n\n\n
What is the absolute best way to make your site design more user-friendly? Listening to user feedback, of course!<\/p>\n\n\n\n
Even if your users aren\u2019t particularly vocal, don\u2019t sweat it. There is a very reliable tool for finding the flaws in your site\u2019s design: heatmaps.<\/p>\n\n\n\n
What are heatmaps? They display user activity on your site: how users interact with it, which page elements they use (and how often), and which ones they ignore. Here\u2019s an example:<\/p>\n\n\n\n
![\"\"\/](\"https:\/\/www.drupal.org\/files\/images\/sample-heatmap-crazyegg.png\")
<\/figure>\n\n\n\nClearly, that one part with the faintest spots doesn\u2019t get much action. Perhaps that part could be moved elsewhere, or the users don\u2019t like how it looks, or they don\u2019t need it at all \u2013 that\u2019s for you, as a designer, to figure out.<\/p>\n\n\n\n
To generate your own heatmaps, use a tool like CrazyEgg<\/a>.<\/p>\n\n\n\n
<\/span>8. Make your content accessible<\/span><\/h2>\n\n\n\n
You shouldn\u2019t forget about users who may have visual or hearing impairments. They are out there, they may come to your site, and you don\u2019t want to alienate them. Your web design should be accessible \u2013 and that\u2019s so important that Google actively encourages it.<\/p>\n\n\n\n
How can you accommodate your website for users with disabilities?<\/p>\n\n\n\n
- \n
- Write ALT texts and captions<\/strong> for your images.<\/li>\n\n\n\n
- Use H1-H4 headings<\/strong> and make them descriptive.<\/li>\n\n\n\n
- Make transcripts for any audio and video content<\/strong> you may have. Sign language interpretation is next level, but if you can provide it too, hats off to you.<\/li>\n\n\n\n
- Write unique and descriptive anchor texts for your links<\/strong>. Avoid using vague anchors like \u201cclick here.\u201d<\/li>\n\n\n\n
- Make sure all your content can be accessed with just the keyboard<\/strong>.<\/li>\n\n\n\n
- Be careful with color contrast<\/strong>. There are tools like TPGi Color Contrast Analyzer<\/a> to optimize your site\u2019s color scheme.<\/li>\n\n\n\n
- Test your website in a tool like Accessibility Checker<\/a> to see where you can make improvements.<\/li>\n<\/ul>\n\n\n\n
And here\u2019s a fun fact: CAPTCHA is not considered accessible. Just imagine how many users you will make happy by not having it.<\/p>\n\n\n\n
<\/span>Wrapping up<\/span><\/h2>\n\n\n\n
As you can see, the secret to making an SEO-friendly web design is keeping the users\u2019 best interests in mind. See things from their perspective and use the right tools to fine-tune your creation, and your website\u2019s design will never end up in the list of your SEO problems.<\/p>\n\n\n\n\r\n
- Use H1-H4 headings<\/strong> and make them descriptive.<\/li>\n\n\n\n
- Enable browser caching.<\/strong> You can use a plugin for that, or you can set the expiration times yourself in the .htaccess file.<\/li>\n\n\n\n
- Filenames:<\/strong> they also need to be descriptive and include keywords.<\/li>\n\n\n\n
- ALT texts:<\/strong> they need to be descriptive and include keywords.<\/li>\n\n\n\n
- Make your images responsive.<\/strong><\/li>\n<\/ul>\n\n\n\n
- The rel=\u201dcanonical\u201d<\/i> attribute.<\/strong> You should avoid having pages with identical or even just too similar content, but if you can\u2019t, then put rel=\u201dcanonical\u201d<\/i> in the copycat pages\u2019 <link><\/i> tag like this: <link rel=”canonical” href=”https:\/\/website.com\/original-page” \/><\/i>.<\/li>\n\n\n\n
- Optimized page URLs.<\/strong> Avoid using random strings of letters and digits for your URLs. You want them to include keywords and be descriptive at a glance, like this: https:\/\/homepage.com\/category-name\/subcategory-name\/page-topic.<\/i><\/li>\n\n\n\n