Top 5 Reasons Why You Should Choose Moodle for Your Learning Management System
July 24, 2020“Working Lunch” Webinar Series – The Moodle Learning System: Why You Need It For Your eLearning Platform
August 6, 2020Table of Contents
For quick insight, check out this video for the Top 5 Ways To Prevent Broken Images And Links On Your Website! You can read our full article below for more details and download our FREE informative guide!
Nothing is more frustrating than not getting what you want, when you want it. You wouldn’t hang around long on a website with a bunch of missing images or broken links. You can be certain visitors won’t stay on your site if they experience those problems. Worse, if they then find what they want on a competitor’s website, they may never come back to yours.
Broken images and links annoy Google, too. The more problems they find on your website, the more your site’s authority rating will be negatively affected, and the lower your site will sink in search rankings. And just as potential customers may leave your site to look elsewhere for what they want, when search bots find too many broken links, they too divert traffic to other websites.
Don’t let such easily preventable problems chase away potential customers and hurt your search ranking. Following are the top five strategies you can implement to eliminate missing images and broken links from your website.
Prevent Broken Images.
A little forethought goes a long way toward preventing broken images. Once you publish an image, the file name and image location become part of the web page HTML code. If you later decide to change the name of the image or move it to a new folder, and you don’t update the HTML of your web page to reflect those changes, visitors will see a broken image icon.
In a more extreme example, if you update your primary website address or domain, you could break virtually every image on your website. That’s because the HTML image code on every web page still refers to the root address of your old website, but that file path is no longer valid.
It’s best to avoid making name or location changes to a file that is already published. This is where advance planning can help. At the very least, create a folder named “images” and store your image there. Keep in mind your website is composed of files uploaded to the Internet. Your site can’t understand or know about files saved on your local computer. If you create your “image” folder on your local computer, the result will be broken images on your site. Instead, be sure to create your “image” folder in what’s known as a relative file path to your website.
Then it’s up to you to decide what subfolders to create that are clearly descriptive and have long-term relevance to your organization. Careful planning at this stage will avert the need to change image names or locations later, and therefore prevent broken images. And if ever you absolutely must change image file names or locations, remember you will need to also update the name and file path on your website.
Keep image names short and clearly descriptive, and use underscores or hyphens between words instead of spaces. A file named “logo_300x150” will be easier to recall later than a file named “2020-august-sandys-third-revision-no-drop-shadow.”
An additional problem with broken images is visitors have no idea what the image was supposed to communicate. This can be critical if the image is meant to convey meaning, or even includes words and text. Don’t risk leaving visitors unable to comprehend your website. As a safeguard, always use the alt and title attributes in the image tag when writing HTML.
The alt and title attributes perform similar functions. They allow you to add descriptive text to the image which viewers can read even if the image itself is missing. The alt text appears automatically if the image can’t be found, and the title text appears when a visitor hovers over a missing image.
It’s okay to use the same text for both. The important thing is to be specific and clear about what the image is meant to communicate. You want viewers to get the same meaning from the alt and title text that they would get from seeing the image itself. Bonus Points: Done right, your alt and title text can cause your images to show up in Google search results and give you a boost in organic search.
Repair Broken Images.
Luckily, fixing broken images isn’t particularly difficult. You just need to make sure the image still exists by the same name, and it’s in the same location originally coded into your web page.
To troubleshoot broken images, start by right-clicking the broken image icon and select “copy image location” or “copy image address.” Paste the results into a document app or text editor so you can study the file path.
The first part of the address — for example, mywebsite.com/images/products/ — tells you where your web page expects to find the image. The last part of the address — for example, limejuice.jpg — is the name of the image your page is set to display.
Then simply make sure the named image is actually located in the named folder. That sounds simple enough, but if anyone changed the filename or moved it to a new location, it may be difficult to find. That’s exactly why you shouldn’t change image names or locations after you publish your web page.
Once you locate the image, if either the name or location don’t match what is shown in your web page HTML, you have two choices. Either rename the image and move it into the folder to match what is expected by your web page, or revise the HTML of your web page to match the new image name or location.
While you’re at it, make sure the filename extension is spelled correctly. Images exist in a number of common formats including jpg, gif, png and more. It’s easy to incorrectly spell those acronyms, or to save an image as a jpg but mistakenly call it a gif in your HTML, so double check to be sure.
If you’re a WordPress user, make sure your plugins are always up to date. In addition to ensuring the well-being of your website in general, new versions of plugins can provide bug fixes and solutions to simple problems such as broken images.
Prevent Broken Links.
A broken link is any link that doesn’t successfully connect to the intended destination. This can happen due to a mistyped URL, a destination page that no longer exists, or a page that still exists but it’s URL was changed. In such cases, visitors may land on the wrong page, a 404 error page (more about that below), or worse, a generic error page.
Don’t risk giving visitors the perception your website is neglected or low quality. Here are three simple ways to prevent broken links.
- Use short, simple, easy-to-read and easy-to-type URLs. When creating links to a specific page, product, event, download, or any other content on your website, make it easy for everyone involved. Linking to mywebsite.com/newproducts will produce a lot fewer errors than linking to mywebsite.com/products/new-for-2020-318wxt. Short, simple URLs help prevent coding errors on your website. They also generate more clicks by visitors, and help users remember them and revisit them in the future.
- Check your links. Test them. Then test them again. Do it every time you add a new page to your website, update the content of an individual page, publish a new blog post or enewsletter, send any type of link by email, or post a link on social media. Pro Tip: Don’t forget to regularly check the links featured in any printed material you use to promote your brand — pamphlets, direct mail offers, print ads, t-shirts, bumper stickers, coffee mugs, business cards, whitepapers visitors download from your website, etc. Printed material has a long lifespan. Be careful about the URLs you promote in print. Keep track of them, and make sure they remain functional.
- Use a link checker. Simply enter the URL of your website and let the link checker do the verifying for you. Then simply update the broken links it identifies. Using a link checker is so quick and easy there’s no excuse not to schedule a quarterly review of your entire website.
Use Redirects to Update URLs when Necessary.
If you must change the URL for a piece of content on your website, use what’s known as a 301 redirect to automatically send anyone who clicks on the old link to the new page.
An outdated link may appear numerous times on your website. If you try to update each one individually, there’s no guarantee you’ll find all of them. Plus, there’s no telling how many times that outdated link was shared somewhere outside of your website. For example, you can’t update the link in the email your customer sent to her boss. Nor can you update all the links printed on the tote bags your organization handed out at the holiday party.
301 redirects work behind the scenes to make sure anyone who clicks on the old link will arrive on the new page. They also help protect your search ranking by alerting Google that your page has permanently moved, and all of the page’s link weighting and page authority should move to the new address as well.
Implementing 301 redirects correctly can be a bit technical, so you may want to recruit the web team for this task. WordPress users are fortunate to have a variety of options for redirect plugins.
Create an Effective 404 Error Page.
Even though you should do your best to prevent site visitors from ever seeing a 404 “page not found” error, you still need an attractive and effective error page just in case. When visitors are automatically redirected to the 404 page from a broken link, a well-designed page can actually relieve their frustration and keep them on your site longer.
Following are some best practices to design a 404 page that works to engage site visitors and keep them on your website rather than chase them away.
- Start with a sincere but breezy apology, nothing too dramatic. “So sorry, but…” or “Sorry to waste your time, but…” are common choices. Acknowledging the error and taking responsibility builds rapport and credibility.
- Include a brief, clear, message explaining that the requested page can’t be found on your website. No need to go into details, the reason why doesn’t matter. Besides, you want to get to the next step quickly.
- Immediately offer a practical alternative as a call to action. You could provide a search box in the message and say “Try searching our website for the subject you were looking for.” Or provide a simple link that says “Click here to return to our homepage and try again.” The point is, give the user some good reason to engage with and remain on your website.
- Keep viewers comfortable in your world, don’t make them feel like they’ve landed on an alien planet. Use the same color scheme and general design as the rest of your site. Include your logo, and consider mirroring the header, navigation, and footer featured on your home page.
- Add a human, or even a humorous, touch. True, the user didn’t find what they were looking for, and that’s not good. But keeping things light and evoking some positive emotion can engage visitors, put them in a good mood, and make them feel good about staying on your website.
Much web development work is deeply complicated and highly technical. But cleaning up missing images and broken links often just comes down to common sense and a few simple best practices. When the stakes are so high and the solution is relatively simple to implement, don’t risk losing potential clients to your competitors. Implement the five strategies above and make sure site visitors never encounter a missing image or broken link on your website.
