Business Website Archives

The Visual Hierarch Principle: How to Build Effective Web Design

You, me, and billions of other people rely on the Internet as the first source of information. Despite the sheer number of people who go online every day, websites are still in fierce competition for traffic.

Website owners try to remain at the top by producing quality content, developing cut-edge marketing strategies, and of course, dishing out a stunning website.

Content may still be king but no one wants to read anything on a poorly designed website.

As business owners gunning for online presence, keep in mind that the overall visual appeal of a website also contributes to capturing a reader’s attention, and should not be taken lightly.

If you want your website wants to draw traffic, you need to think about the flow of information on your site. This means thinking about the layout, graphics, and structure of your site.

It’s your job to make sure your readers can ease into the information.

Think about it as designing a river – yes, we know, no one designs geographical items, but bear with us. If you design a river with a rapid current, rocks and other obstacles, no one is going to dare to dive in. A calm river, with easy-going currents and clearly visible banks, is far less scary.

The same thing applies to your website: if you stuff it full of information, clutter it with images, and force the reader to wade through piles of data, they won’t stick around for very long.

Smart and efficient web design is more relevant now that the universal display or resolution no longer exists. Mobile phones and computers now come in a myriad of screen sizes, making it important to optimize your website to look good and function well on any device, i.e. to be responsive.

For example, research shows that half of online shoppers expect a website to load in less than 3 seconds. In fact, 19% will close a website if it takes longer than 2-3 seconds to load, and 8% will leave after 1 second.

Visual Hierarchy

“Designers can create normalcy out of chaos; they can clearly communicate ideas through the organizing and manipulating of words and pictures.”

—Jeffery Veen, The Art and Science of Web Design

Visual hierarchy, one of the most important principles behind good web design, is the difference between a site that strategically influences user flow and decisions and a site that just “looks nice.” It refers to the order in which the human eye perceives what it sees.

In basic terms, visual hierarchy describes which elements capture your user’s attention and draw their eyes most. But there’s no right way to build a concrete hierarchy, and competitive designers must have perfectly unique methods – or invent new ones – to stay on top of the game.

Visual presentation of a web interface is essential for:

Informing Users
Communicating Content Relationships
Creating Emotional Impact

The end goal of your UI design should be to answer the following questions :

What is this? (Usefulness)
How do I use it? (Usability)
Why should I care? (Desirability)

Let’s describe the most basic elements, the essential building blocks, necessary to support simple or complex hierarchies.

1. Scanning Patterns: The Predictability of the Human Eye

There are two predominant reading patterns for cultures that read left to right.

F-Pattern

Typically for text-heavy websites like blogs, the F-Pattern is prevalent amongst readers.

First scanning a vertical line down the left side of the text looking for keywords or points of interest in a paragraph’s initial sentences. When the reader finds something they like, they begin reading normally, forming horizontal lines. The end result is something that looks like the letters F or E. As shown, readers on CNN and NY Times both use the F-Pattern to read the content.

Jakob Nielsen of The Nielsen Norman Group conducted a readability study based on 232 users scanning thousands of websites and elaborates on the practical implications of the F-Pattern:

Users will rarely read every word of your text.
The first two paragraphs are the most important and should contain your hook
Start paragraphs, subheads, and bullet points with enticing keywords.

F-Pattern Scanning Pattern — Source : Understanding The F-Layout

You can see in the left image that the most important content can be seen in a few seconds, with more detailed content (and a Call-To-Action or CTA) presented immediately below for quick scanning.

The pattern can be very helpful for sites that want to embed advertising or CTAs in a way that doesn’t overwhelm the content.

Just remember that content is always king, and the sidebar exists to get users involved on a deeper level.

As with all patterns, the F-Pattern is a guideline, rather than a template. It can begin to feel boring after the top rows of the “F.” As you’ll see below, Kickstarter adds in some widgets (laid out horizontally) to keep the design visually interesting beyond the first 1000 pixels.

Source: Understanding The F Layout

Z-Pattern

Z-Pattern scanning occurs on pages that are not focused on the text. If you were to access a Z-Pattern website, your eyes will wander horizontally over the top before sliding down at an angle.

It’s possible that your attention is drawn to the menu bar at first or simply because you’re used to reading from left-to-right. When you reach the end, your attention shifts down and left (again based on reading habit), and repeat a horizontal search on the lower part of the page.

Source: Understanding The Z Layout

The Z-Pattern is applicable to almost any web interface since it addresses the core website requirements such as hierarchy, branding, and Calls-To-Action. The Z-Pattern is perfect for interfaces where simplicity is a priority and the CTA is the main takeaway.

Forcing a Z-pattern for a website with complex content may not work as well as the F-pattern, but a Z-pattern can help bring a sense of order to simpler layouts (and increase conversion rates). Here are a few best practices to keep in mind based on the image above:

Background: Separate the background to keep the user’s sight within your framework
Point #1: This is a prime location for your logo
Point #2: Adding a colourful secondary CTA can help guide users along the Z-pattern
Center of the page: A featured image slider in the centre of the page will separate the top and bottom sections and guide the eyes along the Z path.
Point #3: Adding icons that start here and move along the bottom axis can guide the users to the final CTA at point #4.
Point #4: This is the finish line and an ideal place for your primary CTA.

Predicting where the user’s eye will go can be a huge advantage. Before arranging the elements on your page, prioritize the most over the least important ones. Once you know what you want your users to see, it’s just a simple matter of placing them in the pattern’s “hot spots” for the right interactions.

2. Size

Bigger is more eye-catching, but it’s not always better. The simplest way to explain it is that your most important element should be the one that is standing out, but it’s when we get into the details that it becomes a little more complicated. The user exerts less effort to click bigger items. This holds especially true for calls-to-action, where you want to leave no question as to where the user should go. Of course, that’s not to say that it’s as simple as making your “DOWNLOAD NOW” call-to-action 10x larger for more conversions. Subtlety and harmony between elements is the key.

Source: Huge Inc.

All the principles of size are visible in this screenshot from Huge Inc. The first thing you notice is the biggest, the stylistic H that serves as their logo. Next is “Nike Making,” whose large typeface and bold style create immediate weight.

Next is the line of text directly beneath it, written in a smaller font size so as not to steal attention from the key visuals. If your eyes are still interested enough to wander, they’ll eventually notice the tiny logo and hamburger menu in the corners, or the navigation bar to the right.

The hierarchy makes sense here. First, the large colourful H catches your eye. Soon afterwards, you’ll seek context for the unorthodox visual, which is immediately accessible with the hyperlinked “Nike Making” headline and secondary sentence.

Visual hierarchy lays out the user path, while size hierarchy simplifies interaction by making the entire chunk of copy clickable and in close proximity to its related visual.

Without even thinking about it, you end up clicking exactly where the designer wants you to go. It goes without saying that balance and moderation are key. The design should not

be overpowered with an overly large focal point or
compromise user usability with secondary content that ends up being too small.

3. Colour

We’re visually drawn to colour, especially when it’s used strategically to highlight important information or imagery. A bright splash of a colour like red or yellow, for example, is hard to miss — whether it’s on a traffic sign on the side of the road, or a flyer hanging in your local coffee shop.

Clever use of colour can be one of the most visually interesting ways to differentiate elements on a page and draw attention where you want it.

Your brain’s obsession with contrast will cause your eyes to focus on objects that stand out due simply to their difference in colour in relation to the surrounding objects. Consider the following example:

Source: Fitbit

Fitbit’s use of colour in their Z-pattern interface above is especially clever. The bright use of magenta immediately places the calls to action near the top of the visual hierarchy, but also matches the colour of the “Get Active” button — subconsciously signalling that the two concepts are related. Similar shades of blue are also used in the fitness goals and product sections, which cleverly creates an association between the two (and draws clicks to the most valuable parts of the interface).

4. Layout

One of the most straightforward ways to control your website’s visual hierarchy is through its interface. By placing a focus element front and centre, you can then follow up the visual hierarchy with the use of rows and columns for a more organized and structured layout.

This can help keep the chaos at bay and also leaves some space at the end for CTAs or other chosen content. It can be a tedious and fiddly balance, but crucial if you want to avoid overcrowding your website with too many elements.

The visual hierarchy can flatten and very little will stand out in the design.

Source: Adoratorio

In web design, these are, amongst others, the corners and borders of the screen. As “throwing” the cursor to the sides requires less mouse control than a fixed point in the middle. While you’ll probably focus primarily on the centre of the screen (given its size and contrasting black lines), the stagnant clickable links remain easily accessible in the corner and at the bottom.

Scrolling up and down changes what’s displayed in the middle. However, the site logo, hamburger menu, contact information, and social media links stay firmly in their prime locations.

Of course, your layout certainly affects the visual hierarchy, not to mention usability. The Gestalt principles (described below) dictate that objects in a line create momentum to propel eyesight forward, even dominating the effects of colour. Rows and columns, then, aside from supporting an organized structure to keep the chaos at bay, also create some prime real estate when they end – perfect for CTAs or other preferred content.

Source: Huncwot

As you can see, Huncwot keeps the options for its homepage organized in a straight horizontal line (with an animation behind whichever selection you’re hovering over). It’s a tricky balance, but mandatory for every single website. Otherwise, if you crowd your website with too many interface elements, your visual hierarchy flattens, and nothing stands out for the user.

5. Spacing

One of the most important yet often ignored design principles is the use of White or blank space and spacing.

Failing to allow some amount of blank space can leave your design looking overcrowded and confusing, ultimately drowning viewers with too much information.

White space is your number one go-to for separating and organizing the elements in your design. No one wants to spend time making sense of a design. What you want is a site that is easy on the eyes, orderly, and well-balanced.

Always plan for unused space. It’s essential for things like:

Giving the viewer’s eyes a place to rest and a path to travel through the design
Separating your layout into sections (the flip side of this is proximity – reducing space to place related items close together – also an aspect of good spacing)
Isolating focal points

David Salgado and Mariana Perfeito’s editorial design does both of the above, leaving plenty of white space between and around each section of the layout, while grouping related items together. The result is a clean and balanced design.

6. Fonts

When typesetting, there are other aspects to take into consideration other than just Typographic hierarchy. Different aspects of the fonts can really make or break the design such as the category used, decorative, script, sans-serif, serif or script or even the use of uppercase, lowercase, bold or italic, the width of the strokes, etc.

Notice how typeface affects the hierarchy order of the words in the web design below for The Tea Factory. “The perfect teas to keep you warm” is the focal point, but differences in type weight and italicization, in addition to word placement, produce a more dynamic, less linear, reading experience. “See our selection,” the call to action, is more strongly emphasized than the text above it due to sizing and spacing.

Source: Tea Factory

7. Style & Texture

Another way of drawing attention is to give content ample room to breathe. A site that looks crowded will render your visitors lost and later ask themselves “what am I supposed to do here?” Ultimately, they click away, absorbing no information about your brand at all.

If there is substantial negative space left around a button, or the lines in a text block are widely tracked, these elements will be more readily visible to readers.

Not everyone will know where to click next, as a website owner, it is your job to guide them to the behaviour you desire.

As you see in the image below (part of DrawtoClick‘s website), spacing can be an elegant alternative or addition to the use of size. Here, the selling point, “Notre agence vous accompagne …”, is in a very small font, but it is surrounded by an excess of white space that signals its importance. Below, the phrases “Le Compendre,” “Le Réaliser” and “Le Partager” receive extra emphasis by being boxed off from surrounding space.

Source: Draw to Click

When people talk about “texture” with respect to visual hierarchy, they are not referring to pictorial texture effects. Rather, this kind of “texture” refers to the overall arrangement or pattern of space, text and other detail on a page.

This example by Bright Pink illustrates the concept nicely:

In the first image, the word “Sports” is higher in the hierarchy than “badminton” due to being higher, bigger and bolder. In the second image, the two words are about equivalent. Thanks to a black rectangle that highlights “badminton” and sets it into its own space.

In the third image, a background scribble interrupts the space of “Sports” but not “badminton.” Consequently results in a reversal where “badminton” is highest in the hierarchy. Such a progression is difficult to predict, so designers often chalk it up to a holistic sense of “texture.”

Source: Posters “Bright Pink” via Smashing Magazine

9. Composition

Using some of the techniques in the article can help guide visitors to your website through your design and layout. Think of it as a first impression.

At first glance, does your website leave a pleasant impression? Or will it scare visitors away because elements are all over the place?

Overall, most designs will greatly benefit from putting in place an overall structure, more commonly known as the composition, which is made up of Implied Movement:

The Rule of Thirds

Following the rule of thirds is one way of creating a dynamic composition. This is where your focal point isn’t predictably placed at the centre.

Instead, this rule divides a layout into a grid (three equally spaced horizontal lines and three vertical lines). The focal point is placed either on one of the lines, or ideally, on one of the four points where the lines intersect.

Source: Cover Design Studio

The Rule of Odds

The rule of odds often involves threes as well. The idea behind this one is that an odd number of objects (perhaps the focal point surrounded by two other items — or four, as below) is always more interesting and pleasing to the eye than an even number.

Source: Charlotte Cheetham (many stuff)

“Good visual hierarchy isn’t about wild and crazy graphics or the newest photoshop filters; it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.” – Failed Hierarchy – Brandon Jones (Web Designer Speaker, Author, Former editor for Tuts+)

As suggested in the last section, it’s important to note that hierarchy can be used for both good and evil. Think of all the annoying Flash advertisements, popup windows, glitter banners, etc. the web has been plagued with for years! While these ads succeed in grabbing attention, they ultimately fail the site owner. They also fail the viewer by breaking the visual hierarchy within a site.

Similarly, if a designer builds a visual hierarchy with certain key pieces of information nearly impossible to find, the designer will have failed at his task. Brandon Jones put it best when he states that good visual hierarchy isn’t about wild and crazy graphics or the newest Photoshop filters; it’s about organizing information in a way that’s usable, accessible, and logical to the everyday site visitor.

Originally published: 2 November 2017
Updated: 25 November 2022

Keep Reading

Websites

5 Signs You Need Website Revamp & the Steps to Site Overhaul

It is quite likely that your business ended 2020 with great victories and severe challenges. Make the right start to the New Year, get introspective about your business website and consider doing a website revamp. Who knows? A site overhaul might be just what you need to propel your business in 2021.

If you don’t have plans to redesign your website yet, take some time to read this blog and see whether your site could use a revamp.

Here are the top five signs your website is possibly overdue for an update:

Five Ways To Know Your Site Needs A Revamp

1. Your Website Looks Old & Outdated

Digital marketing has a huge impact on today’s business landscape. Most companies are now digital and have a website to reach and engage potential customers.

The benefits of a professional website are not limited to establishing an online presence. A website helps businesses look more professional, widen demographic reach, improve SEO rankings, and measure results, among other things.

For these reasons, having an old website with outdated design and content is a red flag that you should never ignore.

If you have not touched your company website for five to ten years, then it is time to update it. As a rule of thumb, website revamp or redesign is recommended every 3-4 years.

The Internet and search engines are constantly evolving. Google, for example, recognizes updated, quality content and treats it as relevant. As a result, a regularly updated website is more likely to have higher organic search engine rankings than an ancient one.

2. Your Website Has a Bad Foundation

A website overhaul offers a solution to several issues, including unresponsiveness, slow site speed, and security issues.

The above factors can lead to poor user experience and even result in subpar SEO performance and low conversion rate. (See Signs # 3 and #4)

Let us take a closer look at how redesigning your website mends these technical issues.

Unresponsive site. According to Statista, mobile accounts for approximately half of the web traffic worldwide. No wonder most mobile users expect websites to appear the same way on their laptops or PCs.

If your website is not responsive and mobile-friendly, you are missing out. Visitors will tune out and look for other options. This is why you must ensure that your website provides a similar seamless user experience on mobile devices.

Slow page loading time. Your site visitors and dine-in customers have one thing in common—they hate waiting. They will find alternatives that offer the same services and products but are more convenient.

Users cannot stand a slow website! The Forrester Consulting survey found that 47 percent of consumers expect a web page to load in two seconds or less.

Other studies also reported the negative impact of slow site speed on business goals. For example, the BBC lost an additional 10% of users for every additional second their site took to load.

Security issues. Slow websites kill businesses, so does poor website security. Insidious software like ransomware, or a brute-force hack, can lead to websites being compromised, putting the company and its customers at risk of data breaches.

If your website often experiences security problems and you fear such malware attacks, you should implement a strategic web redesign ASAP.

3. Your Website Has Subpar SEO Performance

Savvy business owners build websites to increase visibility and grow their customer base. The thing is, websites with subpar SEO performance won’t deliver.

Search engine optimization (SEO) and user experience (UX) go hand-in-hand. SEO targets the search engines while the UX targets your site visitors. If a website delivers a great UX, it can rank high in search engine results pages (SERPs).

An outdated website with a bad foundation deprives you of showing up in front of the right searchers.

The responsiveness of your website design and how fast it loads affects your SEO performance. If users exit your website after spending only a short time because it does not work on their mobile devices, you will see a high bounce rate on your landing pages.

Make sure that your business site works on mobile, especially because Google now takes mobile performance into account when ranking websites.

Website security also influences SERPs ranking. The lack of online security measures compromises your website’s ranking potential. While your website’s goal is to please the search engines, it is more important to satisfy the users.

To show users that your website is secured, your site should have an HTTPS domain distinction. Many top websites use HTTPS now, and sticking to the unsecured HTTP version can risk your company’s reputation.

Additionally, poor security puts your website at risk from hackers. For example, your website gets hacked and injected with links to malicious sites. Search engines will pick up on this spam and could blacklist your site.

4. Your Website Has Low Conversion Rate

Multiple factors cause a decline in leads and sales—and trust is one. The role of trust in UX is massive. It can influence customer behaviour, purchasing decisions, and loyalty.

When customers lose their trust in a brand it can mean big losses. The same thing applies to business websites. Dissatisfied users who left your site because of specific reasons are considered lost customers. Lost customers account for lost sales and low conversion rates.

When your conversions are down and your sales team frequently reports poor monthly sales performance, it is time to give your website a revamp because it no longer drives results and is not serving its purpose.

5. Your Website Is Difficult to Manage

A content management system (CMS) enables non-technically minded users to make instant updates and site-wide changes. This software eliminates the need for HTML or advanced coding knowledge to create, edit, and publish content to a site or blog.

Why is a CMS important? Because content is king! You need well-written content pieces to fuel your content marketing strategy.

With a CMS like WordPress, you can remain in control, and multiple users have access to work on your site remotely and simultaneously. A CMS gives you a preview of the status of all your content—whether it is published, scheduled, being reviewed, or a working draft.

The best part? Most CMS solutions come with an SEO plugin. In WordPress, there is Yoast, an SEO tool that helps you make your content meet the highest standards of SEO and overall readability.

Do you still call a web developer or someone with coding skills to make changes on your website and publish content? If yes, that is enough sign your website is overdue for a redesign. The problem with relying on HTML or CSS experts is that you don’t always get the job done right or on time.

The Website Revamp Process

Here are a few steps to ensure your website update runs smoothly:

Step 1. Perform Site Audit & Evaluate

Before updating your website, you must first evaluate your current website pages. This step will help you determine what content should be kept, updated, or discarded.

When performing a site audit, you should consider the goals you want to accomplish with the redesign. Below are a few examples of goals you could target:

Reduce bounce rate
Increase conversion rate
Improve website navigation
Boost on-site SEO performance

Google Analytics is a handy tool that will help you with your site audit. It provides you with the essential metrics and analytics that you can use to improve your web content. Learn how to use it effectively in this Google Analytics article.

Step 2. Create a Strategy

Outline a plan and align it with the goals you want to achieve. You should include things like:

Decide on a website design with great usability and ease of navigation.
Map out content optimization for all pages—look for new keyword opportunities, modify title tags, create meta descriptions, update old blogs, and so on.
Update your current URL structure to improve user experience.
Prioritize internal linking from one page to another page to boost SEO.
Implement a tracking code to analyse the flow of site visitors and their behaviour.
Invest in pay per click ads and scale up your email, content and social medial marketing efforts to increase engagement and conversions.

Step 3. Assess & Implement

Assess the deliverables that should be carried out for the website revamp. Examples of deliverables are web copy, articles, videos, graphics, call-to-action buttons, or survey pop-ups.

Once everything is ready, prepare for strategy implementation. Deconstruct the existing website—start with the homepage, identify the main categories and subcategories, and look for database interactions. Then, complete the sitemap for a redesign.

Building the wireframe and mockups is also an important step to take so you can visualize your site before it goes live.

Step 4. Review & Launch

At this stage, your web design and development team takes a final look at your revamped website and tests its functionality and accessibility. If your business site is error-free and meets the essential requirements, then you can sign off on the website launch.

New Year, Newly Redesigned Website

The past year has changed the business landscape and driven a new wave of digital transformation.

To make sure you do not fall behind your competition, look into your website and see whether it helps strengthen your online presence and deliver your digital marketing objectives.

If it does the opposite, your website needs a fresh look and updated content.

Are you planning to embark on a website overhaul? 2Stallions got your back! We offer web and app development services from Shopify to WordPress, CMS development, and more. We can also help you create a UI/UX web design that delivers results.

Learn more about our host of digital marketing services here.

Keep Reading

Search Engine Optimization

Onsite & Offsite SEO Strategies That’ll Help You Gain Traffic

Search engine optimization (SEO) helps increase organic traffic to your website. Companies with well-developed SEO strategies have seen massive success through search. Despite this, there are still companies that sit on the fence regarding the importance of SEO.

In a recent survey conducted by Fractl, only 18.4% of respondents said that SEO is very important to the health of their business. Around 26% (not at all and slightly) didn’t see SEO as a critical element to their success.

The survey also looked into business owners’ understanding of how Google determines which search results to show first. Unsurprisingly, over a third of business owners find SEO a vague or unfamiliar concept.

These research findings drive home the point that there are many owners who are missing out on the benefits of SEO for their business due to this lack of understanding.

The good news is that it is never too late to get started. If search engine optimization is new and confusing to you, this article is for you.

Broadly speaking, there are three main pillars to SEO — Technical SEO, Onsite SEO and Offsite SEO. Understanding these will help you to develop a proper SEO strategy that will drive more targeted traffic to your website and drive up sales.

Technical SEO versus Onsite SEO versus Offsite SEO

Technical SEO focuses on code and performance improvements on your website. Your development team would be heavily involved here, under the guidance of an SEO Strategist expert.

The goal is to improve the code to be more friendly for search engines to understand, and optimize the speed and mobile-friendliness of your website. Together, these website optimizations would lead to improvements in your search engine rankings.

Onsite SEO, also referred to as On-page SEO, involves techniques implemented ON a website to optimize its overall structure and make it search-engine friendly. After developing a keyword strategy, the main elements of Onsite SEO would be keyword placement and content creation on your website.

Offsite SEO, commonly known as Off-page SEO, refers to optimization techniques done OFF your website. This includes activities that promote your website to grow links from other sites on the Internet, known as backlinks and improve the trust factor of your website.

SEO is like a 3-legged chair, with each pillar being one leg, that would not be able to balance unless you focus on all areas.

Technical & Onsite SEO Strategies

Technical & Onsite optimisation is the foundation on which offsite optimisation is built upon. Without focusing on these, your offsite optimisation efforts will be wasted.

1. Website Optimization with Technical SEO

You have to pay attention to your overall website structure and user experience. These are two critical Technical SEO factors that have a direct influence on the success of your website with SEO.

A well-optimized website architecture takes a lot of effort. Here is a quick website optimization cheat sheet to guide you:

Create a sitemap. This step is highly recommended, especially if your website has hundreds or thousands of pages. It helps search engine crawlers to find the pages you want to show up on their search engines.

Link to relevant pages. Add internal links to relevant pages within your website to increase user interaction and help search engines determine the important pages on your website and how to get there.

There are two kinds of links that you can incorporate into your web content—structural and contextual. Structural links are navigation links on your website (i.e. header, footer, breadcrumb navigation). Contextual links are links within your content; they point users to other related content (i.e. read more links).

Improve page load speed. Page speed is a critical ranking factor. If your website loads slowly, users are likely to hit the back button and look for another result. The ideal page load speed is 2.9 seconds or below.

Adopt a responsive web design. People use different devices to search on the web. That’s why you should make your website look good on any screen—be it on mobile phones, tablets, or PCs. Furthermore, search engines like Google have switched to “mobile-first” indexing since 2019. This means that the mobile version of your website has now become more important for rankings.

Make sure your site is 100% secure. It is important to secure your website with an SSL certificate. This enables HTTPS and ensures data from your website to the user and vice versa is encrypted. Implementing this protocol is now a ranking factor, and will help your website maintain good standing on Google.

Add Schema markup whenever possible. Schema markup is one of the most powerful forms of SEO. It uses code (semantic vocabulary) to mark up your pages in a way that search engines find easy to understand.

Here’s an example of schema markup in action on a local search result. The schema markup enables the SERP to display a schedule of upcoming hotel events, giving more context for searchers, and leads to improved click-through back to the website. The SERP looks as follows:

Sample from Neil Patel

Together with your Technical SEO website optimization, you can also start working on your Onsite SEO by developing a keyword strategy and implementing it on your website.

Let’s dive into the strategies around Onsite SEO.

2. Keyword Placement

Keywords are the core of on-page optimization. They are terms or phrases that lead searchers to your website. Optimizing for them will make your website more visible on search engines.

Needless to say, your selected keywords drive the entire onsite SEO optimization process—from crafting content to satisfy readers to writing titles and meta tags that send the right signals to search engines.

Adding keywords naturally to your website content is a critical on-site SEO activity. You should place them strategically throughout your web content, being mindful of the keyword density.

By doing this right, you send the signal to search engines that the topic of your page revolves around your chosen keyword(s). Over time, this lets you rank better for those keywords in search engine results pages (SERPs).

When focusing on keyword placement for your on-site SEO, the following areas are considered key:

URL. Include your main keyword in your page URL. This makes it easy for the search engines to find and understand the topic of your webpage content.
Title. The title tag describes the content of your webpage. Add your keyword to your title tag to increase the crawlability of your site. Note that this title shows up on SERPs, not on your webpage.

Tip: Keep your title tag under 60 characters so that it does not get cut off on SERPs.

Description. Your meta description shows on SERPs below the title and URL. Using one of your target keywords and crafting this snippet to resonate with your intended audience can raise the click-through rate to your website from search.

Tip: Google generally shortens snippets to 150-160 characters, so keep your descriptions around this character count.

Heading/ H1 Tag. This is the title of your page or blog post. Aim to include your main keyword in the H1 tag to improve your SERP placement.

Tip: Your H1 tag should read naturally. If possible, use focus key phrases within subheadings (H2-H6) to make it clearer what the page is about.

Main Content Body. Adding keywords in the body of your content helps search engines identify the subject of your page and rank it in search results.

Tip: SEO experts believe an ideal keyword density is around 1-2% for a page, which means one to two keywords per 100 words. Adding long-tail keywords or more specific keywords in the body may help in refining the search and generating targeted traffic.

Image Alt Text. Images are a great visual addition to any webpage. The priority is to provide context to the image. However, if possible, include your keyword in the alt text of at least one image on the page.

Tip: Keep the alt and title texts short. Focus on writing a descriptive text that includes your target keyword.

3. Regular Content Creation

Writing regular blog posts is one of the most effective onsite SEO strategies. Google and most search engines favour timely, up-to-date and fresh content. They love it so much that it is a signal called Query Deserved Freshness (QDF) in their search algorithm to determine search rankings.

Google uses this algorithm to analyse the user’s search pattern and prioritize fresher content that fits the search intent. If your content provides something fresh on the topic, Google will give your page a boost in the SERP for days or sometimes, even weeks.

The major stumbling block with this strategy for most companies is time and resource. This is why not many businesses take advantage of it. If not in-house, you can choose to team up with professionals. The priority with every piece of fresh content should be quality over quantity.

Here is how you can ensure you stay on the “fresh” side of Google’s algorithm:

Generate topics. Topics don’t appear magically. Writers need to invest time in researching timely topics to write on that Google and other search engines construe as fresh content.

There are several ways to stay up-to-date with your industry’s latest news and trends. For starters, you can subscribe to email newsletters, visit Google Trends, use content curation tools, and follow influencers on social media.

Keyword research. Performing regular keyword research helps in the discovery of new and fresh content opportunities.

The keyword should be relevant to your niche, and popular with users to attract organic traffic from your target market. You should aim for optimizing content for keywords with a lower competitive score to have a better chance of ranking quickly.

Update old content. Have you already been creating content for a long time on your blog? In that case, instead of producing fresh content, it is time to give your existing content a makeover.

Try to reference new research, update statistics, include newer quotes, add semantic terms (long-tail keywords), link to new sources, and add updated relevant images to up the freshness factor for your older blog posts.

Maintain a content calendar. Whether you hire a content marketing agency or do content creation in-house, it is important to maintain a content calendar. An editorial calendar keeps track of your content creation process—from planning to publication.

Spreadsheet programs like Google Sheets can be used to create a content calendar. It allows users to access data, edit information, and collaborate with others in real-time. This simplifies keeping the content calendar up-to-date and helps you maintain your publishing schedule.

Offsite SEO Strategies

1. Link Building

Link building is a long-term offsite SEO strategy that involves building backlinks from other websites to improve your website’s position on Google rankings.

Search engines use links to discover new web pages. The collective reputation of the sites linking to your web page and the topics of those sites determine which keywords and what position on SERPs your web page will show up.

According to Backlinko, there’s a clear correlation between total backlinks and Google rankings. The study found that pages with quality backlinks rank above pages that don’t have as many backlinks. In fact, the #1 result in Google has an average of 3.8x more backlinks than those in position #2-#10.

Below are some ways to generate backlinks to boost your off-page SEO:

Business listing. Submit your website to relevant online business directories. While inbound links from directories are not authoritative, they still help your business to be found online.
Content creation. “Content is king.” This phrase is a cliché but it is true. If your blog posts offer great value to your target audience, then it will likely get shared on social media, and be linked back to by other blog posts.
Social media marketing. Although some social media platforms use ‘no follow’ tags, it still makes great sense to optimize your social media presence. Linking your social media profile to your website lets that audience reach out to you and builds a link in the process.
Guest posting (external content). This refers to writing a piece of content on someone else’s website. The goal is to write on more popular websites so more people discover and read your guest blog, find it useful and come back to your own website. A guest post would also let you link back to your own website, thereby generating a useful backlink or two.

2. Local Optimization

Local search engine optimization (SEO) is a highly effective offsite SEO strategy. This technique helps your business be more visible within local search results, where the competition to rank may not be as high.

People often search for products and services near them. If you let Google know your physical location and your offerings, your business would start showing up on SERPs for potential customers within your vicinity.

These statistics make a strong case to localize your website:

46% of all Google searches are looking for local information. (GoGulf)
72% of consumers that did a local search visited a store within five miles. (HubSpot Marketing Statistics)
18% of local smartphone searches led to a purchase within a day, whereas only 7% of non-local searches led to a sale. (Think with Google)
88% of mobile searchers are more likely to contact or visit the business within 24 hours. (Nectafy)

Here are some ways to improve your local SEO:

Optimize for voice search. Most customers run voice searches to locate local businesses. One way to optimize for voice search is by targeting long-tail keywords or specific key phrases that people would speak when doing voice search queries.
Claim your online profiles. List your business on major directory and review platforms like Google My Business, TripAdvisor, Yelp, and more. This lets you easily connect with potential customers and signals your location to Google for ranking purposes.
Produce location-based content. Besides creating content based on local news or events, it is also a good idea to write content optimized for local keywords. For example, if you run a coffee shop business in Singapore, you can use local phrases like “kopi in Singapore” to target a more local audience.
Create a dedicated contact page. Make sure your website has a dedicated contact page. Include your business name, complete address, email address, and phone number on your contact page. Your phone number should be clickable on mobile devices so that users can call you without much friction. It also helps to add a map with your location.

3. Content Promotion

Content marketing plays a pivotal role in boosting your SEO. Interlinking articles is an onsite SEO technique while promoting your articles off your website is an offsite SEO activity.

Companies often spend an inordinate amount of time creating content with little promotional effort. However, you should ideally spend much more time on promoting your content instead of on producing it.

You can promote your content via multiple marketing channels to increase your reach. Here are some channels to focus on for promotion:

Social media. Share your content on your social media accounts. As per the Datareportal January 2023 global overview, there is an estimate of 4.76 billion social media users worldwide, so it is an excellent way to spread a word about your brand. There are three things to note when promoting content on social media:
1. Choose the right channel. You should know that some content is best shared on Facebook while others are more suited for LinkedIn or Twitter.
2. Know when to post your content. Utilising social media management tools like Hootsuite can help you determine what times of a day your audience is most active. Post when they are most likely to read your content.
3. Use hashtags to your advantage. Research relevant hashtags for your industry as they increase your exposure but do not overuse them.

Watch this whiteboard Friday video from MOZ to learn how to drive traffic from Facebook.

Guest posting. Reach out to bloggers and media for a possible guest post submission to promote your content. Get started with guest posting by:
- - - 1. Searching for sites with good Page Authority and Domain Authority.
      2. Writing an outreach email to the site owner or editor. Your email pitch should include topics that are relevant to their industry, as well as links to your published works.
      3. Promoting all your published guest blogs like crazy.
      4. Repeat.
Paid promotion. This form of online advertising covers a variety of tactics from paid social media to display ads, paid search and more.
- - - - Social ads. Social media platforms let you customize the audience that would view your ads, so you can target the right niche likely to want to read your content.
        Search ads. Also called search engine marketing (SEM), these ads work best for intent-based searches. Use these for targeting users who already know what they want. The most common paid search tools are Google Ads and Bing Ads.
        Display ads. This ad format displays banners across partner websites. This means you can drive awareness for your content by displaying banners on websites on the same topic as yours or to users based on their demographics
Email marketing. Engage existing customers or subscribers via email. This is probably the most effective way to promote your new content. Build a mailing list and send out monthly newsletters to everyone in the list to keep them updated on your latest stories, events, and promotions.
Influencer marketing. Target influencers to help you create a buzz around your brand and specific content. Influencers, being experts or popular themselves, can encourage people to share your piece of content, comment on it, and build links.

Putting Together Your SEO Strategy

After reading to this point, if you are asking “Which works better, Onsite SEO or Offsite SEO?”, then quite frankly, you are asking the wrong question.

All three areas of SEO – Technical SEO, Onsite SEO and Offsite SEO – play crucial roles in helping your website ranking on search engine results, building relationships with your target audiences, and growing conversions from organic traffic.

The strategies and tips discussed can be implemented on your own at no cost and WILL lead to significant results for your organic traffic growth. However, it is extremely time-consuming and would likely require a dedicated expert to work on it.

Oftentimes, companies find that working with an SEO agency partner, such as 2Stallions, is a much more cost-effective solution that leads to excellent results long-term. If you are interested in making SEO part of the digital marketing mix for your company, reach out to us.

As a full-service digital marketing agency, we can assist with your SEO, content marketing and online advertising needs to help you drive results online.

Keep Reading

Digital Marketing

5 Ways Web Analytics Help Strengthen Your Marketing Strategy

Having a professional website is a crucial business differentiator in the digital age. It helps companies establish brand identity and create an online presence. Having a website is not enough, setting up web analytics will maximise results.

This is why digital marketing and web analytics go hand-in-hand. Without analytics, opportunities to shape and strengthen marketing strategy can be overlooked.

Still not using website analytics? Read on to learn more about the business role it plays.

What Is Web Analytics

Web analytics is the process of collection, reporting, and analysing website data. It provides site-specific metrics that aid in making informed decisions about web presence and site performance.

Metrics such as page load times, time spent on a certain page, page views per visit are good examples of web analytics that should be tracked and analysed. Data sets like these interpret how users interact with your website, track every event, and map out conversion paths.

Google Analytics (GA) is the most popular analytics tool. It has been the go-to platform of many marketers because it offers “freemium” service. There is also a paid version of GA, which is called Google Analytics 360. (We will discuss how to use this tool effectively later on).

Other commonly used tools for website analysis include platforms like:

Matomo (formerly Piwik) –,also a free and open-source analytics solution with similar functionality as that of Google Analytics;
Adobe Analytics – highly-customizable real-time analytics platform. Adobe bought analytics leader Omniture in 2009;
Kissmetrics – a powerful website analytics tool that focuses on individual users and behaviour;
Mixpanel – an advanced analytics platform that tracks user interactions with web and mobile applications;
Clicktale – a cloud-based analytic system that taps into customer’s behaviours and experience

How Analytics Tools Fuel Marketing Success

1. Know Where Your Traffic Comes From

Knowing where your site traffic comes from makes it easier to engage audiences and identify the best platform to use.

Google Analytics does this perfectly. The acquisition tool helps you find which channels are driving the most traffic to your business website.

Simply head to Acquisition > All Traffic > Channels. Here, you can see whether your audience found you through search (organic), paid advertising (PPC), social media or direct (they knew your URL). The report will also show the number of users, sessions, bounce rate, and conversions.

For a further in-depth look at each source, Acquisition > All Traffic > Source/Medium will narrow down the traffic sources of a specific channel.

2. Learn Your Website Visitor’s Behaviour

A physical store sees plenty of daily walk-in customers, but only a few leave with a purchase.

Online stores, on the other hand, can track the reasons why customers leave your website with or without a purchase.

Google Analytics, specifically, provides insights into your visitors’ actions. It tells you what pages people visit and what actions they take on those pages.

Using the same sidebar menu of the Google Analytics dashboard, click Behaviour > Overview.

[Insert Overview report]

The Behaviour Overview report provides the following data:

Pageviews – the total number of pages viewed; this number includes repeated views of a single page;
Unique Pageviews – the number of visitors who have viewed a specific page at least once during a visit;
Average time on Page – the average amount of time users spend viewing a specific page or screen or set of pages or screens;
Bounce Rate – the percentage of single-page visits or the number of visits in which people left your website from the same page they visited;
% Exit – the percentage of users who exit from a page or set of pages.

Google Analytics also lets you see the path your site visitors take. With GA’s Behaviour Flow report, you can see the pages visitors first viewed, tracking their movements through your website to the last page they visited before they leaving.

3. Gauge Individual Page Performance

GA is every marketer’s favourite web analytics tool because of its ability to provide a detailed look at how visitors engage with specific pages on a website.

By clicking Behaviour > Site Content > All Pages, users can gauge the performance of each webpage.

The All Pages report shows the top-performing pages based on traffic, as well as each page’s pageviews, unique pageviews, average time on page, entrances, bounce rate, % exit and page value.

This data provides insights to improve your pages and improve conversion rates.

If your website has subfolders, the Content Drilldown report allows you to see the top content sections on your website. To find this report, click Behaviour > Site Content > Content Drilldown.

Similarly, the Landing Page report can help determine the top web pages where your visitors enter. It shows metrics such as acquisition, behaviour and conversions based on your website goals.

4. Analyse & Track Social Media Impact

Google Analytics is also used for tracking and analysing social media impact. Users can get the most out of their social media campaigns and strategize for the future.

Here are some of the benefits of coupling GA with social media:

Learn which social media platforms give you the most traffic
Calculate the ROI of your social media campaigns
See what content works best with a specific social media platform
Ensure traffic from the right demographics with social media
See how many sales conversions your business gets from social media

To generate social media reports, Google Analytics must be set up for it. Follow the step-by-step procedure below.

Create an account on the Google Tag Manager dashboard, set up an account and a container. Then click create, review the Terms of Service, and agree to those terms.
You will be given the container’s installation code snippet. Copy and paste the two snippets of code onto your website.
Once you do that, set up Google Analytics. First, create a Google Analytics account by signing up on the GA page.
Enter your account and website name, as well as the website’s URL. Then, accept the Terms and Services to get your tracking ID.
Once you have the tracking ID, set up an analytics tag with Google Tag Manager.
Go to your Google Tag Manager dashboard and click on the “Add a new tag” button. There are two areas of the tag you’ll be able to customize. First, configuration—where the data collected by the tag will go. Second, triggering—what type of data you want to collect.
Choose what you want to customize and click Save.

5. Improve Your Content Marketing

Given the detailed and in-depth insights about your website and your visitor’s behaviour on your site, web analytics tools can offer you a hand in improving your content marketing efforts.

Since Google Analytics tells you where your customers are coming from and their behaviours and habits, engaging with them can be a piece of cake. You can tailor your content according to their interests and even promote on the channels they prefer.

GA’s ability to gauge individual pages, on the other hand, allows you to discover the room for improvements.

For instance, the All Pages report showed that some of your blogs have a few numbers of pageviews. What you can do is to update those blogs, optimize them for search engines, and promote on social media. Doing this will help increase your pageviews per visitor.

Similarly, you can update the top landing pages with the latest information and targeted keywords or revamp the layout and content. These things will not only increase search traffic to your site but also boost site engagement and reduce bounce rate.

Ready to jump into the pool of data analytics?

Bonus: How to Use Google Analytics Effectively

1. Define Your Business Objectives

Set the right goals for your website. Whether it is boosting sales, moving from offline to online, or increasing user engagement or awareness, set them up in GA so you can measure how your website meets these objectives.

2. Translate Objectives into Goals & KPIs

Align KPIs with your business objectives. If your business objectives are sales-driven, then you can create a goal on Google Analytics.

For example, if you run an e-commerce store, you can track each sale or lead using a contact form for corporate sites. You can even create goals based on the URLs people land on, the time they spend on your site, and the number of pages people visit per session.

Track what business objectives by understanding metrics can gauge business objectives. Learn how to set up goals via Google Analytics Help.

3. Set up Google Analytics Dashboard

Once you have defined your goals and identified the key metrics, it is time for you to set up Google Analytics dashboard.

The dashboard will show you the metrics every time you log in. Not only that, but you can also set scheduled reports to keep a finger on the pulse on the performance of your website.

4. Improve Your Website Based on Analytics

The true power of Google Analytics comes from being able to see WHERE improvements are needed. For example, with your conversions and events set up, you can explore the Multi-Channel Funnels (MCFs) to see the path that visitors take to conversion.

This feature helps you easily understand the customer acquisition process. It shows you the visitor paths that convert and how interaction occurs on your site. With MCFs you can improve pages, remove them or add new ones that will drive your goals.

Watch the video below to understand multi-channel funnels better.

The Takeaway

Web analytics is not just another buzzword. Businesses should find a greater meaning in their website data to create a strategic plan that will drive marketing success.

The process eliminates guesswork from planning marketing campaigns, content creation, and measuring the campaign’s performance.

Speaking of effective marketing, 2Stallions can help you discover the right mix of digital marketing services to achieve your objectives. We also use a range of tools to ensure our clients receive nothing but the best service.

To learn more about the services that we offer, visit www.2stallions.com/service.

Keep Reading