Google SEO 101: Your Ultimate Web Design Strategy 2024!
By Sam H Mah, 10+ Years Search Engine Optimization & Website Design Experience
This is part 2 of a 5-part series.
Many web agencies, freelance website designers, friends, students, and others may not have the knowledge or a comprehensive strategy for your website design.
Throughout my 20+ years of experience, I've encountered a few bad ones who genuinely do not have your business's best interests at heart.
This chapter covers all the essentials for website success. It ensures that a site looks good, works well, and meets user needs.
This chapter covers all the essentials for website success. It ensures that a site looks good, works well, and meets user needs.
EFFECTIVE Web Design Strategy
Know Your Audience, do for them
-
You only need the essentials.
A successful website relies on simplicity and speed to ensure easy navigation and quick loading for all users, regardless of age or experience.It's important to remember that what you perceive may differ from your target audience's perspective.
-
You can invite six strangers to visit your website, ask them to perform specific tasks, and provide feedback.
Insights from their feedback will help you make informed decisions and enhance your customers' experience.
Recommend reading:
https://www.hotjar.com/usability-testing/questions/
-
Why Accessibility
-
Web accessibility is critical for people with disabilities to access online content.
Making your website accessible has many benefits. It can expand your audience, improve user experience, and avoid legal issues.
Click here to run your website with an accessibility tool.
-
-
Making your website accessible has many benefits. It can expand your audience, improve user experience, and avoid legal issues.
Click here to run your website with an accessibility tool.
-
Web Standards
Did you know that some web developers might leave unnecessary code on your website?
This careless can significantly affect your site's performance. Use W3C checker if you're unsure about your code's effectiveness.
-
Clarity Of Purpose
-
Defining business goals for a website is a critical step in the web development process.
-
For example, we are adding client testimonials with photos to the site. This builds confidence, trust and success.
-
Add Favicon
-
A favicon, a small 32x32 pixel icon associated with a website, holds significant importance.
-
You may get more clicks and attention in the search result if your favicon is eye-catching and visually appealing.
-
The Power Of Logo
-
A good logo is super necessary. Why?
Visitors will spend approximately 6.48 seconds on your logo - CXL
-
Website Architecture
-
When looking at a website for the first time, 38% of consumers look at a page’s layout or navigational links. (Top Design Firms, 2021)
-
When constructing a site hierarchy, you focus on information that is easy to follow. This order of the content structure produces a satisfactory user experience that both human search engines seek.
Think about it:
Your site hierarchy will form the basis of your navigation structure, making it an ideal location to incorporate secondary and long-tail keywords.
-
Think Personalization
-
Sales increase 19% on sites with personalized content!
If you can identify visitors’ needs and get their attention, sending a personalized and relevant message promptly is crucial. You need to give a personalization website software a try out.
-
Some personalization software can offer up to six different relevant messages. This kind of personalization is built using AI website design.
-
Use HTML 5
-
I saw a friend's company's e-commerce site, built with XHTML in 2022.
-
This surprised me because XHTML has not been popular for many years.
HTML5 tags help search engines understand page structure and content. This leads to better on-page SEO for the webpage.
-
Developing Mobile Responsiveness
-
67.81% of the total web visits are mobile, compared with 32.19% of desktop visits.
Responsive web design adapts to the user’s behavior and environment based on screen size, platform, and orientation.
-
Why does testing matter?
You should observe real visitors interacting with your mobile website to identify barriers that disrupt the user experience and find opportunities to enhance it.
This testing involves assessing elements like ease of navigation, clarity of content, and overall responsiveness.
Sometimes, responsive websites may have errors. It's recommended to test the website using MobiReady and Hubspot.
-
Use <h1> Headline Tag
-
Some website builders like WordPress, Wix, and GoDaddy have a missing H1 to their templates.
-
The H1 header holds the most ranking power, followed by the H2.
Each page should have one H1 and can have multiple H2s for section headers.
-
Growing Your Audience
-
Subheaders (h2-h6) offer a great opportunity to include related keywords, maintaining reader engagement.
-
The Power Of Color
-
39% of consumers appreciate color more than any other component of a website’s design. (Top Design Firms, 2021)
According to a study by Xerox Corporation and International Communications Research in 2003, they discovered:
- 92% Believe color presents an image of impressive quality
- 90% believe color can help attract new customers
- 83% believe that color makes them seem more successful
-
- Red: passion, power, love, danger, excitement
- Blue: calm, trust, competence, peace, logic, reliability
- Green: health, nature, abundance, prosperity
- Yellow: happiness, optimism, creativity, friendliness
- Orange: fun, freedom, warmth, comfort, playfulness
- Purple: luxury, mystery, sophistication, loyalty, creativity
- Pink: nurturing, gentleness, sincerity, warmth
- Brown: nature, security, protection, support
- Black: elegance, power, control, sophistication, depression
- White: purity, peace, clarity, cleanliness
-
Choosing Topography
-
You can use colors, shapes, and layout to evoke different emotions in your website designs. However, fonts are often overlooked but can have a huge impact on your audience's emotional response.
Helvetica is used by 19% of all websites, making it the most popular typeface in the world.
-
Go to Google Font site: https://fonts.google.com.
In this example, I will use Sofia. Add the following ‹link› tag to your page's head section:
Next, apply the following font property to the ‹p›, ‹body›, or ‹h1› tag.
p, h1, body { font: 18px/28px 'Sofia',Arial,sans-serif; }
If you’re using anything less than 16px, you’re losing lots of readers.
-
Good UX Design
-
88% of users are less likely to return after a bad user experience.
UI emphasizes a product's visual design, while UX prioritizes user interaction with a website.
Many people claim to be professional web designers/developers just because they can create a website using platforms like WordPress.
However, they often fail to mention that behind impressive websites, site visitors may face difficulties as they do not test the website properly.
-
The concept of user experience is not just a buzzword; it's a crucial aspect of website design. In fact, it is important to test the interface early in the design process, removing any distractions if necessary, to achieve a great website experience.
Throughout each stage, test it with friends and customers to avoid costly redesigns and support expenses.
Neglecting user experience could lead to a significant loss of potential customers. It's a crucial element we can't afford to ignore.
-
Add Search Functionality
-
Regardless of the method, providing a practical search function is an investment.
This method can pay off improved user satisfaction, engagement, and conversion rates.
-
Use Original Elements & Imagery
-
Reboot found that using original images on your website positively impacts on web rankings.
mage tags on websites can cause issues if the width and height of the image are not specified.
-
Some web developers fail to include these dimensions, resulting in unexpected shifts in the user experience, which can frustrate users.
By adding both height and width, you can improve Core Web Vitals.
-
What is Webp & Why It Matters
-
WebP is an advanced image format that offers better compression than other formats for web images. The average WebP file size is 25-34% smaller than the JPEG file size.
I used this compression hack to improve the site performance for my client.
-
Page Load Speed
-
40% of users leave a site if take more than three seconds to load - Forbes Advisor
Your website loads fast on your computer. However, this does not mean it will load faster for your target audience due to many factors.
Do not take the word of your web developer at face value.
I've worked with many experienced web developers who overlook this step. There are tools out there to help you out. Head over to Google PageSpeed Insight and GTmetrix | Website Performance Testing.
You should be aware that not all professionals are capable of creating a functional website that loads fast.
-
TTFB (Time To First Byte)
-
TTFB is a measurement of how long the browser has to wait before receiving its first byte of data from the server.
Why Is TTFB Important?
Google PageSpeed Insights recommends under 200 ms for server response time. A high TTFB can lead to lower rankings, even if you have stellar content.To check your website's Time To First Byte (TTFB), you can enter your URL in the Performance Test at KeyCDN.
-
Reduce HTTP Requests
-
Effective Techniques for Speeding Up Your Website!
CMS platforms such as WordPress can result in more than 100 HTTP requests, whereas a simple brochure website usually leads to approximately 40 requests.
Each request takes between 0.5 and 1-2 seconds on average. Each request may consist of a document, image, JavaScript, or CSS.
It is essential to consolidate all JavaScript and CSS files into one file each and remove unnecessary files from the website.
-
Before merging files, it's crucial to test them individually to ensure that the website still functions properly without them.
Reducing requests speeds up page loading, while combining scripts reduces overall file size.
-
Trust & Confidence
-
To convert your visitors into customer, consider implementing the following strategies:
- Make Your Team Members Known
According to a KoMarketing study, 52% of users consider the About Us page the first thing they want to see on a website. You can include store and staff photos to engage website visitors. - Make It Easy to Get In Touch
You can integrate messaging platforms like Facebook Chat, WhatsApp, or Skype onto your website to build trust and engage with inquiries. - Display Video Testimonials, And Certifications
Websites can build trust by displaying industry partners, relevant accreditations, certifications, and customers’ feedback. If your organization has been featured on a reputable third-party website, take advantage of opportunities to showcase this.
- Make Your Team Members Known
-
 Optimal Line Length
-
One of the most common mistakes that beginner web designers make is using long line lengths while designing for the web.
This mistake is still prevalent and can have a negative impact on the readers' reading experience.
Ideally, the sweet spot for line length should be between 50-75 characters which translates to 10-19 words.
Source:If the line length exceeds this range, it can cause eye fatigue and lead to a quick loss of readers' interest.
-
place content strategically
-
Users only read 20 to 28% of a webpage.
The human eye is naturally drawn to specific points of interest, including how people read a web page. In an article, Alex Bigman discusses the two main reading patterns for cultures that read from left to right.
01. The F-Pattern
Researchers found that people tend to scan websites in a "F" shape. Starting at the top, they read horizontally. This is the top line of the "F." Next, they would read a shorter horizontal section.
Having scanned the top two sections, readers scanned in a vertical line moving down the page, ending the stem. CNN and The New York Times use the F Pattern.
02. The Z-Pattern
To effectively grab your visitors’ attention:
- Place essential points in the first two paragraphs.
- Utilize plenty of headings and subheadings.
- Make important content stand out with borders or alternate formatting.
- Bold the most important words and phrases.
- Use plenty of bulleted and numbered lists.
- Remove unnecessary content.
- Include other forms of content such as pictures and videos.
Ultimately, It is your responsibility, along with your web designer, to organize your information, format the webpages in an engaging way, and create content that your visitors find appealing.
-
Pros & Cons of Long Page
-
A homepage with a lot of content can skyrocket your conversion rate by 30%. (CrazyEgg, 2015)
-
Some users may not prefer a lengthy homepage as it can slow down the process of finding the desired information.
However, having a longer homepage can provide significant benefits to your website's SEO
-
Search engines often require a significant amount of content to comprehend the nature of your page’s topic.
To get a better idea of how much content you should aim for on your homepage, you can analyze the top five websites in your industry.
-
User-Friendly Forms
-
I've noticed that not every form is built with UX practices in mind.
Over 65% of website users wouldn't fill out a form if it asked for too much personal information.
Consider using a short form instead.
-
3 Most Overlooked Pages
-
Most business owners don't have these pages to their website!
FAQ
A FAQ section streamlines customer support by providing quick access to common answers, reducing direct inquiries, and enhancing user experience. It demonstrates transparency, addresses concerns, fosters trust, and improves SEO by incorporating relevant keywords.
-
Privacy
High-quality links can boost your trust with Google, while poor-quality links can hurt it. Trust is important for attracting visitors, and having a privacy policy helps.Version B, with the privacy policy statement and links under the button, convinced 19.1% more visitors to submit the form.
Glossary
By including all relevant terms related to your business on your website, you can improve your potential to rank for various search terms, especially for longer-tail phrases and less formal terms.Create a central hub for industry-specific jargon definitions and descriptions to boost your site's Experience, Expertise, Authority, and Trustworthiness ranking with the latest Google Update.
-
Contact Page: An Example
-
Many website designers treat the Contact Us page near the bottom of their priority list regarding copywriting and design. In 2024, however, a Contact Us page is one of the most valuable pages on your site.
According to Google's Quality Document, it favors sites that provide "ample contact information."
To create a perfect About Us, you need to add these relevant details: 👇
-
Throw these elements to your contact us page:
- Full Address
- Phone Numbers/Fax/Email
- Employee's Name and Their Contact Info
- Contact Form
- QR Code
- Google Map - Get directions to SHM DESIGN Website Design
- Direction – Add routes, panoramic photos, and GPS
- Full Address
-
About Us Page: An Example
-
The "About Us" and "Contact Us" pages are not important to Google or required, but they are crucial for your site visitors. They are essential for increasing conversions and earning their trust and confidence.
-
52% of respondents said the first thing they want to see when they land on a website is a company’s ‘About Us’ page.
-
To create a perfect About Us, you need to add these relevant details:
- Share the origin story and personal motivations.
- Highlight how products or services address specific needs.
- Explain the unique business model or product creation process.
- Feature images of founders or key team members.
- Use testimonials, videos, blog links, and calls to action to guide readers towards desired actions.
-
404 Page: Tip & Example
-
The purpose of 404 pages is to engage users and prevent them from leaving a website when encountering a broken link.
-
Not sure how to create a 404 SEO friendly page? 👇
-
You can quickly deploy a 404-page design for a more personalized, helpful experience for your visitors.
Without a customized 404 error page, you might end up losing approximately 23% of your website visitors. My former employee has a good example of 404:
-
Schema Markup & Why It's Important
-
Schema markup, also known as structured data, consists of a set of tags added to HTML code to provide search engines with specific information about a webpage's content.
-
These tags help search engines understand the context and meaning of the content, which can lead to more informative and visually appealing search results, often referred to as featured snippets or rich results.
- 72.6% of 1st page Google results use schema - Backlinko
- FAQ rich results have 87% CTR - Milestone/SEJ
- Rich results get 58% of clicks vs. non-rich - Milestone/SEJ
- Schema App found pages with schema have 40% higher CTR than without.
The 4 Types of Featured Snippets
Paragraphs
This featured snippet provides a direct answer to the user’s question in a text format. Often, the snippet displays a brief excerpt from the webpage that best addresses the user’s question above the search result. There are two sub-formats of this type of snippet: text and text with imageWhen users search for a question or a short and precise explanation or definition, Google often shows a paragraph snippet. Queries that start with "what is," "who is," "why is," and "how to" are common triggers for Paragraphs snippets.
Lists
This feature is best used for displaying instructions, product arrays, or rankings, in either ordered or unordered lists.Google is likely to show a featured list snippet when someone searches for phrases like "steps to," "ways to," "types of," "best of," etc. You can enhance the listing with List schema markups.
Table
This featured snippet is often used to compare two different entities, such as revenue, numbers, percent changes, and rankings.Using table schema markups can improve search engine visibility and comprehension.
Video
Google and other search engines highlight specific video content that answers user queries with video snippets. This snippet provides instructional video content for "how-to" queries, DIY tasks, and product reviews.Remember to apply the schema markups for your video to enhance its searchability and visibility.
Many voice assistants, like Google Assistant and Amazon Alexa, rely on featured snippet content to provide voice search results.
Whether you are a local business or a corporation, you can add one or all of these Schema properties to your site.- Organization
- Job Posting
- Blog Post
- Navigation
- Breadcrumbs
- Product and Offer
- Local Business
- Person
- Recipe
- Q&A
- Events
- How-to
- Sitelink search box
- Review Snippet
- Vacation rental
-
Footer Links
-
The footer of your website presents a valuable opportunity to engage with your users just before they leave.
-
You can encourage them to subscribe to your newsletter, contact you or follow you on social media. Additionally, you may also include specific anchor links to other pages.
-
Browser Testing
-
Different browsers, different operating systems!
Your website may look different on different browsers and devices due to factors like screen resolution and color settings.
-
It's impossible to make a website display uniformly on all configurations, so focus on ensuring it functions correctly on as many as possible.
Users should be able to interact with your site in the same way, regardless of the browser they use.
-
UX Testing in Marketing
-
Only 55% of businesses conduct testing.
Almost half of all businesses don't test their UX. Take advantage of this.
-
It is common for website designers and developers to overlook testing their websites on older monitors. Recently, I viewed several professional websites using a five-year-old computer monitor and had a terrible reading experience.
The issue was caused by the light font color used on these websites.
It's essential to keep in mind that your customers may not have the latest monitor technology, and it's unlikely they will change their monitor every two years.
Therefore, it's important to avoid using light font colors on your website. While it may look crisp and sharp on modern monitors, it can make the text difficult to read for older monitors and older individuals.
-
Crawlability
-
Oh, good. Google has discovered your pages.
Sometimes, the website developer left the "no index" code, hindering search engine visibility. You don't want that.
-
<meta id="MetaRobots" name="robots" content="no index, nofollow" />
User-agent: *
Disallow: /The above codes should be OFF your website.
-
Indexing Site
-
The real truth.
Google never index pages with problems.You need to manually fix the technical issue and click the "Validate Fix" button to notify Google that it has been resolved.
-
Regular Content Updates
-
Updating your website regularly can boost organic traffic. It's a best practice for enhancing your website's visibility and performance.
-
Performance Monitoring
-
You can set up Google Search Console, Google Analytics, and Bing Webmaster Tool. These tools track your website's SEO performance.
-
In Google Search Console, some important metrics to check include:
Click-through rate (CTR) the percentage of people who click on your website's search result when it appears in Google search Impressions the number of times your website's search result appeared in Google search Average position the average ranking of your website's search result in Google search Pages crawled per day the number of pages on your website that Google crawls each day Crawl errors any errors that Google encountered while crawling your website In Google Analytics, some important metrics to check include:
Sessions the number of visits to your website Bounce rate the percentage of visitors who leave your website after viewing only one page Pageviews the total number of pages viewed by visitors on your website Average session duration the average amount of time visitors spend on your website Goal conversion rate the percentage of visitors who complete a specific action on your website (such as filling out a form or making a purchase)
Conclusion
Google's ranking algorithm heavily considers page performance. User experience directly impacts search rankings. Failure to meet Core Web Vitals guidelines can lead to penalties from Google.
During web development, prioritize SEO success. Do this by connecting your Content Management System with tools like Google Lighthouse. This ensures best practices are followed. It also catches issues early, including image sizes.
Integrating SEO-friendly design principles is essential for effective web development strategies. Optimizing for mobile devices is also essential.
Part 3 of a 5-part series: 26 Best On-Page SEO Tactics