Website Creation

The Ultimate Guide to SEO

Ultimate SEO Guide Menu

Written by Harry

13th October 2020

Now I’m ready to create my website, there are a few things I want to make sure I cover from day 1. Here’s the order in which I would carry out my creation process…

What CMS? (If any)


Did you know websites are just a bunch of readable files on a server that your browser opens up and reads like a book? This is why they are called webpages.A CMS is a Content Management System, this is a tool that manages these pages and the resources that fill them, such as images. It also helps speed up the creation of the website, but I won’t go into too much detail with that. What is worth knowing is that it in many cases uses a programming language called PHP. This language communicates with the websites database which is very important to give the website functionality. The downside? When a website has to communicate backwards and forwards with the database it can slow down the site! PHP is still very important and the pro’s far outweigh the con’s, but if you don’t need PHP then I would advise sticking to a lightweight HTML website. These are great for websites that display the basic ‘Online Business Cards’ to show off a bit about their brand. HTML5 UP is a cool site to check out for some nice looking HTML website designs, notice how these will usually be a lot faster than a full site on a CMS.Note: It completely depends on the function of your website, for example, if you are an e-commerce store, then check out Shopify.

WordPress

For me, I have a quickly updating portfolio + blog and want to make use of some plugins on my website. This makes WordPress a clear winner for me! There are some rumours that WordPress is slow, and that it is not secure. I believe this to be untrue. WordPress is hacked a lot, I agree, but this is usually down to users not updating their WordPress platform as soon as an update comes available. WordPress is targeted for hacks a lot as it is the CMS that hosts a massive 27% of the internet at around 75,000,000 websites!(source: https://www.whoishostingthis.com/compare/wordpress/stats/) That’s a massive target to focus your hacking on!The rumour that it is slow is because of what I mentioned earlier, WordPress uses PHP programming, this will naturally make it slower compared to a HTML site, but this is to be expected with any site using PHP, not just WordPress.Bottom line is, don’t be put off when somebody wants to build you a site on WordPress, this is a leading choice for both functionality and usability.

SSL Certificate


SSL certificates make connections to your website secure and encrypted. An easy way to detect if a site has an SSL certificate is by the URL address bar on your browser. Most browsers will display the following if the site has an SSL certificate:
A secure notification, a padlock and https:// instead of http:// in the URL are all signs that the site has an SSL certificate.SSL certificates are noticed by Google and they have also confirmed that it is a ranking factor in their algorithm. Although it is not a massive ranking factor, Google has confirmed that if all other factors are equal, HTTPS can act as a tie breaker in the results.I personally build my sites on https. The reason for this is because I want that to be the first version of the site that Google index’s. If I were to send the site live on http and then switch to https, there would be a period of uncertainty on Google’s part on which site is the main version of the site as well as potential duplicate content issues. Google indexing https from the get go, negates any confusion. Note: I have personally found that my clients rankings briefly slip when switching to https for this reason, these are soon recovered after google has de-indexed the http sites and indexed the https sites. Having looked, it seems that this is because Google indexes the https site, while the http is still in its index, leading to duplicate content issues. Adding a canonical tag and setting up the redirect to https ASAP usually mitigates any damage.

Not being displayed

How to install an SSL Certificate

  1. I will need to create the certificate and attach it onto my site. I can usually do this in my hosting providers cPanel. Not all SSL certificates are free so there may be a charge. To install, it is usually a case of clicking a button and waiting a couple of minutes until everything has finished.
  2. Once installed, it’s worth checking at this point if it is all working before setting up forwarding. I can do this by loading my site with the https protocol rather than http. Simply changing http for https at the beginning of my URL should load it over the encrypted connection. Sometimes it can take a little while, so it may be worth coming back to this after a few hours. Once done, don’t worry if some images aren’t showing or if the site is displaying weirdly, I will show the fix for this in the next step.
  3. The reason some resources (mainly images & CSS) may not be pulling through properly is that they are loading insecurely over http and therefore being blocked by the SSL. To fix this, I simply need to change all of the resources to load over https (by switching it in their URL as you did with your website URL). If your site is a HTML site, you can do a simple find and replace in your code editor (careful not to change any external URL’s though). If you’re using WordPress there are plugins available that will convert all site resources to https and set up forwarding (which we will touch in the next point). Feel free to use the manual method for either WordPress or a HTML website.
  4. Now I need to set up forwarding, this means anyone that clicks on a link with http:// as the beginning protocol, will be forwarded to the https:// version of my website, which has the secure connection certificate. To do this, I can once again, either use a plugin (if my site is on WordPress) or, I can update my .htaccess file using my FTP Client to connect to my website’s server. I use a plugin called ‘Really Simple SSL’. This converts all of my resources to https and sets up the forwarding. Once installed it will show the below:
You’re good to go!

Converting Resources on a basic HTML site (Without Plugins)

If your site is not on WordPress and you can’t use a quick easy fix to convert all of your resources to https then you will need to do the following:

  1. Download and load up your entire website files in a code editor (if your site is using a template then I’d recommend Adobe Dreamweaver).
  2. Do a find and replace with all of your URL’s in your internal site from http://www.yourdomain.co.uk to https://www.yourdomain.co.uk
  3. Edit your .htaccess file with the below code (and edit the ‘coolexample’ part and .com to whatever matches your domain).RewriteEngine On
    RewriteCond %{SERVER_PORT} 80
    RewriteCond %{HTTP_HOST} ^(www\.)?coolexample\.com
    RewriteRule ^(.*)$ https://www.coolexample.com/$1 [R,L]
  4. Reupload all of your files via FTP.
  5. Clear your cache and refresh your website. You should find that it is now secure with no mixed content.

Note: The hosting company, Siteground, that I mentioned earlier offers a free SSL encryption via Let’s Encrypt.

How to check for mixed content

Mixed content is when numerous resources on your website are not loading in over https. Having some content not load securely can render the entire SSL encryption useless. After all, the SSL encryption is being installed to ensure that the site is fully secure, not just partly.Firstly, you will need to find the content that is being pulled in unsecurely (it will display a http instead of a https protocol at the beginning of the URL). Fortunately, Google has made it easier to find these using their Chrome Browser (Other browsers also have very similar functions, but I’ll stick with Chrome for now).If you right click on the website in question and click ‘Inspect’ this will bring up Google’s very handy ‘Inspect Tool’. Navigate to ‘Console’ in the navigation bar and whilst this window is open, refresh the webpage. This will then list all of the mixed content that it is picking up on. Below is a screenshot of a site with a lot of mixed content on (I’ve blanked out the URL’s for data protection). This console view tells you which page the mixed content has been found on, and the unsecure resource it is pulling from.Once identified it is a case of finding the URL’s in question and having them load over https. If you’re loading from an external source that doesn’t use an SSL I would advise trying to find an alternate source.

Canonical Version


A canonical tag is displayed in between the tags and looks like this:https://example.comA canonical tag basically tells Google which version of the website is the main version to index, and pay attention to in regards to content.“But you don’t have two versions of a website!?” I hear you ask.Well actually, I do and if I have an SSL, I actually have four versions of your website. I have a www. and a non www. version, and then I double that by having a http and a https version of my website. If I don’t tell Google that these are all the same versions and that Google needs to only display one version, then Google may see my website(s) with a lot of duplicate content, and not know which to index or display. The canonical tag fixes that!Canonical tags should also be used if you’ve copied content off another site. The canonical tag will tell Google that you don’t want to take credit for this content, and that the original content is where the tag points to. Bear in mind to only do this when you’ve copied the content word for word. If you’ve only used a small portion of the content, simply just reference the site you’ve copied it from with a link back.

Responsive Website


Years ago website owners would set up a completely different version of the website that is optimised for a much smaller viewport. Usually, this would be indicated by a /mobile directory at the end of the main site’s URL. Mobiles would automatically forward to that URL and it would take over as the lightweight and optimised ‘mobile site’. The downsides that quickly arose from this fix were that mobile screens come in all different shapes and sizes so making a mobile site that was fitted to a certain dimension would mean that users would still have usability issues when navigating on their mobile devices. Tablets also had these issues!Introducing responsive design…Responsive design refers to websites that will adapt depending on the screen size. These will not change or redirect you to other pages that have a set viewport, instead they will re-organise the content to fit into your screen, no matter what size. An easy way to test if a site is responsive is to load up a website in your desktop’s browser and thin the browser window by dragging it on the left or right. It’s worth double checking on the devices themselves as sometimes a desktop browser can render a page different to a mobile browser.Google has confirmed that responsive websites are also favored by them. Over 50% of searches are now done on mobile, so if your website is not optimised to adapt to the users screen, Google would rather show another website.

Mobile-First Indexing – Summarised


Google indexes your site based on their ‘Mobile Search Indexing’. This means that your entire site, is judged based on the content you deliver to users on mobile devices. So anything hidden on mobile for the sake of design purposes, will not be taken into account on your rankings, even if it is available for desktop users. The effects both mobile and desktop searches. This means it is important to ensure that your website:
  1. Renders and performs well on mobile devices, including optimal loading speeds for slower networks.
  2. Following on from point 1, make sure the website is responsive so it scales accordingly to varying screen sizes.
  3. That you are prioritising the content and ease of access to certain content on mobile over desktop (although, it’s still generally important for any device).

URL’s


When creating your URL’s it is best practice to keep them relevant to the page content. This helps with clickthrough rate and also can send some positive signals to Google. Although it is not a massive ranking factor it does certainly provide some benefit.This is a website that appears for ‘best trainers for walking’. This result is pretty perfect as it contains a relevant meta-title, 5 star review within the result, recently written (20th June – 2 months before this article was started) but also has a URL slug that is relevant to the search terms.A URL slug is everything that appears are the TLD (the .co.uk, or .com etc..). In this case, the URL Slug is /best-long-distance-walking-shoes-reviewed.After searching ‘Best Long Distance Walking Shoes Reviewed’ into Google, this is what I am greeted by.I’m not saying this is all because of the URL, but it definitely helps!Tidy and relevant URL’s also lead to better User Experience and higher click through rates. Even though Meta Titles can be descriptive of the sort of content a user can expect on a page, the URL helps make it clearer what will be featured on the page.This page is another site that ranks for the same search term. The URL is not very descriptive and may therefore lead to a lower click through rate (CTR) than the site with the better URL.

Not being displayed

Tips to create the best URL

  • Keep the URL’s simple and Relevant
  • Where possible, try to include keywords
  • When necessary use hyphens to separate words, never use underscores, spaces or any other characters.
  • Use lower case letters, including any capitals may be considered to be separate URL’s
  • Avoid the use of URL parameters (See below)

What are URL parameters?

URL parameters are used to indicate to search engines how to handle parts of your site usually for the sake of crawling efficiency. I usually find that these sort of parameters appear on websites with a lot of functionality, such as shopping sites.The reason for this is because parameters are usually set for pages which would frequently show the same content over different URLs. Sticking to the Walking Shoes example:On the Go Out Doors website I have conducted a search for ‘Walking Shoes’ this has produced a search result showing a variety of walking shoes.After working my way manually through the their menu navigation I am shown the same shoes (in different order), under this URL:On Google Webmasters (or Search Console), there’s a tool called URL Parameters. This allows you to select whether you would like certain parameters to be ignored by Google bot when crawling the site. This prevents content duplications across different URLs . I believe Bing also offers this feature!

0 Comments

Submit a Comment