10 Web Design Tips for Your Website SEO

Web Design For SEO – So far, your web design may always be 100% oriented towards visitor convenience, beauty and usability. Yes, that’s not wrong at all, because basically designing a website is to create ease, interest and effectiveness in accessing the website later.

However, if the site you are designing is the type of site that will really need search engines to source visitors, it is highly recommended to add a fourth orientation to your web design, namely search engine orientation. Web design can be used to improve SEO through certain tricks at the time of coding so as to make it SEO Friendly. This is commonly known as onpage SEO (SEO on your web pages).

Also Read: 7 Web Design Tips For Visitor Convenience (UX)

Well, here are 10 tips to make your web design search engine friendly so that it can optimize the SERP of your website.

Web Design for SEO
Image by Tutaka Tsutano

  1. Reduce the number of objects loaded
    The more objects that are loaded, the heavier and longer the page will be when accessed. And the longer a website takes to load, the worse its reputation in search engines will be. Know that currently site speed is an important factor for SEO optimization. In fact, Google itself has even created its own sub-web to discuss and analyze site speed: Google Pagespeed Insight.

So, the first step is to minimize the objects that are loaded. However, that does not mean you will lose important elements for your web design. The essence of point number 1 is “Reduce code without compromising important elements of your design”.

  1. Make sure the code is “Clean” and Structured
    Code that is “Clean” aka “Clean” means that the code on the web page consists only of HTML code. Javascript and CSS code is completely called from the outside, aka external. This will be very good and make it easier for crawler bots from search engines to crawl your site because crawlers only “care” with HTML code, not with javascript and CSS code.

While the structured code means that the existing HTML tags are used according to their functions and w3c standards. Examples of practice for example in the use of Heading Tags (h1, h2, h3, h4, h5, h6) in accordance with the priority of the title. H1 for site name, H2 for post title, H3 for widget title, and so on. Everything is prioritized according to its function.

  1. Optimize the use of CSS
    CSS optimization aims to effectively use it on web pages so as to produce smaller CSS files. The practices are as follows:

Get rid of unnecessary code and avoid looping CSS. Use the same class on elements with the same style. In this case the use of the framework can be very helpful, if after completion of the code that is not used in the framework is removed.
Unites CSS in only 1 file and avoids using imports.
Compress or minify CSS code.
Calls CSS code on the head and /head tags.
Avoid using CSS inline with attributes in html tags or with style tags.

  1. Optimize the use of javascript
    The principle is the same as point 3: Effective use. However, in a different way. The practices are as follows:

Get rid of unnecessary scripts and avoid loops. In this case you should avoid using jquery plugins for certain functions. It would be better if you create the function using only jquery lib, and even better if it’s pure javascript.
Avoid using javascript directly on HTML files in script tags
Place all javascript calls at the very bottom of the code structure, at the end of the body tag before /body. Or it can stay in the head tag, but by using the async attribute. This tag serves to delay the rendering or loading of the script when the page is accessed. Unfortunately, the use of this async tag sometimes causes certain scripts to malfunction.
Megkompress or minify javascript.

  1. Optimize image usage
    Still the same as points 3 and 4, only the practice is different:

If the image displayed on the web is 200×200, then the actual size of the image must be 200×200 as well. Manipulation of image size using CSS code, for example displaying a 200×200 image on the web, when the actual size is 400×400 should be avoided.
Use the “alt” attribute to describe the image in text.
Compress images before use on the web, to make them lighter.
Also read: How to Optimize Website Design With Large Portrait Photos

  1. Compress code
    Compressing code here specifically means compressing HTML code or other client-side code that directly builds a web page. This compression is the same as in points number 3 and 4. This is done to save source or shrink web page files so that they can load faster. Compressed code should be code that is final, meaning it will not be edited again. Before compressing, my advice is to backup first so that when there is an edit it will be easy.

To compress HTML, CSS and Javascript code, you can visit this website: https://htmlcompressor.com/compressor/.

  1. Place the code for the content first
    Point 7 may indeed have nothing to do with design. But you need to do this if you want to design your website SEO friendly. As much as possible place the code or html tag that contains the content first than other website elements. An example is placing it after the code for the header section. The reason is because search engine crawlers prioritize HTML tags at the top. Because content is the most important part of a website, it is appropriate for the code for content to be placed first than other elements.

However, please note that this does not mean that this limits the art of your web design. About the position of the content on the display, that’s the job of CSS. Even if your content is displayed at the bottom, it’s okay for crawlers. But, problematic for the user experience.

  1. Complete the web with good navigation
    Yep, we can’t deny that good navigation is very important for a website. This point has a value of 2 times. This means that it is good for the user experience, good for SEO too.

Navigation
Image by Martin Fisch

The following are the parts of the navigation that need to be in your web design:

Main Menu: Contains links to important pages on your web
Search Column: To make it easier for users to find content on your site
Breadcrumbs: For information so that the user knows which part of the site he is currently on
Related articles: As a recommendation for users to read other related articles
Post list widget, be it popular posts or random posts
The five elements above are clearly very useful for the user experience. However, on the other hand it is also very useful for SEO: Internal Linking, One of the most important things in onpage SEO.

  1. Optimize the page on the responsive version
    Almost all major sites today, have a responsive design. However, there are 2 ways web designers make responsive web designs. The first is to use @media queries -and the like- in CSS so that all devices used by the user will only access one page that looks different on each device. Second, by creating a different page for each device. That is, when a user accesses the website from an HP device, for example, it will be loaded or redirected to the HP version page. Likewise if the user uses a Tablet or Laptop, all of them have their own versions.

Responsive Web Design

Well, of the two ways above, the best is the second way. The reason is that all data that is loaded, works and is displayed. Not like in the first way. In the first method, there is often “hiding” or “disappearance” of the data on the client side, even though the data is loaded from the server. This “hide” mainly occurs when the page is accessed from a small device such as a mobile phone. Often the functions that exist in the desktop version are not activated when accessed via HP because they will not match, even though the function is loaded from the server. Now in the second way, this “concealment” can be removed.

  1. User Experience = SEO
    User experience and SEO are different. But at this point I emphasize that designing a website that is oriented towards user experience without violating the rules of good SEO, can be an amplifier for SEO.
    Here’s the logic:

Visitors feel comfortable with your website because the content is good, the navigation is good, the design is also pleasing to the eye >>> Feel at home accessing your site, read other articles through “related articles” even though they didn’t intend to >>> Reduce Bounce Rate, Increase pageviews pervisit which is very good for SEO.

Also read: List of Websites for User Experience (UX) Learning

That’s it..

Bonus Tips +

  1. Use third-party Plugins, or Templates
    Yep, these points are just a bonus. Intended for those of you who don’t want to bother fulfilling the 10 points above, but still want a good web design for SEO. There is nothing wrong with using free or paid plugins or templates on your website. Especially for self-hosted wordpress blogs, you can use plugins like WordPress SEO by Yoast or Autoptimize for code compression. As for the optimized template, you can find it here.