What makes a good Web Page for 2020?
A good web page requires managing a lot of different elements. This article looks at everything that is relevant to creating solid, SEO friendly, high conversion web pages.
Did you know that Google ranks web pages (URLs) not websites? Each URL does make up the overall DA (domain authority) of the site, but to a very large extent your domain authority is a product of each individual page that contributes towards it.
Onsite SEO, correct placement of content elements, Google’s perception of visitor interaction, colour scheme (or color scheme if you prefer). Elements such as font choice, social media invitations, content length, placement of multimedia.
It all plays a part in giving you the best results in terms of visitor performance, bounce rate, retention and of course SEO.
How does your site rate so far? Find out here
The video below shows a bad web page
Ok, the video is probably a bit harsh. It’s unlikely you are here with a site this bad. But that does pose the question;
“What is so objectively bad about the website in this video?”
Colour (or color) scheme.
It’s probably the first thing that stands out in this video. The design. The garish colours, the font. I think the font might be “comic”. It’s something like that. It comes down to a simple choice that you make right at the beginning of a website build.
With that in mind, what are the best options for a good web page? Maybe you want to go nice and simple. A very dark text on an almost white background?
In general, very dark text, a couple of points up from #00000 is probably the way to go, and the opposite for the background. Something approximating #fffff.
You can change these registers a little bit to add warmth or tone. It’s also worth remembering that a website will look quite different on different monitors with whatever colour calibration and reproduction accuracy they have.
You can’t really go wrong with this approach, but maybe you want to be a little more creative and have, for example, a brand related colour scheme you want to use.
Even on a free CMS like WordPress using a free theme you often have a great deal of choice of over the colour scheme for the page and text.
I’m always inclined not to be “too” fussy.
Yes, I want a specific coordinating colour scheme, but I’m not going to sweat it if a blog theme comes with something very close and no option to change it. The variances in other people’s displays means very few people will appreciate the effort you go to if you spend hours on the minutiae of your colour scheme.
It’s quite disheartening to ask someone
“Hey, have you seen my new website, here’s the URL”
They get it up on their screen, or phone, or tablet, and it really doesn’t look like the colour scheme you spent hours honing.
An effective colour scheme must be good, don’t get me wrong. But if you are still procrastinating after half a day, you’re possibly over-thinking it.
As for colour schemes that others websites that create good web pages have put together. Then have a look here.
https://www.canva.com/learn/website-color-schemes/
There’s almost certain to be one you like and fits the style of your blog. It’s normally just a case of copying the HEX and popping it into the customization options of your website / CMS.
Font Choice
Oh yes font. Don’t underestimate the power of the font, and your text formatting in general.
Legibility, the ability to be read easily is by far the most important factor. Fonts with a great deal of elaborate serif (ing) and ornate fonts are a no-go.
I remember a time when almost every website was in Ariel 10 or 12 point. It was legible – just about, but not pleasant to look at, and that’s where the subjective comes in.
The only competition to Ariel in the late 1990’s was Times New Roman, and that (to me) had a little more interest for the eye but was not so legible.
I’m glad we’ve moved on and we now have a choice of much better fonts.
Of course, choice brings the agony of decision again, and this is another area where you can spend hours pondering. So, lets whizz through the factors that matter so you can narrow your choice a little
Google Fonts?
We do have Google fonts. https://fonts.google.com/
Hmmm… Google has its own designed or endorsed fonts and there is an argument that says;
“If you want to do well in SEO, give Mr Google what he wants”.
That cynical approach aside, there is probably a font here among this very large list that is suitable for any website.
Kerning?
Not a word I like. “Kerning”. Whenever I read it I think of people sticking their heads through toilet seats and pulling the ugliest faces they can. But of course, that’s “gurning”. If you have never heard of gurning, pop along to Youtube once you’ve finished this and take a look.
Yes, it’s a real thing.
Kerning is the spacing between each letter and word in a font.
The issue normally is that spacing is too tight. It can cause eye strain quite quickly. Less often you will see spacing that is too wide. Often this is a result of the formatting being set to “stretch to fit”. Both issues are nasty to look at.
Google fonts and most modern fonts come with excellent spacing characteristics, so as long as you don’t do a “stretch to fit” or it’s equally terrible “shrink to fit” you’ll be ok.
Font Size
Fonts keep getting BIGGER. 12-point is now barely acceptable as a main typeface font for body text. There is a logical reason for this. 15 years ago, a typical 800×600 or 1024×768 monitor was perhaps 15 inches in diagonal and had a pixel density far lower than today. After all a good web page needs to be legible and easy on the eye.
Now with even HD monitors being considered (oxymoronically) rather low res, and pixel densities very much higher, 12-point text is much smaller on a screen. Almost to the point with ultra hi resolution monitors under 44 inches in diagonal, they might be considered unreadable.
Consider 16 point the minimum and if your theme handles it well feel free to experiment with 18 or even 20-point fonts.
Paragraph Spacing and Page Margins
Most CMS allow font choices from directly in their dashboard, and if not, it can be done with a little HTML /CSS that can be cut and pasted and added to a page template header. It’s a 10-minute job.
Again, once you have mastered the simple changes to your themes options or altered a small HTML snippet, you’ll see it’s quite an easy job to experiment till you have the right look and feel.
There’s a small code snipped a few paragraphs below to get you started. It reads almost like English doesn’t it?
How you alter the white spacing around your content on your website will depend on what sort of website you have. WordPress has a page and post standard template. I would always copy the original to a raw text file before you start experimenting though. Just so you can copy it back if things go wrong.
On Page Layout
Headers and Tags
The trick with headers and footers is.
Be consistent.
I know I’ve not always managed that on this site (slapped wrist) but generally be consistent. I have a rule set I try and follow. I’m not saying it’s perfect, but for SEO terms it is absolutely solid, and for visitors to my site it gets generally favourable feedback.
Above all it is simple and consistent. Here goes.
H1 Headers
One H1 per URL. That’s right just one. So, it should have the keyword you are looking to rank for in it. It should also be at the top or very near the top. More on the exact placement later, but as far as your main text goes, 1 x HTML Header 1 tag, at the top.
H2 Headers
H2. This is your sub topic header tag. Most posts over 500 words will naturally have several sub topics in them. Small blocks of a few paragraphs that naturally go together and make one point for the reader. Generally, one of these per few hundred words. A long post of thousands of words might have 10 or more H2 tags.
Don’t go mad witht hem though. They are not highlight or emphasis tags. For highlight and emphasis, we use…
HTML Header 3 and Header 4 tags
These are your highlight and emphasis tools. Want a statement to stand out?
Keep your hands off the “Bold Text” button. Seriously, just forget that the Bold button even exists unless you are actually writing offer /advertisement text, and even then, consider something else.
I set up H3 for emphasis. Used sparingly, often inside quotes or if I’m making a point in a flippant way (or one of my weak attempts at humour).
I tend to have it on its own paragraph like this.
Mixing it with other text looks bad.
H4 tags. H4 I tend to use for short paragraphs that I want to stand out. Great for breaking up a page or making a final point on a topic. Like this.
Sidebars and Buffer Spacing
Getting these elements right. Spacing or margins. The area around your text or content blocks between them and the edge of the page. Too large and your website can look squeezed, too small and it looks clumsy and inelegant.
As a rule of thumb, I start with a minimum of 64 pixels buffer space to the left and right of content and then add more incrementally
Again, most CMS themes allow some customization of this through a simple menu these days. If not then a little CSS will help.
I apologise if I keep referring to WordPress. It’s a handy touchstone and this little bit of code can be used on any HTML / CSS set up. Here’s some basic code that is pretty self-explanatory to get you started.
This information is all on the excellent https://www.w3schools.com website. It is surprisingly simple and for the most part you can copy and paste.
TOP TIP. In WordPress, I tend to take a copy of the default page or post format and put them in a notepad file before I start editing. If I mess things up, I can delete what I’ve done and copy this original code back in.
There are more sophisticated ways of making a backup, but this simple 2-minute method has always worked for me.
Menu Elements and Placement
The golden rule here is;
“Put the menu where people would expect to find it”
It is that simple really. While it is possible with modern sites to have sophisticated menus all over the place, the main navigation bar for most sites should be at the top, with the top-level pages or categories clearly visible. It’s rare that a good web page is a surprise in terms of its layout.
Whether you use drop down, cascade or menu blocks that pop-up is up to you, but the main navigation menu should be at the top.
There are other times you might want to direct visitors to specific parts of your website. Often these are related to context. For example, if a visitor has arrived to read your post on how to set up hosting, you might want to highlight your hosting cost and feature comparison page you created earlier.
In this case you can link to it from within your content as a first option, but in a long post that link will be on the screen for only a portion of the visitor’s read-through time.
Here you may want to put a prominent link with a banner in your side bar that appears just in this article.
There are options for the sidebar to stay fixed, or “float” as the reader scrolls down the text meaning the banner would always be visible.
If the main message is;
“Give visitors what they expect, where they expect it”
The second rule, I’ve already mentioned, is to set up a consistent navigation method and URL structure that aids your visitors and your SEO efforts. Ah, what is a URL structure?
Structure of URL for a Good Web Page
I must admit we used to use the term “canonical structure” until that was used to mean something a lot more specific.
https://support.google.com/webmasters/answer/139066?hl=en
The main question I am asked here is “to date or not to date”. In other words, should the date a page or post and use that date as part of the long URL structure?
There are a few factors here that will move your decision one way or the other.
Firstly. Separate posts from pages. Consider a page as a permanent. Even if you amend and update the content from time to time, your none time-sensitive, long lasting content should probably be on a page not a blog post. In this case no date. This is timeless content.
Next, do you post regularly?
If you do this may influence you to be a little more likely to add the date. While a post may age, your content update is frequent enough for this to work in your favour. It shows consistency and allows your readers to see what is new at a glance.
If you don’t post regularly and your most recent article is months or years old, then having a date might not be the best idea.
If you aren’t sure. Don’t include a date in the URL of your posts.
Category Level in URLs
Another common question is “Should I put the post category in the URL?”
I almost always do. Even on none CMS sites I tend to append a general category level to the URL structure. As a site grows in content, as most do over time, being able to craft a specific category level landing page which operates as the top level for most categories is very handy.
Imagine you sell lawn mowers. Petrol, diesel, electric, hand held.
You structure might be;
Lawnmowers dot com/diesel/supercutter1000 (where the SuperCutter 1000 is a product name)
You may have no page at the /diesel/ level to begin with. Navigation might skip this, but it is worth having available for times you want to bring all your products in that category together, rank for “diesel lawnmowers”, have an offer on diesel lawnmowers or change this level seasonally.
Bearing this in mind, my short answer to whether you have category levels in your URL structure is “probably yes”. Just make the category name meaningful for both your visitors and the search engines.
Image ALT Tags
I run Website analysis software for clients all the time, and the omission of ALT tags is one error I get constantly.
Tools like Yoast are great at telling you what one image should be like. i.e. that it should have the keyword you are looking to rank for as ALT text.
But what if you have a load of images? Should they all have the keyword / key-phrase set?
No
There you go job done. Just No.
Ok, more explanation. Maybe the first one has it, or the feature image if you use that sort of functionality. It should be part of a description. So, if you are looking to rank for “Cell Phone” you might have as an alt text. “Cell Phone Home Screen Image” simple enough
For more than one image you have choices. The chances are you have contextual keywords that both amplify and clarify the purpose of your page. They give Google some context. You might choose to use “4G” or “Network” and maybe throw in a mention of “iOS” or “Android”. This gives Google some solid context.
The lesson here is, don’t waste this opportunity. Have some ALT text and use it wisely.
Featured Image
Well, I like to have a featured image, but it is not without a few issues. WordPress is not the only CMS now to have featured image tags for one image per post or page.
It does not have to be an image that appears on that post or page, though most themes will append it to the top once you select one. Therefore, if it is one that already appears in the page it might then appear twice.
The last time I used Joomla this acted in the same way, though there is almost always a switch in the customization options at the back end of your content management system to enable or disable this feature.
Two considerations.
Aspect Ratios
Firstly, I strongly suggest that, for any good web page, adopt an image in a standard aspect ratio. 16 x 9.
So, you might choose 800 x 450. This means the image will fit almost anywhere if someone links to your site or you promote it on social media. This size is hi res enough to be decent quality but small enough that if you optimize the image to PNG (or JPG at a push) it will not make the page too heavy on bandwidth.
The second issue is promotion. Facebook has an odd relationship with images, and they aren’t the only place. They don’t like text heavy images and tests have shown that you may receive up to 80% less exposure if you use an image with more than 10% text, and that’s a pretty tight 10%.
This applies to both natural sharing, with friends or followers, and critically important, to paid sharing via boosts or the advertising editor.
We’ve recently seen large content sharing sites like Stumbleupon take the same route. Penalizing text heavy images.
A picture speaks a thousand words, so create a text free image to do the talking for you. Since 2010, over 95% of pages ranking for commercial terms contain an image. Correlation or causation? It hardly matters. It’s be shown many times that a good web page almost always contains multimedia elements.
What Elements Go Above and Below the Fold?
The page fold. The amount of page that can be seen on first load without the user needing to touch the vertical scroll bar. A reference here is to assume a 1080 page height and between 8% and 12% of the height being used by the browser menu bar at the top of the screen. A good web page design understands the importance of having the right elements up front.
I run to an acronym P.V.P.T. It stands for Product, Value, Proposal and Testimonial.
The first two need to be above the fold, the third and fourth can be below it. In other words, on most devices, when the page loads, the first two elements I’m going to describe should be visible without the user needing to use the scroll bar to the side of the screen.
It’s reasonable safe to assume a 1080 screen height, but also remember that some people have a cluttered browser and may have an extra level of browser ribbon taking all your lovely crafted content further down the page. Try and get your “P” and ”V” in comfortably.
Ok. what do these letters mean?
The first P is for Product
In short what are you offering. Describe your product and service in simple terms.
This should be short. Think in terms of Google’s own Adwords restrictions. 30 characters for a headline, the same for a tagline and maybe 80 characters for a very brief explanation.
Yes characters, not words, and count spaces as characters. Use your header tags for the headline and tagline; H1 and H2 respectively.
V is for Value
The first P explains the “what”, this explains the “why”. In other wards what is different or better about your product or service?
Is it unique? Do you win on quality, delivery, price? Is the after sales the very best? Are there extras that other sites offering this product or service do not?
You will end this with the details of your price, delivery and any other details vital for your potential client or customer to know.
The second P is for Proposition
Now we might move below the fold on your good web page design. This is the how (and the when and the who). This is where you put all the details that someone who understands the product or service might already know. On the other hand, the detail that is sometimes assumed but should be included both for SEO purposes and for those unfamiliar with the product or service.
Using the phone analogy, we looked at above.
After you’ve given the product details in the first “P” this second “P” is where you describe the product in detail. The resolution, the networks it can use, the processor, the memory, the sort of camera it has.
You might at this point use some case examples. How it can be used. Who might want to buy this product and why it offers them the solution to whatever problem not having this product gives them.
This might be quite verbose for technical products. However, someone who has already done all their research or already knows about this item or service may never scroll down to see this. It’s content that is there for the undecided and for that lovely SEO bonus.
It’s also there for Google.
This is the place you get your word count up a little, add context words, optimize your onsite SEO. It may be just 100 words, it might take a few thousand. It all depends on the complexity of the product and its options. But this is where the content SEO happens.
T is for Testimonial
Proof is important. For a brand-new product testimonial might be a difficult thing to gain. You might be creative and rather than have product specific testimonials you ask for testimonials for the manufacturer, perhaps for you as a seller of the product or service even the developer or creator of the product. It’s almost always possible to add something.
You’ll notice that on this site we have some testimonials. They are a mix of those for the site, those for me as the owner, and those for products and services we offered. Maybe we can rationalise these properly when we get a few more.
The adage that customers buy off people not off websites holds true here. Testimonials humanise the buying experience.
Keyword Use for SEO
We have touched on this above. Keywords. I’m making the assumption that you would like to rank well in the search engines even if that is a side issue and you plan to promote in other ways.
Well keyword use is important. I’ll reference Yoast’s plugin for WordPress and list some specific keyword rules. The rest of this article talks about the headers and META and layout, so this is advice for the body of your text.
Pick 1 to 3 keywords depending on article length
In a competitive niche it’s been shown that articles of over 2,000 words have better results. Increasingly a good web page in SEO terms has over 3,000 words of content
https://www.blogtyrant.com/long-form-content/
Why? Well there are theories on that. One is that longer form content attracts more natural links and therefore ends up being better SEO optimised. This is likely part of the reason.
It also plays into your own hands to add as much value as possible. You will likely rank for more associated keywords if you have the content to support them. These associated keywords used naturally in the main body of your article will add context to your main keywords.
Consider between 1 and 2% maximum for keyword density. This means that a single word keyword appears approximately 1 to 2 times per 100 words of article.
TOP TIP
So, what about a long tail keyword or phrase?
Simple. You count each word. If you want to rank for “Affordable Blue Widgets” that’s 3 words. 1% means writing 300 words and using the phrase once.
You can see the problem.
A phrase mentioned once makes it hard for Google to parse your article in any way that emphasises that phrase. My rule is that a key phrase you are hoping to rank for has to be used a minimum 4x in an article, yet not break the 2% maximum rule. You can probably see how this will dictate the minimum length of your articles to a degree, especially for long tail phrases.
One of those 4x times should be in the H1 then 3x in the body. I don’t count the use of the term in ALT texts for images or in the URL, though the phrase should appear here as well.
Watch out for over optimizing for parts of your long tail phrase. You might want to rank for “Affordable Blue Widgets” but end up sticking the term “Widgets” 10 or 15 x in a 500-word article getting a keyword density for “widgets” of over 5%. Try and keep these single word rogues under 5%. You don’t want an over optimization penalty.
The TL;DNR Issues
Breaking up content in the page it’s an idea to see how many tools you have in your arsenal.
A solid wall of text is rarely found on a good web page and will lower your view through rate. By how much and to what extent that might affect your pages purpose depends on many factors. The length of the page, the quality of your writing, the type of product. Which leads us into…
Keeping the Eye Interested
We all get bored. Looking at a block of text. To combat the TL;DNR issues are some tools and ideas you might want to consider to break the page up a little. Keep the reader’s eye more engaged,
Multimedia – adding an image or video
Headers. Simple and effective. Headers H2 or H3 within your text blocks set simple goals for the reader. They tease the next sub topic and give a sense of achievement once reached. Yes, just like game theory. That really is one of the ways headers work!
Background colour changes
A tricky one this, make sure your theme has a colour scheme that co-ordinates and don’t go mad with this. But a subtle change in background colour is another visual milestone for the reader.
Quotes or other pull-outs
Quotes are good. They are a solid form of citation. Along with maxims (which you can also put in quotes) they offer pithy or poignant single line examples of longer ideas. They also break up text blocks nicely
White space
Densely written text just looks bad. We mentioned Kerning earlier but extend this idea to the whole use of white space in your articles. Between paragraphs, before and after header tags, around any embedded visual elements.
A good web page makes use of white space. The area around page elements is a great tool when used well. Here’s a great guide on the topic of whitespace.
Use of Multimedia
Placement of Images and Video
Let’s start with a question.
Is the article or post you are writing explicitly to drive sales directly from a product or service which is the focus of your writing?
If so, then the “video or best image at the top” method is fine. When experts talk about the increased selling power of video, they aren’t joking. If you have a good selling video, then on a sales landing page, get it up just below the title.
Make sure your video performs the product description role of a good landing page and it’s better if it also performs the value role of the page. (remember the P.V.P.T landing page layout explained above)
An exceptional image or infographic might also perform this function. In some circumstances infographics outperform video, however most infographics that I see tend to be very long form, extended portrait in aspect ratio, and therefore will likely be cut off at the page fold. That is not ideal.
But if you have a graphic that fits, and proves to be a real sales converter, then this can also go at the top. A good web page design philosophy is more concerned with the role an element plays and how it performs that sticking too rigidly to a content/media mix formula
All that said, most of the time you will want images and videos lower down. On none explicit sales copy, use them as tools to break up the text, amplify a point or extend the conversation by bringing in associated concepts, having visual examples of the product or service and perhaps even testimonials. In short, multimedia elements add value.
Horizontal Multimedia Position on the Page
I will say however that using the full width of your standard page layout is best. Centre justified with no other page elements to the left or the right. If you are thinking;
“I’ll make this look like an old-fashioned newspaper with an image set to the left of the text”
Then maybe if that’s an important visual theme you might get away with it, even then I’d urge you to at least try the image or video on its own. Text ends, header, video, new header, text re-starts. With each element on a new line with good use of white space. A good web page design doesn’t make the reader struggle to know where their eye should move to next.
Advertising and Social Distractions
Balancing the Need to Sell
Advertising
Those who analyse Google’s response to above the fold advertising and its potential impact on SERPs have come up with a few solutions.
Look at Moz’s view on advertising as part of good web page design; https://moz.com/blog/guide-to-ads
This article is from 2011, but the theory is exactly the same now as it was then.
The precise percentages of penalization for having too many advertisements above the fold might change from time to time, but the overall effect has not changed at all.
Above the fold advertising is something that most websites that rely on ad revenue to survive do need, and this advice from Moz via their analysis of Google’s algorithm does not preclude advertising above the fold.
My advice? One advertising position. Your strongest best performing ad taking up no more than 12% of the on page real estate.
TOP TIP On page real estate means not including the background behind the page. Just the page itself. Typically a 240 x 240 ad above the fold is good. This is assuming a HD screen being viewed with normal browser settings on a mainstream browser such as Edge, Safari, Chrome or Firefox
Social Media Shares and Invites
If you have a page focus, and that page focus is selling or getting an idea across in full. Perhaps signing up to your email list, then adverts that are not connected to that purpose are going to pull some of your visitors away from the main goal of the web page.
The same applies to social invites “Share this” or “Like this” button. While they can be great for getting you message out there, putting them in the wrong place can lead your visitors away from your site before you’ve even started.
There is a conflict of interests here. I mean, you do want your content shared. So where is the compromise?
We bite the bullet and use them. A good web page has to perform its primary function. Design sometimes has to take a back seat to utility.
Content marketing is a core even of SEO and certainly social media sharing is far too important for most websites purpose to not include it.
Despite the possibility of losing a few visitors, you need to put those share buttons in. A formula might be;
Social media sharing at the top, then at every 2500 words of your article, and at the bottom.
If your article is less than 2,500 words, then top and bottom only is fine. That will cover well over 95% of all articles on the internet as I write this.
For long form articles, especially those over 5,000 words, there is a real chance that readers will skim or read it in more than one sitting. To allow for this drop-and-pick-up, get the sharing buttons in the middle as well.
Technical Issues
Navigation and Internal Links
If They Can’t Find It, They Won’t Read It
I won’t dwell on this one too much here. IN short, as mentioned above, the navigation of your site. The ways the menus are positioned on the page and what elements are shown on the menus should makes sense.
This probably isn’t a place where being too clever and different works. Give your visitors what they expect. A menu isn’t a challenge to be solved. A bad menu system can cripple your visitor retention and push your bounce rate through the roof. That’s bad.
Orbit Media have a great post detailing the aspects of menu design in creating a good web page that might not be obvious.
Broken Link Blues
Broken links are really bad. Internal links mean that navigation around your site will frustrate visitors. However, these are rare and normally a consequence of a typo.
(There’s a tool linked to at the bottom of this section that can help you find and fix bad links both internal and external)
Links to other sites break quite often. The site you are linking to changes, updates or is deleted. It happens all the time. You then have a dead link on your own site and this not only frustrates your visitors but also is a contra-indicator for a good SERP position in Google.
Your choices are to either find another citation source and link to that instead, delete the link entirely, or produce content that replaces what you were linking to yourself.
The issue is finding these links. On a large website with hundreds or thousands of outbound links checking regularly can be a full-time job in itself.
Here’s a free tool that works for most small and medium sites that does the job
http://www.brokenlinkcheck.com/
How Many External (outbound) Links?
In the days of Page rank, or at least while the results of PR were being published by Google, we had an understanding of how external links could leak authority from your website
Leaking Authority?
Yes, leaking authority. Or at least the authority as we used to understand it. The formula is complex, and it is widely believed that Google still use either this formula (linked below) or one very similar
https://en.wikipedia.org/wiki/PageRank#Simplified_algorithm
Oh, You’ve Gone
Another issue is that links are also an invitation for visitors to leave your website.
Why would you do that?
Because of citation, and the fact that, although you might lose the odd visitor and is some very solid evidence that on the content appraisal part of Google’s algorithm, that content that posits ideas or makes claims and is without citation is heavily penalised.
If you state facts that are not self-evident, and you want both Google and your readers to believe you, and trust any conclusions you draw from them. You need to link to places that offer solid citation. While on the link side of SEO, outbound links can leak some authority, on the content appraisal side of SEO you gain trust.
Too Many Links (Spoils the Web Broth)
Balancing the need for citation
We had to mention inbound links at some point, though I did not want to make them a focus of this article.
Let’s just say, a good article contains citation (outbound links) to emphasise or explain its points. It also achieves a number of inbound links. Hopefully bringing in much more in the way of authority and link juice than the outbound links have given away.
Then there is the use of this tag;
<a href=”signin.php” rel=”nofollow”>sign in</a>
The nofollow tag allows the link to function but instructs the Google web crawler not to follow it.
This is interesting and often misinterpreted.
This does not say the link will never leak authority. It does say that the Google bot will not follow it.
In other words, the bot will not leave your site to explore where this link goes, and in all likelihood that means that no “link juice” or authority will be lost. But that isn’t explicit. In fact, in Google’s own page all they say is “In general we don’t follow them”?
Well, that’s about as clear as mud then
It’s also thought that the other search engines, Bing in particular, now use these tags as part of their ranking algorithm as well. How? We don’t know. It’s safe to assume it’s a similar way to Google. But again “In general, we don’t follow them” does not mean “we never follow them”.
Here’s the full explanation from Google and Matt Cutts.
https://support.google.com/webmasters/answer/96569?hl=en
Slow Page Load Speed
A slow loading site is one of the surest ways to get your bounce rate climbing. With Google now focussing on user experience (and let’s not forget the user experience for its own sake of course) then a slow load speed is “bad”
But what is slow?
Slow can be defined as any URL that takes longer than 5 seconds to fully load and is a disaster if a page takes longer than 10 seconds. Professional sites try and keep to a 3 second maximum. So, if you can squeeze than 5 second down to 3 you are on to a winner.
There are two technical factors that play into this, plus the weight of your URL itself.
Your site’s server’s ability to deliver the content. Low quality hosting might struggle to deliver at speeds greater than 1mb (Megabit) per second. In testing I’ve found even some very big names have low end shared hosting packages that are – terrible.
I’ve had some awful experiences with GoDaddy and 1&1 where the low-end packages were barely capable of delivering a page weight of under 1Mb in under 3 seconds. This while their own advertising shows image heavy, function heavy websites loading almost instantly on this weak-sauce hosting. GoDaddy have improved their low end shared hosting packages since I used them, but for the biggest name in the business, they are not in the top 3 for speed, and 1&1 are still, in every experience I’ve had with them. Truly terrible.
Here’s a review of the best hosting solutions I can find now.
https://howtogetonline.com/web-hosting/fastest-web-hosting
I’m not saying the ones well reviewed here are the cheapest. But if visitor experience is important, they are the best.
Expect Your Visitors to Have Below Average Speed and Connectivity
There is an assumption that some make that your site visitors have decent connectivity themselves. An ability to download at 16Mb per second. In other words that a 2 megabyte page loads in a second.
This is not an assumption I’m prepared to make. Particularly if your site has a decent percentage of visitors arriving via mobile devices perhaps using 3g or 4g or free WiFi. A safe assumption then might be under 8Mb per second; 8 Megabits (Mb) = 1 Megabyte (MB)
Small SEO tools have a web page size checker https://smallseotools.com/website-page-size-checker/
It allows you to check up to 10 at a time.
How do you speed up pages?
Server Side Caching
Most CMS now come with addons or scripts that allow for server-side caching. This takes up a little more space on the server but can dramatically decrease the wait time before a page starts to upload from your server to a client’s device.
So, while not speeding up the users download speed once it is underway. It can reduce the overall time quite considerably, and that’s the important thing.
Reduce HTTP requests
The internet, and your visitor’s devices, don’t see your web page as one entity. It is seen as a number of elements and each element has to be summoned (I hope that’s a decent word to use here) via a HTTP request, and each request is queued and has its own latency time.
Reducing the number of discrete elements on a page can reduce the number of times these calls are made and therefore the number of times this latency occurs. Of you have a WordPress site there is a great plugin called WP Rocket you might want to consider which can reduce these calls.
Of course, you can always just use a slightly simpler design on each page (Oh dear. I know what you’re thinking)
Reduce or back load Java and Flash elements
None HTML or CSS elements on your page, specifically Java and Flash (How many people still use Flash? Oh dear. Please stop.) can be scheduled to load after the text and image elements of your page. This means the visitor can get on and enjoy your content while these elements are retrieved at the end. Again WP Rocket linked to above deals with this very well/
Images are the Number 1 Speed Killer
With my time as a digital marketing consultant I’ve looked at and run reports on many sites. The number one speed killer for most is their use of oversized, badly scaled or wrongly formatted images.
Among those issues, using a full sized image weighing several megabytes scaled down – but not reduced in server space / download size is the issue I come across the most. Uploading a full image that is above HD in size then using the inbuilt scaling functions of a CMS to shrink it to a fraction of it’s normal area to fit in a page or post.
The problem being the server call still requires the full “unshrunk” image to be fetched.
Shrink your image before hand
It’s an idea to decide on a few standard image sizes before hand. Again I would suggest choosing a 16×9 ratio as this means they will fit and scale to almost all devices and platform in both portrait and landscape. However you might want 3 or 4 versions of each image.
Full size, for feature image, half sized for use as colour within a page, small, for use in mosaic or collage mode and portrait if the image features a specific product or person. Resizing images is simple. A free tool like Irfanview
will make the task of resizing simple as well as providing lots of other functionality. If you have many images to scale or crop then there is a batch function in Irfanview that can do the job for you.
Pick the right format
Unless you are an artistic site, where pixel perfect accuracy of very large images and the download of those images for manipulation is important, then it’s best to avoid BMP files.
PNG is probably the best solution, and the only solution if you use transparent backgrounds. JPG is a decent second choice.
Again Irfanview can change these formats for you easily. Just save as the format you want and choose a quality setting where appropriate. There is a trade off with JPG files between the size of the image and the quality. This is useful if the image is none vital and you don’t want it to be too bandwidth heavy.
Malware
It goes without saying that if your visitors are greeted with malware, if their virus checker warns them to stay off your page or even declines to allow the browser access to your site at all. Then this is going to severely impact your chances of getting anywhere.
Malware is worse than your site being down. If you think about it, the chances are you are going to have to take your site down anyway for a period to fix it.
What can you do to prevent or at least greatly diminish the chances of your site becoming infected with malware?
Password discipline
The easiest thing to start with. Set a strong password for your login and/or FTP server. Regardless of the minimum strength password requirements you are probably given, take it as far as you can. Most of my passwords now are a minimum of 32 characters, often up to 60 characters and contain letters, both capital and lower case. Numbers and special characters.
Controversial and Entirely Personal Opinion
You can use a password manager if you like. I’m a luddite in this respect. My thinking is. If I was malevolent, and wanted access to as many websites as possible, then the only thing I would look to compromise would be password managers.
Remember compromising a password manager doesn’t mean they have to be able to unencrypt hugely complex passwords. They can intercept, spoof or reset aspects of the system at either the server or client end.
The backdoor to a password manager is unlikely to be hacking the password itself. All the services that advertise password encryption stress just how good they are in this respect.
No, the multiple weaknesses are in the communication, set up and resetting of passwords and the devices used to perform those actions. In short. I don’t trust them. I’ve been told I’m daft not to trust them, and I am quite willing to be proved wrong. I hope I am proved wrong.
Investigating them and seeing if there is a solution that suits your purposes is certainly better than having an unprotected website.
But If I was a mastermind hacker, the only thing I would be looking to hack -would be a back-door into password management systems. Nothing else would really matter to me at this point.
That’s a sobering thought.
Controversy Off
Depending on how your site is set up there are likely several security options available. I’ve used Bluehost, GoDaddy, FastServers and quite a few other services in the last 18 months and all have come with a Cpanel activated anti malware solution.
There are plugins and addons for all well-known CMS systems that add anti malware functions. They survey log in requests, check the integrity of essential server-side files. Many are free for basic functionality and come with extra options for a fee. As an example, take a look at Bulletproof for WordPress.
Third party security services
Importantly. Most anti malware plugins, Cpanel solutions and third-party site monitoring services come with a site backup solution as well. I’ve used Securi before now which as well as malware protection adds CDN and DDos protection. Take a look here; https://sucuri.net/
Often these services consist of a free backup for smaller sites and a paid service for larger sites with the handy ability to schedule full backups. I would strongly suggest you use these options. Essp the free one. What have you got to lose?
Backups can get very large, so scheduling some time to download a copy to your own PC once every month might seem inconvenient once your website gets to several hundred megabytes in size. I would suggest doing it anyway. It brings real peace of mind.
The services tend to carry one or two backups for you but knowing you have it on your own drive is a second level of insurance, and also very handy if you ever want to migrate your site to another host.
Pop-Ups and Lightboxes.
Light boxes and popups are almost ubiquitous in a commercial website. Whether carrying information on site security or a cookie policy or popping up to give users the opportunity to take up a special offer or opt into a mailing list. Almost all commercial sites use them.
While they can annoy visitors and have a slight negative effect in SEO terms, the chances are you are going to use one at some point. However a good web page doesn’t bombard its visitors with objects that clutter or obscure the view.
The trick here is to configure these elements correctly.
If it is an informational only pop-up then limit it to a strip at the top or bottom of the page that does not interfere too much with the view of the page itself. Ideal positioning for your privacy policy note is at the top of the page taking as little room as possible while still being clear.
Redirects
Let’s start with what a redirect is. Best explained here;
https://www.bluefrontier.co.uk/company/blog/item/redirects-guide
There are many reasons why you might need to redirect a URL. Here are some of the most common cases in which redirects are needed:
- When pages are deleted, to send those that click the link to a suitable alternative page.
- Send traffic to a new domain when a site is moved.
- The most common (sometimes performed by your host automatically) is to the none www version of a site to its www-version or vice versa depending on which one you prefer
- Moving a site from HTTP to HTTPS (Hypertext transfer protocol – Secure)
- The URL of a page is changed. Important if you have inbound links to the old page URL to prevent 404 issues
- To allow several websites to merge under one URL structure.
- A site is moved to a new content management system or from a HTML site to a CMS
- The structure of a site is changed. This is to prevent both internal or external links leading to 404 errors
Types of Redirects
There are several different types of redirects. The main ones you should know about are:
- 301 Redirects – Permanent
- 302 Redirects – Found or Temporary
- 307 Redirects – Temporary
- Meta Refresh
You can see there are many reasons why a redirect might be used. It’s common to come across an old site that has 30x redirects layered one on top of the other. A redirect of a redirect if you like. In fact, I’ve come across a 5 level nested redirect before now if you include the www to none www version.
Redirects are not something you should look to have. They are a necessary evil, a sign that something was either a choice you were forced to make or content was unavoidably altered or deleted. If you had a good web page that perform very well then altered your site significantly, changing the URL structure, then using a redirect or keeping the old URL, even if its structure falls outside your current design ideology might be the best idea.
They have a slight negative impact on SEO and some browsers get suspicious of nested 30x calls as this is a method used by some forms of malware or forced traffic redirects.
If you have to use them stick to a single level (below the www to none www).
Tools on this page can help you see these to find where any issues are.
The most common way to set up redirects is within your hosts CPanel. Normally the procedure is you type in the URL that has been deleted, wildcards are usually allowed, very handy if you have deleted entire site sections – then select the URL or link that you want the traffic to be sent to instead.
404 Issues
A 404 error occurs when a visitor uses a URL from your domain that does not exist. Normally as a result of a site change but sometimes caused by them typing an internal URL from your site incorrectly into their browser.
It can be hard to know where this visitor actually wanted to go, and it is possible to set up complex 404 rules to handle these errors depending on the depth iof the URL being types and how much of that depth actually exists.
For instance
Mysite dot com/category/productgroup/productid
If only the product id part of that URL is wrong it is possible for a 404 set up to parse the rest of the link or types URL and send the visitor to the product group page instead. Handy, not perfect, but very useful.
A general catchall solution is to have a specific 404 catchment page. You’ve probably seen them “Oops this page doesn’t exist” sort of message.
However, don’t leave it at that. Have a page set up to collect all your 404 errors. Have an apology (it doesn’t matter whether it is your fault or not – apologise) then offer useful information regarding your site along with good navigation options for this visitor to reach where they intended to go as quickly as possible
“Here’s our product groups? Where would you like to go” [list of appropriate links]
Google search console (formerly Webmaster tools) is a good place to start.
From within your Google account follow;
Search console – Crawl – Crawl errors then click on the “Not Found” tab
The problem with the search console is that it will only find the internal ones it has crawled, and it might not have visited your whole site. Tools like those in Link Assistant will find the others and give you the whole picture. Website Auditor will tell you if you have a good web page or not. Also good give little or no hint as to whether they consider it a good web page or not. You just have to see how it ranks.
User care, privacy, and data protection
You can see why I left this to the end. It’s the bit we all dread. The none value added content that a site needs. I’ll get through this as quickly as I can. Bear in mind though. It is important for both your visitors sense of security and as an SEO benefit
Oh No! Not GDPR Again!
Do you collect data? Do you sell products or services and collect payment details? As an affilaite or sales site do you drop cookies? Do you ask your visitors to sign up for a list?
If your site does any of these. You need to be GDPR compliant if you are going to sell in the EU.
It’s a massive subject, and one that even the governments implementing it seem to have a little confusion over. However, luckily there is a cut and paste element to this.
Perhaps you use a CRM (Content relationship manager) like Salesforce or Pardot then they should have a GDPR policy posted prominently on their website that you can link to as part of yours. It is they who collect the data on your behalf.
https://www.salesforce.com/uk/campaign/gdpr/
For sites that sell directly then whatever sales portal you use will have guidance and likely come “fill in the spaces” copy and paste text for you to use. Paypal, Magento certainly have notices that you can adapt and use.
CRM lite systems like Mailchimp and Aweber have good advice for their users
https://mailchimp.com/help/about-the-general-data-protection-regulation/
It’s not a 10-minute job. Getting this up and running might take a small to medium site that sells products and collects data half a day’s effort to cover all the legal necessities. For large businesses it’s a real effort to get “up to code”.
I do strongly advise smaller sites and affiliate sites to see what others are doing, assess their data collection, and piggyback off the services they use to build up a compliance policy. Copy and adapt their text and use their resources. There are no SEO points for GDPR compliance text and it’s highly unlikely that many will ever read it. (fingers crossed)
Connecting to a Good CRM / List Service
It’s all worth it in the long run. If you sell as an affilaite, collect personal data such as names and emails to create a list or sell directly. It’s a worthwhile effort to do it properly, not least because users are very aware of security at the moment, and that isn’t something likely to change for a while. Entering personal details on a site with no active and visible compliance policy is going to lose you sales and sign ups.
HTTPS
I mentioned further up the secure hypertext transfer protocol. Increasingly any site with a commercial intent is expected to have HTTPS rather than HTTP. I’ve checked most of the big hosting providers and so far in my search, without exception, they offer HTTPS either as an upgrade for existing clients or an option for new clients. The price difference is minimal in most cases and I would say HTTPS is now essential for commercial sites.
More information on what HTTPS means and how it works here;
https://www.instantssl.com/ssl-certificate-products/https.html
The Money Is Still in The List
Yes, it is.
Every verified member if your list that signed up for legitimate reasons (I.e. you didn’t con them with false promises or pretend you were something you are not) is worth between 10 and 50 cents US per month to you if you know how to do email marketing properly. How to use email marketing correctly is a different topic altogether. A list of 10,000 or more is a living wage for almost anyone in any market.
People buy from other people not from websites
I left this to the end because it’s not so much about the site but about you. It’s the reason my P.V.P.T ends with the “T for testimonial”
It’s because people buy from other people. It’s hard to trust a website. It’s just data flowing through data centres and down your broadband connection. It’s the people who made the website, offered the service or manufacture the product that engender trust (or lack of it). Most times a good web page allows elements of personality to shine through to the reader.
I’ve tried anonymous websites. Writing in a fully impersonal manner. Product details, price, sales tag and buy now. A good web page in design terms still needs something personal to turn it into a great one. (most of the time).
It’s not a complete failure as a system but switching to a slightly more personal approach has worked every time I’ve done it or advised clients to do it. Even in pure B2B markets. If you’ve not tried being present personally on a website before it can be a little worrying. Try by adding a bio, change the writing style to be a little more personal. Answer queries and comments with a name rather than “webmaster”
There is no need to go too far. Your personal details, where you live, family details etc. None of that ever needs (or ever should) be revealed.
Hope you found some value here. The advice on this page is as up to date as I can make it and I intend to alter / add to the page as the landscape we build and promote websites on changes.
Leave a comment below if you think I’ve left anything out or what more clarification on any part of this. I’ll be glad to help out.
Cheers
Dr Paul Rone-Clarke
Reviewed and updated from article previously published on Yourmetalife