- ABOUT ANALYTICS DESIGN
- LEGAL INFORMATION
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.
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.
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.
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.
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.
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.
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.
We have seen websites of all shapes and sizes, from brilliant to completely dysfunctional. Your site may live solidly in the middle of the bell curve in this regard, however that doesn’t mean your site couldn’t stand to benefit from some amount of modernization. Just like all other technology, the technology of websites is constantly evolving and changing. Often times, elements of a site which were highly effective when a site was built lose their effectiveness over time; and depending on the nature of your business, you may not even realize how significantly even a small issue can affect your business.
While it may be difficult to fully comprehend and validate the decision to move forward and modernize, it is important to keep in mind that time flies as it relates to technology and user expectations fly right along with it. Your website is a 24-hour, 7-day a week representation of your organization online. It needs to properly showcase your brand, your message and your mission. It should drive results, rather than hinder your efforts.