How Good Web Development Can Help You Attract Customers

Posted by Cucumber Helen |

A well-designed website can make or break a sale. We all know that your website should be responsive and that it should load quickly. While they’re important for any website, these things only help seal the deal once you’ve actually got customers to your page. So, how do we attract those customers? A lot can be done through coding alone, believe it or not.

Do you know what your web development team should be doing to not just impress visitors who have landed on your page, but to attract them before they’ve made it through the door? Let’s find out…

Keep Your Titles in Check

Like most websites, you’ve probably got headers and subheaders sprinkled throughout your page. This is a great thing to do as it makes your content easy to skim through and read.

If you’re doing it right, these headers are structured in your website’s HTML with H1, H2, H3 tags and so forth. If you’re editing your post in WordPress, you’ve likely selected these from your paragraph options with the dropdown listing styles such as “Heading 1”, “Heading 2”, “Heading 3”, etc.

You’ve grabbed these header styles because they’re an easy way to change the size of your text. Cool! Content needs to be broken out and differentiated to be engaging, good job!

However, don’t be so quick to select these headers for their size alone. Google and other search engines parse your document from top to bottom, and the headers you choose create structured meaning. Improper headers can confuse search engine bots crawling your website, and negatively affects your SEO.

Your Primary Header

“Heading 1”, or the H1 tag, is the primary header of your blog post or page. So of course, if something is primary it doesn’t make sense to have more than one of the thing. What should be the primary header of your post? The title, of course. This is why when you’re writing the content of your post in WordPress, you should always avoid that big, bold, beautiful, “Heading 1” option from the dropdown. You likely already have a primary header, the title of your document.

Your Sub-Headers

Alright, so we’ve got our H1 tag figured out. But what about H2, H3, H4, H5, and H6? These are your sub-headers, and so there is no need to worry about having more than one of these. Have as many as you like, but think about them structurally. Consider the hierarchy of your document. Sub-headers can be used to break out and further organize your article. H3’s should come after H2’s, but this doesn’t have to be a strict rule all the way through your page. They only need to make sense within your content structure.

For example, in the structure below, it is perfectly fine to use a second H2 on the page, because it is logically a different topic or block of content:

    • H1: Your blog post’s title
    • H2: A sub-header for a sub-topic
      • H3: A finer detail within this sub-topic
        • H4: Even finer detail
  • H2: Another sub-header, for a new sub-topic of the same scope

As long as there is a logical order, your headers will help, rather than hinder your search engine optimization. Much of this can be handled right through the post editor, but this might not be the case for other pages on your website. Many pre-built themes can make SEO mistakes such as wrapping your website’s logo in the H1 tag when this should be reserved for your title. A good web developer will ensure that the structure of your headers is set up to help your business thrive.

Keep Your Images Accessible

Quality imagery is a great way to keep your website visitors engaged, and can increase dwell time (another metric to boost SEO). But like most parts of your website, doing it wrong will hurt more than it helps.

Photos Aren’t Headers

While this practice is dying thanks to the proliferation of web fonts, we still see this mistake made all too often. You want a banner or header on your website to really stand-out. Maybe there’s a cool glow effect or a unique texture applied to the text in your design that makes all the difference to make things pop. So, you have your designer whip up this great looking title in Photoshop, and upload your title as an image on your website. All good, right? No, not by a long shot.

Using images in place of text makes your website more difficult for search engines to crawl, and they may miss out on it entirely. This will hurt your SEO, no matter how cool it looks. Instead, speak to your web developer about your idea. The graphics that we can generate through code have come a long way. A good developer might just be able to make it pop…up the front page of Google.

File Size Counts

Including images in your content is a great way to increase the time that your visitors spend on your page, and this will help boost your search rankings. However, high-quality photos can come with a hefty file size, and if your page takes too long to load, those potential customers of yours may bounce. According to Google, 53% of mobile visitors will abandon a website that takes more than 3 seconds to load.

With that in mind, you should make sure that your images are optimized for the web. This can be done manually each time by preparing your photo in Photoshop’s “save for web” feature. Alternatively, your web developer can keep this in mind from the start. A high-quality WordPress site can be set up to optimally resize and compress your images automatically. Magic!

There’s No Alternative to ALT Tags

While it’s never a good idea to use images for all of your text or banners, there is a way that we can add some textual information to the photos on your website. The ALT tag is an attribute which attaches to the IMG tag in your HTML. With this tag, you can add a description to your image which is machine-readable. This is good for SEO purposes, and great for accessibility, as you can provide the same level of information your visitors who are using screen-readers and may have visual impairments.

The ALT tag looks like this:

<img src=”the-URL-of-your-image.jpg” alt=”this is where we describe the image”/>

Nested right within the image, we can let search engines and visitors alike easily understand what the image contains, even if they might not see it.

Keep Your Data Structured

Last but not least, one of the most interesting SEO boosts possible for page structure in the last few years is the addition of schema markup.

What is schema markup? It’s set of additional tags that can be coded directly into the layout of your website that helps search engines understand the context of your content. This markup adds contexts to all sorts of data on your website, with varying degrees of hierarchy. It can be used to provide a description to items from the generic, ‘thing’, to the oddly specific, ‘Lymphatic Vessel’.

Yes, that variance might seem absurd, but that’s exactly what makes schema markup so powerful.

Schema markup adds context to any data on your page through the use of microdata tags:

    • ITEMSCOPE: The boundary of a specific item
    • ITEMTYPE: What kind of data this is, like a product, or a coupon.
  • ITEMPROP: A data property of the item, like the price of your product.

While it may sound technical at first, schema markup’s variety and hierarchy allow us to make your website stand out on the search page. Using the simple logic of categorization, “If it’s a tree it has branches, if it’s a branch it has leaves”, we can add context to anything on your website, and let search engines read it. This is how when you’re searching for an event, Google can show you the date and the tickets right from the search page.

Keep Moving Forward

Attracting customers to your website can be tricky business, but with the right touch to your website, even the code can start to work for you. This is only a brief look at what goes on under the hood to get the visitors to your door, but if you’d like to know more we’re always happy to chat! Give us a call or stop by our marketing agency in Vancouver – we always have chocolate!