An SSL certificate is very vital for every website when it comes to security in the sense that it creates a connection which is encrypted to the server to protect data from being stolen. Most of the time, SSL is used for parts of a website which uses sensitive information. Eg. Shopping cart checkout.
How A Properly Setup SSL Should Look Like
A working SSL displays differently based on the browser been used. If you look at the address bar located at the top of the browser, you should see a small padlock icon in the address bar area. Below is how a properly setup SSL should look like on different browsers with different websites:
Internet Explorer With Proper SSL Lock
Firefox Browser With Proper SSL Lock
Chrome Browser With Proper SSL Lock
How A Broken SSL Certificate Will Look Like
Sometimes, you notice that the SSL Lock disappears or becomes grey. For example, Firefox displays the exclamation
point while Chrome displays the Yellow triangle. Below is how a broken SSL will look like on different browsers:
Internet Explorer With Broken SSL Lock
Firefox Browser With Broken SSL Lock
Chrome Browser With Broken SSL Lock
Reason Why Your SSL Not Displaying Properly:
We easily blame our web host for improperly installing the SSL Certificate on our servers but that should not always be the case. Your SSL lock will disappear when you link items of your pages insecurely. Even if one of your link is insecure, the SSL will break, meaning it will display grey. Most of the time, the cause is by using absolute links for images as well as text links in your pages instead of relative links.That brings our question to what Absolute and Relative links are.
What Are Absolute Links:
These links or addresses basically take the following form:
The domain is your website’s name. The path basically contains the directory and file information. In short, Absolute links contain your entire protocol, domain and path. Most of the time, absolute links are used when linking to a location on another website. For instance, the absolute link of halmblog’s About Us page will be https://www.halmblog.com/about-us
What Are Relative Links:
Relative links do not contain protocol and domain name but only the path. For instance
How To Fix SSL Not Displaying Properly:
As i stated in the article, the cause for the lock not displaying or showing grey is entirely due to having absolute links in your code. Simply checking the code for the links is what you will need to do. If you also prefer to have a list to everything that is wrong, you can enter your domain name at whynopadloock which will give you a list of every error found.
In short, if your image or text links use absolute linking with http://, make sure you change them to https:// otherwise the SSL will not display correctly. If you have any question, just raise up your hand and i will call you.
Alternatively you can watch this video to solve the problem
Leave a Comment