Ten SEO aspects for web designers to master

Web design isn’t just about aesthetics; it’s about how a site is put together under the hood. Design choices can have a big impact – positive or negative – on a site’s SEO. In turn, this can affect the site’s performance over its entire lifetime.

If you’re a professional web designer (or if you’re creating your own site from scratch), it’s important to know a few SEO basics – a little knowledge goes a long way to building sites that reach their intended audience. Understanding these 10 aspects of SEO will help you design sites that work well, in addition to looking great.

1. Site structure

Every site should be designed with a clear, logical structure in mind. The homepage should state the big picture purpose of the site – its reason for existing – and details should be broken down into subpages.

For example, if you’re designing a website for recipes, the home page could lead to separate category pages for dinners, soups, and desserts. Each of those subpages could then lead to individual recipe subpages of their own.

It’s fine to have several ‘layers’ of subpages on your site, but don’t go too deep or Google might have trouble crawling all of them. In general, try to keep your site’s depth to three or four layers. Here’s a visual from Moz of what a well-structured site looks like:

A site’s homepage should lead to its subpages, which lead to their own subpages, and so on.

 

2. URL structure

URLs affect a site’s SEO, so it’s important to choose good ones right from the start. Here are a few best practices to follow for URLs:

  • Shorter is better, since shorter URLs are more memorable than longer ones
  • A URL should describe the content of the page as clearly as possible. Use plain English instead of abbreviations or strings of letters and numbers
  • For subpages, use hyphens to break up words for readability. For example, use https://example.com/build-a-birdhouse instead of https://example.com/buildabirdhouse.
  • Include keywords in URLs whenever it seems natural to do so (but avoid keyword stuffing).

3. Site navigation

In addition to being well-structured, your sites should be easy for visitors (and Google) to navigate. A site menu should be located prominently at the top of the page or along the sidebar. Every page on the site should be findable. Avoid creating ‘orphaned pages’ that aren’t linked from any other pages on the site. If visitors can’t find a page by following links, search engines won’t know that page exists either.

4. Mobile-friendly design

The age of mobile is here, and responsive web design isn’t optional anymore. For a site to provide good UX and rank well, it needs to adjust for comfortable viewing on a small screen. If you haven’t already, make responsive design your default design mode. You can easily test the mobile-friendliness of your sites using this simple tool from Google.

5. Site speed

Along with mobile-friendliness, site speed is another UX consideration that affects SEO. Google penalizes slow sites in their rankings, and visitors are less likely to stick around if a page takes a few seconds to load. Google’s PageSpeed Insights tool can tell you how fast your sites are and what you can adjust to make them faster.

6. Titles, headers and meta descriptions

Titles, headers and meta descriptions are important aspects of on-page SEO. Every page on a site should have unique content in its tag – in other words, don’t copy and paste the same title across your whole site. Each page’s title should include at least one keyword that’s relevant to the content on the page. Likewise, include keywords in the header tags on each page, especially the </p> <h1> tag.</p> <p>Meta descriptions – the blurbs that appear under links in SERPs – are a little different. They don’t directly affect SEO, but they do impact how many people click on your site in SERPs. They’re basically <a href="https://searchenginewatch.com/2018/04/06/5-ways-to-make-your-website-stand-out-in-the-serps/">free advertising space</a>, so put some thought into them, and include your main keywords to catch searchers’ eyes.</p> <p><a href="https://searchenginewatch.com/wp-content/uploads/sites/25/2018/05/meta-descriptions.jpg"><img class="aligncenter size-medium wp-image-78902" src="http://www.positionstrength.com/wp-content/uploads/2018/05/meta-descriptions-300x151.jpg" alt="meta descriptions in Google" width="300" height="151" srcset="http://www.positionstrength.com/wp-content/uploads/2018/05/meta-descriptions-300x151.jpg 300w, https://searchenginewatch.com/wp-content/uploads/sites/25/2018/05/meta-descriptions-768x385.jpg 768w, https://searchenginewatch.com/wp-content/uploads/sites/25/2018/05/meta-descriptions.jpg 839w" sizes="(max-width: 300px) 100vw, 300px"></a></p> <p style="text-align: center"><em>A couple examples of meta descriptions in Google.</em></p> <h2>7. Image optimization</h2> <p>Search engines cannot ‘read’ and understand images (yet), but you can tell them what your images are and what they refer to. Here are a few things you can do to <a href="https://searchenginewatch.com/2016/02/16/how-to-optimize-images-for-seo/">optimize your images for SEO</a>:</p> <ul> <li>Name your images accurately. For example, it’s better to call an image something like <em>png</em> than <em>img238.png</em></li> <li>Use alt tags with your images. This is a good idea for accessibility purposes, but also tells search engines what your images depict</li> <li>Don’t use bigger images than necessary as this can slow your site’s loading time.</li> </ul> <h2>8. Use of Flash</h2> <p>In general, steer clear of Flash unless it is absolutely essential. Search engines can’t see or process Flash content, so for SEO purposes it doesn’t exist. It’s especially important not to use Flash for important parts of your site, such as the navigation bar and the main text on your pages.</p> <h2>9. Structured data</h2> <p>The jury is still out on whether structured data, such as schema markup, gives sites a boost in search engines. However, it can help to bring more high-quality traffic by providing valuable information to human searchers. Over time, this traffic boost can improve your rankings.</p> <p><a href="https://searchenginewatch.com/wp-content/uploads/sites/25/2018/05/structured-data.jpg"><img class="aligncenter size-medium wp-image-78903" src="http://www.positionstrength.com/wp-content/uploads/2018/05/structured-data-300x58.jpg" alt="structured data in Google" width="300" height="58" srcset="http://www.positionstrength.com/wp-content/uploads/2018/05/structured-data-300x58.jpg 300w, https://searchenginewatch.com/wp-content/uploads/sites/25/2018/05/structured-data.jpg 752w" sizes="(max-width: 300px) 100vw, 300px"></a></p> <p style="text-align: center"><em>An example of how structured data shows up in Google’s results.</em></p> <h2>10. Site interface</h2> <p>Good SEO <a href="https://searchenginewatch.com/2018/04/05/technical-seo-vs-content-marketing-which-should-seos-focus-on/">isn’t just about technical details</a>; it’s also about helping people and providing great UX. While it’s important to pay attention to everything on this list as you work on a site, don’t let great design itself fall by the wayside – especially if you’re creating your own website with a <a href="http://www.beautifullife.info/web-design/15-best-free-website-builders/">free website builder</a>. An attractive, easy-to-use interface will encourage visitors to stay on your site and make it easier for them to find what they need. This helps to keep your bounce rate down. An attractive site is great for a brand’s image, too.</p> <h2>Wrapping up</h2> <p>SEO isn’t the niche specialty it used to be. Search engines are playing an increasingly important role in the future of the internet, and it’s important for people in other tech fields – such as web design – to be able to keep up. If you design your site with these crucial aspects of SEO in mind, the finished product will be both beautiful and functional.</p> <p>Want to add something to this list? Share your SEO tips for web designers in the comments below.</p> <p> </p> </div> <p class="wpematico_credit"><small>Powered by <a href="http://www.wpematico.com" target="_blank">WPeMatico</a></small></p> </div><div class="entry-tags clearfix"><i class="fa fa-tag"></i><ul><li><a href="http://www.positionstrength.com/tag/backlinks" rel="tag">Backlinks</a></li><li><a href="http://www.positionstrength.com/tag/bing" rel="tag">Bing</a></li><li><a href="http://www.positionstrength.com/tag/black-hat" rel="tag">Black Hat</a></li><li><a href="http://www.positionstrength.com/tag/business" rel="tag">Business</a></li><li><a href="http://www.positionstrength.com/tag/content" rel="tag">Content</a></li><li><a href="http://www.positionstrength.com/tag/digital" rel="tag">Digital</a></li><li><a href="http://www.positionstrength.com/tag/domain" rel="tag">Domain</a></li><li><a href="http://www.positionstrength.com/tag/domain-tools" rel="tag">Domain Tools</a></li><li><a href="http://www.positionstrength.com/tag/google" rel="tag">Google</a></li><li><a href="http://www.positionstrength.com/tag/google-business" rel="tag">Google Business</a></li><li><a href="http://www.positionstrength.com/tag/google-search" rel="tag">Google Search</a></li><li><a href="http://www.positionstrength.com/tag/keyword" rel="tag">Keyword</a></li><li><a href="http://www.positionstrength.com/tag/keywords" rel="tag">Keywords</a></li><li><a href="http://www.positionstrength.com/tag/link-building" rel="tag">Link Building</a></li><li><a href="http://www.positionstrength.com/tag/local-search" rel="tag">Local Search</a></li><li><a href="http://www.positionstrength.com/tag/marketing" rel="tag">Marketing</a></li><li><a href="http://www.positionstrength.com/tag/position-strength" rel="tag">Position Strength</a></li><li><a href="http://www.positionstrength.com/tag/rankings" rel="tag">Rankings</a></li><li><a href="http://www.positionstrength.com/tag/search" rel="tag">Search</a></li><li><a href="http://www.positionstrength.com/tag/search-engine" rel="tag">Search Engine</a></li><li><a href="http://www.positionstrength.com/tag/search-engine-optimization" rel="tag">Search Engine Optimization</a></li><li><a href="http://www.positionstrength.com/tag/sem" rel="tag">SEM</a></li><li><a href="http://www.positionstrength.com/tag/seo" rel="tag">SEO</a></li><li><a href="http://www.positionstrength.com/tag/seo-books" rel="tag">SEO Books</a></li></ul></div><div id="text-6" class="mh-widget mh-posts-2 widget_text"><h4 class="mh-widget-title"><span class="mh-widget-title-inner">Sponsored By..</span></h4> <div class="textwidget"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- PositionStrength --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3094468481848325" data-ad-slot="8961027555" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div></article><nav class="mh-post-nav mh-row clearfix" itemscope="itemscope" itemtype="http://schema.org/SiteNavigationElement"> <div class="mh-col-1-2 mh-post-nav-item mh-post-nav-prev"> <a href="http://www.positionstrength.com/is-google-analytics-compliant-with-gdpr" rel="prev"><img width="80" height="60" src="http://www.positionstrength.com/wp-content/uploads/2018/05/first-image-1024x270-80x60.png" class="attachment-mh-magazine-lite-small size-mh-magazine-lite-small wp-post-image" alt="" srcset="http://www.positionstrength.com/wp-content/uploads/2018/05/first-image-1024x270-80x60.png 80w, http://www.positionstrength.com/wp-content/uploads/2018/05/first-image-1024x270-326x245.png 326w" sizes="(max-width: 80px) 100vw, 80px" /><span>Previous</span><p>Is Google Analytics compliant with GDPR?</p></a></div> <div class="mh-col-1-2 mh-post-nav-item mh-post-nav-next"> <a href="http://www.positionstrength.com/helping-webmasters-and-content-html" rel="next"><img width="80" height="60" src="http://www.positionstrength.com/wp-content/uploads/2018/05/our-goal-helping-webmasters-and-content-creators-80x60.jpg" class="attachment-mh-magazine-lite-small size-mh-magazine-lite-small wp-post-image" alt="" srcset="http://www.positionstrength.com/wp-content/uploads/2018/05/our-goal-helping-webmasters-and-content-creators-80x60.jpg 80w, http://www.positionstrength.com/wp-content/uploads/2018/05/our-goal-helping-webmasters-and-content-creators-326x245.jpg 326w" sizes="(max-width: 80px) 100vw, 80px" /><span>Next</span><p>Our goal: helping webmasters and content creators</p></a></div> </nav> </div> <aside class="mh-widget-col-1 mh-sidebar" itemscope="itemscope" itemtype="http://schema.org/WPSideBar"><div id="text-13" class="mh-widget widget_text"><h4 class="mh-widget-title"><span class="mh-widget-title-inner">Spare Us Some Change?</span></h4> <div class="textwidget">Has our site been useful to you? Consider donating to us so that we can invest to make our content better.</div> </div> <style> #donation_buttons td{ border:medium none; background: inherit !important; } #donation_buttons table{ border:medium none; margin: auto; width: auto; } </style> <div class="page-sidebar widget" id="donation_buttons"><form action="https://www.paypal.com/cgi-bin/webscr" method="post" target="_blank" ><input type="hidden" name="business" value="talk@chudsey.com"><input type="hidden" name="bn" value="mbjtechnolabs_SP"><input type="hidden" name="cmd" value="_donations"><input type="hidden" name="item_name" value="Donation for PositionStrength.com"><input type="hidden" name="item_number" value="Thank you for helping us!"><input type="hidden" class="set_donation_button_amount" name="amount" value="10"><table ><tbody><tr><td><label for="Click 'Donate' To Send Us Donations">Click 'Donate' To Send Us Donations</label></td></tr></tbody></table><table ><tbody><tr><td><input style="margin-top:10px;" type="image" name="submit" border="0" src="https://www.paypal.com/en_US/i/btn/btn_donateCC_LG.gif" alt="PayPal - The safer, easier way to pay online"></td></tr></tbody></table><input type="hidden" name="currency_code" value="USD"><input type="hidden" name="notify_url" value="http://www.positionstrength.com/?Donation_Button&action=ipn_handler"><input type="hidden" name="return" value="http://www.positionstrength.com/thankyou"></form></div><div id="text-12" class="mh-widget widget_text"><h4 class="mh-widget-title"><span class="mh-widget-title-inner">Want To Learn More?</span></h4> <div class="textwidget"><center>We highly recommend the books below.<BR> <a href="http://www.positionstrength.com/search-engine-optimization-seo-shop"><font color="Red">Click here to see more<BR>recommended books</font> <BR> <SCRIPT charset="utf-8" type="text/javascript" src="http://ws-eu.amazon-adsystem.com/widgets/q?rt=tf_ssw&ServiceVersion=20070822&MarketPlace=GB&ID=V20070822%2FGB%2Fpositstren03-21%2F8003%2Ff648fc98-c6e8-4b70-b502-026e82fe13d9&Operation=GetScriptTemplate"> </SCRIPT> <NOSCRIPT><A rel="nofollow" HREF="http://ws-eu.amazon-adsystem.com/widgets/q?rt=tf_ssw&ServiceVersion=20070822&MarketPlace=GB&ID=V20070822%2FGB%2Fpositstren03-21%2F8003%2Ff648fc98-c6e8-4b70-b502-026e82fe13d9&Operation=NoScript">Amazon.co.uk Widgets</A></NOSCRIPT></a></center></div> </div><div id="text-2" class="mh-widget widget_text"><h4 class="mh-widget-title"><span class="mh-widget-title-inner">Sponsored by..</span></h4> <div class="textwidget">Revenue from Ads keep this site running, please take a moment to check out our sponsors<BR><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- PositionStrength --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3094468481848325" data-ad-slot="8961027555" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> <div id="recent-posts-2" class="mh-widget widget_recent_entries"> <h4 class="mh-widget-title"><span class="mh-widget-title-inner">Recent Articles</span></h4> <ul> <li> <a href="http://www.positionstrength.com/10053566-2">Do You Need Local Pages? – Whiteboard Friday</a> <span class="post-date">August 17, 2018</span> </li> <li> <a href="http://www.positionstrength.com/is-it-important-for-seo-to-rank-first-in-2018">Is it important for SEO to rank first in 2018?</a> <span class="post-date">August 17, 2018</span> </li> <li> <a href="http://www.positionstrength.com/key-takeaways-from-googles-latest-algorithm-update">Key takeaways from Google’s latest algorithm update</a> <span class="post-date">August 16, 2018</span> </li> <li> <a href="http://www.positionstrength.com/the-evolution-of-search-succeeding-in-todays-digital-ecosystem-part-1">The evolution of search: succeeding in today’s digital ecosystem – part 1</a> <span class="post-date">August 16, 2018</span> </li> <li> <a href="http://www.positionstrength.com/9jr_5lyxqym">Google Sheets formulae and tips for reporting</a> <span class="post-date">August 16, 2018</span> </li> <li> <a href="http://www.positionstrength.com/research-says-b2b-audiences-find-business-content-most-often-through-search">Research finds B2B audiences discover content through search</a> <span class="post-date">August 15, 2018</span> </li> <li> <a href="http://www.positionstrength.com/l1xkae404y8">27 Resources to Help You Create an Amazing SEO Strategy</a> <span class="post-date">August 15, 2018</span> </li> <li> <a href="http://www.positionstrength.com/wqawadvfwi0">Looking to the Future: What Jobs are Bots Replacing?</a> <span class="post-date">August 14, 2018</span> </li> <li> <a href="http://www.positionstrength.com/10026507-2">Ranking the 6 Most Accurate Keyword Research Tools</a> <span class="post-date">August 14, 2018</span> </li> <li> <a href="http://www.positionstrength.com/the-difference-between-on-site-blog-content-and-off-site-content">The difference between on-site blog content and off-site content</a> <span class="post-date">August 14, 2018</span> </li> </ul> </div><div id="text-11" class="mh-widget widget_text"><h4 class="mh-widget-title"><span class="mh-widget-title-inner">Sponsored By..</span></h4> <div class="textwidget"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- PositionStrength --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3094468481848325" data-ad-slot="8961027555" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div></aside></div> <footer class="mh-footer" itemscope="itemscope" itemtype="http://schema.org/WPFooter"> <div class="mh-container mh-container-inner mh-footer-widgets mh-row clearfix"> <div class="mh-col-1-4 mh-widget-col-1 mh-footer-area mh-footer-1"> <div id="text-8" class="mh-footer-widget widget_text"><h6 class="mh-widget-title mh-footer-widget-title"><span class="mh-widget-title-inner mh-footer-widget-title-inner">Use Position Strength</span></h6> <div class="textwidget">We believe, with our domain tools and our blog, that webmasters will be able to improve their rankings within the major search engines.<P> <P><BR> You are free to use our domain tools to help you boost your website's popularity.<P> <P><BR> <a href="http://www.PositionStrength.com">PositionStrength.com</a> is free to use in order to increase website traffic and to appear higher within search engines.</div> </div><div id="wp_statistics_widget-2" class="mh-footer-widget widget_wp_statistics_widget"><h6 class="mh-widget-title mh-footer-widget-title"><span class="mh-widget-title-inner mh-footer-widget-title-inner">PositionStrength.com Stats</span></h6><ul><li><label>Today's Visits: </label>1,890</li><li><label>Yesterday's Visits: </label>1,437</li><li><label>Last 7 Days Visits: </label>4,382</li><li><label>Last 30 Days Visits: </label>50,234</li><li><label>Last 365 Days Visits: </label>736,272</li><li><label>Total Visits: </label>834,707</li><li><label>Total Page Views: </label>31</li><li><label>Search Engine Referrals: </label>0</li><li><label>Total Posts: </label>769</li></ul></div><div id="archives-2" class="mh-footer-widget widget_archive"><h6 class="mh-widget-title mh-footer-widget-title"><span class="mh-widget-title-inner mh-footer-widget-title-inner">Monthly Archives</span></h6> <label class="screen-reader-text" for="archives-dropdown-2">Monthly Archives</label> <select id="archives-dropdown-2" name="archive-dropdown" onchange='document.location.href=this.options[this.selectedIndex].value;'> <option value="">Select Month</option> <option value='http://www.positionstrength.com/2018/08'> August 2018 </option> <option value='http://www.positionstrength.com/2018/07'> July 2018 </option> <option value='http://www.positionstrength.com/2018/06'> June 2018 </option> <option value='http://www.positionstrength.com/2018/05'> May 2018 </option> <option value='http://www.positionstrength.com/2018/04'> April 2018 </option> <option value='http://www.positionstrength.com/2018/03'> March 2018 </option> <option value='http://www.positionstrength.com/2018/02'> February 2018 </option> <option value='http://www.positionstrength.com/2018/01'> January 2018 </option> <option value='http://www.positionstrength.com/2017/12'> December 2017 </option> <option value='http://www.positionstrength.com/2017/11'> November 2017 </option> <option value='http://www.positionstrength.com/2017/10'> October 2017 </option> <option value='http://www.positionstrength.com/2017/09'> September 2017 </option> <option value='http://www.positionstrength.com/2017/08'> August 2017 </option> <option value='http://www.positionstrength.com/2017/07'> July 2017 </option> <option value='http://www.positionstrength.com/2017/06'> June 2017 </option> <option value='http://www.positionstrength.com/2017/05'> May 2017 </option> <option value='http://www.positionstrength.com/2017/04'> April 2017 </option> <option value='http://www.positionstrength.com/2017/03'> March 2017 </option> <option value='http://www.positionstrength.com/2017/02'> February 2017 </option> <option value='http://www.positionstrength.com/2017/01'> January 2017 </option> </select> </div> </div> <div class="mh-col-1-4 mh-widget-col-1 mh-footer-area mh-footer-2"> <div id="text-4" class="mh-footer-widget widget_text"><h6 class="mh-widget-title mh-footer-widget-title"><span class="mh-widget-title-inner mh-footer-widget-title-inner">We Are Sponsored By..</span></h6> <div class="textwidget"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- PositionStrength --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3094468481848325" data-ad-slot="8961027555" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="mh-col-1-4 mh-widget-col-1 mh-footer-area mh-footer-3"> <div id="text-7" class="mh-footer-widget widget_text"><h6 class="mh-widget-title mh-footer-widget-title"><span class="mh-widget-title-inner mh-footer-widget-title-inner">We Are Sponsored By..</span></h6> <div class="textwidget"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- PositionStrength --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3094468481848325" data-ad-slot="8961027555" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> <div class="mh-col-1-4 mh-widget-col-1 mh-footer-area mh-footer-4"> <div id="text-9" class="mh-footer-widget widget_text"><h6 class="mh-widget-title mh-footer-widget-title"><span class="mh-widget-title-inner mh-footer-widget-title-inner">We Are Sponsored By..</span></h6> <div class="textwidget"><script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script> <!-- PositionStrength --> <ins class="adsbygoogle" style="display:block" data-ad-client="ca-pub-3094468481848325" data-ad-slot="8961027555" data-ad-format="auto"></ins> <script> (adsbygoogle = window.adsbygoogle || []).push({}); </script></div> </div> </div> </div> </footer> <div class="mh-copyright-wrap"> <div class="mh-container mh-container-inner clearfix"> <B><font color="White">(C) Copyright 2017 <a href="http://www.positionstrength.com">PositionStrength.com</a><BR><a href="https://www.e-dmca.com" target="_blank">Copyright Management provided by E-dmca.com<BR><a href="https://www.business-broadband.net/business-web-design-marketing-seo" target="_blank">Web Design And Maintenance by Business Web Design</a></font> </div> </div> </div><!-- .mh-container-outer --> <script type='text/javascript' src='http://www.positionstrength.com/wp-includes/js/wp-embed.min.js?ver=4.9.8'></script> </body> </html>