In a world where nearly anyone can build a website; it has become increasingly important that web developers educate businesses on the pitfalls of do-it-yourself website builders and self-proclaimed experts for hire. Both options may yield a website that presents beautifully, but you mustn’t lose sight of the reason you are building a website in the first place, to capture business.
In prioritizing the intended utility of your website, you will quickly realize how important it is that your website is built properly so it can capture your slice of traffic from the 5.6 billion Google searches made every day. To do so, you will need to ensure your web developer is adhering to the best practices of Search Engine Optimization (SEO). If they are not, your website’s effectiveness will be severely blunted.
What is SEO?
Search engine optimization is the practice of optimizing your website to the standards set forth by search engines such as Google, Yahoo, and Bing. Over the years, these search engines have developed numerous standards to serve the highest quality search results to their users. The better your website meets these standards, the more likely search engines will want to share your website when a customer searches for anything relevant to your business.
What are these SEO standards and how do I meet them?
We must first establish that, in possessing 70% of all domestic search traffic, Google is the leader in setting the standards for search engine optimization. In other words, if you are optimizing for Google's standards you are likely to be well optimized for other search engines as well.
The SEO standards set forth by Google are primarily concerned with a website’s performance and quality of content. Google measures performance by how fast and efficiently a website loads while content quality is determined by several user behavior metrics. Each of these user behavior metrics is used to reflect how relevant or helpful your website’s content is for whatever search term or phrase your visitors are using.
To meet these standards, you have two options, study up, become a web developer, and implement best SEO practices yourself or employ the expertise of an experienced developer to do so for you.
A magician may never reveal his secrets, but we will.
At Point Blank, we know the value we provide far exceeds the prices we charge. In acknowledging this, we are not afraid to teach our customers how we practice the art of search engine optimization. We believe that in doing so, we will establish a trust seldomly present among businesses in our industry.
If you are interested in learning how we build great websites, read on. Otherwise, feel free to reach out so we can discuss how we can build you the website your business needs.
Website Development - Step 1: Define the content.
When developing a website, you must first define the content that you will be featuring on your website. You and your developer should adopt a customer-centric mindset to do this step well. To put it another way, pretend you are in the market for whatever product or service your business provides. Now ask yourself, what information would you like to know about these products or services? Also ask, what search terms or key phrases would you use when “Googling” for said product or service?
The answers to these two questions should dictate what you include on your website. The first question will yield a set of information that you’ll need to present in a well-organized fashion. The second question should result in a list of keywords that you will later weave into your website’s written content.
Tip: Certain keywords and search terms will be more obvious than others, so we recommend you use Google’s keyword planner to both validate popular keywords as well as identify less obvious but equally as valuable search terms.
Some website developers will recommend you write your website’s content with a list of keywords in hand so that you can implement them as you write. At Point Blank, we recommend the content be written first in order to preserve the effectiveness and quality of the content. Once the content is written in a clear fashion that best serves the customer, you can then identify opportunities to implement various keywords from your list. Doing so in this order will help protect against wordy and often redundant content.
Tip: Although it is important to include a good number of keywords on your website with decent frequency, you should never do so at the cost of content quality. If you do, Google will recognize this through less than desirable user behavior metrics such as low dwell times and high exit rates. Just remember that your website is here to serve your customers, not cheat the algorithm.
Website Development - Step 2: Design your website.
Before venturing onto step #2, you must do your homework regarding website performance. The platform you build your website on will greatly alter how fast and efficient your website can be. If you build your website using a poorly optimized builder, there is very little you can do to speed up load-times beyond the optimizations we cover in step #3.
Note: At Point Blank, we use the open-source Content Management System (CMS), WordPress, in tandem with a highly efficient page builder called Oxygen. Together, this software enables us to develop incredibly fast websites on a platform designed for ease of use and content creation.
Designing the Homepage
Once a platform has been selected for your website development, it is time to start designing. In step #1, you should have already established what information needs to be included on your website as it pertains to your business, products, and services. How you present this information is equally as important as the quality of the content itself. A good way to organize how your website should navigate is to design your homepage first.
The homepage should be designed in a manner that gives your visitors previews of the content you have identified in step #1. For example, the first section will often establish who you are and what you do. The second section might present the categories that house your various products and/or services. The third section can give one a glimpse into the business’s achievements and philosophy followed by a fourth section that presents some notable projects or customer testimonies.
Ultimately, the homepage should be designed to stand on its own as if it were the only page on your website. This does not mean that it should be overly wordy but rather that it should serve as the backbone for most, if not all, of the content you have defined in step #1.
On a multi-page website, each of the homepage sections will feature at least one “call-to-action” button. These buttons are designed to link users to other web pages that elaborate on the information previewed in that particular section or subsection. By referencing these “call-to-action” buttons, it will become apparent what web pages you will need to create next. If you follow the natural flow of this design process, you will eventually end up with several interconnected web pages, each designed to share pertinent information with your customers based on the previous “call-to-action” button that they clicked.
Tip: For each of these pages, you are going to want to ensure that they only contain one title that is marked as a “Header 1” or “H1”. This is the primary header and is one of the main items Google looks for when determining what the page is about. For this reason, be sure to include the most relevant keyword(s) for that page in your “Header 1” title. For all other titles, use a lesser marking like a “Header 2” or “3” tag.
The ultimate goal is to get your website visitors to perform a desired action such as making a product purchase or submitting an inquiry. Different visitors will require a different amount of information before they are ready to perform said action. That is why it is important to be intentional with the placement of your “call-to-action” buttons, ensuring each visitor can either “learn more” or perform the desired action at various points while navigating your website.
Adapting Web Page Designs for Different Screen Sizes
With it being no secret that Google is shifting towards a mobile-first SEO algorithm, it is very important that you design each web page to be adaptable for different display sizes. Most page builders feature at least two breakpoints, allowing you to tweak each web page design for tablet and mobile screens.
In Oxygen builder, there are four default breakpoints, 1120px and below, Less than 922px, Less than 768px, and less than 480px. Is it recommended that you adapt your design for each of the available display size ranges, as defined by the breakpoints, to ensure a consistent user experience across various devices.
Design adaptations may include header and text resizing, column restructuring, and div padding and margin adjustments. This process can take some trial and error but is a non-negatable step for all websites looking to perform with modern search engine algorithms.
Website Development - Step 3: Optimize your web pages.
Setting Web Page Search Appearances
With all your web pages designed and their content written, it is now time to put the finishing touches on your website, starting with the establishment of your search appearances.
If you were to do a Google search right now, you would notice that each search result consists of a clickable title followed by a short description. As web developers, we refer to these as the page title and meta description. Both a title and description need to be crafted for each web page to ensure that it has the best chance of getting clicks should it populate as a search result.
Tip: If you are developing your website on the WordPress platform, we recommend you use the free SEO plugin, Yoast. With this plugin installed, you will be able to establish the title and description for each web page with relative ease while also getting instant feedback on the optimal length for each entry.
When writing your SEO title, you will want to start by attempting to capture exactly what the web page is about. From there, you will want to implement your most important keywords into your title and description if they are not already there. A good exercise in gaining some inspiration for your page title and meta descriptions is to do a Google search as if you were trying to find the information that your web page aims to provide. When doing this search, be sure to scroll past the paid search results and only study the top organic ones. In adopting best practices from these organic search results, you should be able to establish a solid page title and meta description for each of your web pages.
Tip: There are numerous strategies on how to further hone your page title and meta descriptions to maximize the number of clicks you get. Deciding on which of these strategies is the best should be determined from an objective standpoint. For this reason, we recommend that you use the “A/B testing” methodology to determine which iteration of your page title and meta description is more effective at capturing visitors.
Optimizing Website Images
Once a page title and meta description have been established for each web page, you can begin to work on optimizing how fast your web pages load on both mobile and desktop devices. The first area of focus, and arguably the most influential optimization, is image resizing and compression. In this process, you will aim to define the optimal image width and height settings for each display size, downsize all images to match their largest display size on your website, and run each image through a compression software before reuploading.
To obtain an optimal image width and height for each display size, we recommend that you first set the image width to 100%. In doing so, the image will dynamically adapt to different display sizes without getting stretched or warped.
Tip: Having your images dynamically adapt to different display size is a tempting setting to leave but it is a big mistake when it comes to SEO scoring. Google recommends images have a clearly defined width and height to reduce something called, “Cumulative Layout Shift” or “(CLS)”. This is when a piece of content causes other content to shift over, up, or down after it has finished loading. Images are notorious for increasing CLS due to their larger file sizes. Having a defined width and height will allow the browser to allocate the appropriate space for that image before it fully loads thus reducing CLS.
With the images dynamically adapting to your display size, exit your page builder and view the page in your browser. Right-click on any image you wish to get widths and heights for and click “inspect” from the pop-up menu. In Chrome, a window should appear to the right with the image’s code highlighted. If you hover over that code, the image’s height and width will display as a tag above the displayed image.
To get the specific height and widths for different display sizes, drag the screen divider to alter the viewport size of your website. You will want to carefully drag the divider right before each breakpoint for for the different display size ranges. Breakpoints are usually defined in your page builder by display size width. In the Oxygen builder, there are four default breakpoints, 1120px and below, Less than 922px, Less than 768px, and less than 480px.
If you were using Oxygen, you would aim record 5 image dimensions total with the first one at 1121 pixels, the next at 923 pixels, 769 pixels, 481 pixels, and 380 pixels. Once you have captured the desired image dimensions, you would go into the your page builder and define each image's width and height under each breakpoint for the display size ranges.
Next, you will want to downsize all of your images to be slightly larger, if not the exact dimensions you have entered for your largest display size setting. You can easily resize your image by using an image processing software like Adobe Photoshop. Before reuploading your resized images your will also want to run them through an image compression software to reduce their file sizes even more.
Once all of your images are optimized, you can upload them to your website and replace every image with their new fully optimized copy.
Reducing Web Page Bloat (Written for WordPress Websites)
When building out your website you may find yourself incorporating several plugins to help you achieve different ends. A common plugin used by many WordPress developers would be a contact form plugin like Contact Form 7. Plugins like these are great but their code may not be needed on every single page of your website. This may present an opportunity to offload many unneeded CSS and JavaScript files from several of your web pages thus reducing their overall page size and load times.
A great tool to offload these files is the “Asset CleanUp: Page Speed Booster” plugin. Once installed, you will be able to open any web page and very easily see each code file organized by their respective plugin.
Knowing which files can and should be offloaded on a particular web page is going to have to be determined by the developer. In using the example discussed above, if a page does not feature a contact form at all, it would make sense to untoggled any code files that have to do with displaying contact forms on your website.
Tip: If you are using a page builder and are not relying on the default “Gutenberg” blocks for your web pages, you should unload the “wp-block-library” CSS style sheet site-wide by selecting the unload site-wide option for this code block. This helps reduce your page sizes and speed up their respective load times.
Website Caching & CDNs
A lot of what has been discussed here can easily be unpacked into a series of blog posts. This is especially true when discussing website caching and CDNs. To keep things abbreviated, all websites should be utilizing server-side caching and a CDN, also known as a content delivery network. This will ensure your web pages are efficiently packaged and stored on multiple servers so they can be loaded as fast as possible for multiple geographic regions.
Most WordPress-oriented website hosting providers will feature both server-side caching and CDN services as standard offerings with their hosting subscriptions. Note that this may not be the case with all hosting services so be sure to check with them before making any long-term commitments. If you do happen to select a hosting provider that does not package these features as standard options, you can establish both server-side caching and a CDN connection on your own.
Tip: A good CDN to use should you not have a default one offered by the hosting provider is Cloudflare.