Updated February 17, 2017
A clickable image allows anyone to click on an image and be taken to a page you specify. Said another way, you want the image itself to be a clickable link.
Making a clickable image is not as complicated as it may sound. There are a few ways to do it and I explain two different options below.
The example we’ll be working with
For the purpose of this tutorial, I will use this image as an example (if you click it, you’ll see how it takes you to the corresponding page on my site):
For the first option, I will outline the manual approach which works anywhere HTML is accepted and is useful knowledge you can use again and again.
For the second option, I will outline a quick workaround if you use WordPress and don’t want to deal with as much code.
This first option involved manually writing the HTML for your clickable image. While the sound of it might be intimidating, working with HTML in this instance is quick straightforward.
Option One, Step 1: Grab the needed URLs
To create your HTML you’ll need to gather two bits of info. (I recommend you first open a new text document or have a place where you can paste these URLs so they don’t get lost while you work with them.) Here’s what you need to get:
1. The landing page’s URL
This is the web address (URL) of the page/post/site where you want the user to land when they click on the image. Get this by going to the page you want to use. Simply highlight and copy the web address in your browser’s address bar.
In our example, I navigated to my How to Start a Blog post. This is the place on the internet I want people to go to when they click on my image.
I copied it’s URL from my browser’s address bar like so:
So in my case, the landing page URL is:
Once you copy your landing page’s URL, paste it somewhere safe (like your open text document) while you grab the next URL.
2. The image’s URL
This is the URL specifying where the image is located or “hosted” online. All images available online are hosted somewhere. This makes them accessible on the internet.
Important note: Do not use someone else’s image without their permission. This is copyright infringement. Read my post about using images here for more.
The easiest way to find an image address is to navigate to the page on the internet where it appears. Then, right-click (on Windows) or Control-click (on Mac) on it. A small menu will pop up. Select “Copy Image Location” (Windows) or “Copy Image Address” (Mac). It will be saved to your clipboard and you are ready to paste it.
Here’s a screenshot from our example.
While still on the page from above, I hovered my mouse over the image and Control-clicked since I’m on a Mac. Note that I selected “Copy Image Address” from the menu.
Selecting this caused the image URL to be copied to my clipboard. When I paste it, this is the image’s URL:
If you are a WordPress user, there is an alternative way to find an image’s URL. From your WordPress Dashboard go to Media > Library. Find and click on your image. In the window that appears, highlight & copy the entire snippet of code in the URL field.
Excellent. With these two URLs in hand (and hopefully saved in a text document), let’s move on.
Option One, Step 2: Create the code
In the bit of code in the gray box below, switch out the bolded URLs below with the two you just saved.
Simply paste the URLs between the quotation marks. Be very careful not to accidentally delete the quotation marks in the process and don’t duplicate the http:// or https:// (you may see either).
<a href="http://LandingPageURL.com"><img src="http://FileURL" /></a>
This is what my code would look like:
<a href="https://amylynnandrews.com/how-to-start-a-blog/"><img src="https://amylynnandrews.com/wp-content/uploads/2016/01/how-to-create-a-blog.jpg" /></a>
If you want the link open in a new window, you would simply add “target=”_blank” to the first piece like so:
<a href="http://LandingPageURL.com" target="_blank"><img src="http://FileURL" /></a>
This is what my code would look like if I wanted it to open in a new window:
<a href="https://amylynnandrews.com/how-to-start-a-blog/" target="_blank"><img src="https://amylynnandrews.com/wp-content/uploads/2016/01/how-to-create-a-blog.jpg" /></a>
If the link attached to this image is an affiliate link, make sure you add the nofollow tag. Instructions to add the nofollow tag are here.
You can now take that whole piece of HTML, from the <a href…> to the </a> with <img src..> inbetween, and paste it wherever you want the image to appear, like in your sidebar.
Related: Tips for Using Images on Your Blog
Option One above is the easier method in my opinion, but if you prefer to deal with less HTML, here’s another option (using a different image to keep things less confusing).
The idea is simply to create a new post, add a photo, link it, and then grab the HTML to be use elsewhere, like your sidebar. These instructions are for WordPress, but a similar process could be used with Blogger too.
Here’s what I mean…
Option Two, Step 1: Save the image to your computer
If you have not already saved the image to your computer, do this first. Right-click (command-click on a Mac) on the image and “Save image as…”
Option Two, Step 2: Open a new WordPress post
Do this even if you’re going to put the image somewhere else on your site like your sidebar. This is part of the workaround.
From your WordPress Dashboard open a new Post (Posts –> Add New).
Option Two, Step 3: Upload your image
Make sure you’re in the Visual tab (indicated in the top right of the post box). Click the Add Media button (top left of the post box).
Option Two, Step 4: Add your image to your post
While in the Upload Files tab (top left), you can either drag and drop your image into this screen, or click the Select Files button to find the image on your computer.
Once you’ve selected your file, you should be automatically switched to the Media Library tab. In this window, do the following:
- Make sure the image you want to work with is checked.
- The title will automatically be inserted. Did you rename your image before you uploaded it? A good title will help with SEO so make sure you rename your image before uploading. (If you need to start over, you can delete this image by clicking Delete Permanently next to the thumbnail image on the right.)
- Fill in the Alt Text. Again, this helps with SEO. I just usually make it the same as the title without hyphens.
- Do you want your clickable image to be aligned in a certain way? Centered, right, left or none? Select your preference from the dropdown.
- Here’s where you make it clickable! Select Custom URL from the dropdown menu. Enter the URL of the webpage you want this image to link to. So, in my example, I’ll enter https://amylynnandrews.com/how-to-start-a-blog/ so it will match my image and link to my page.
- Do you want your image to be a different size than what you uploaded? (These options are controlled in Settings > Media.)
- Click the Insert into post button.
Your image will now appear in your post window like so:
Option Two, Step 5: Do you want your image to open in a new window when someone clicks?
Many people like the link attached to their image to open in a new window, especially for an affiliate link or when they’re sending people to a different site.
- If that’s the case, click on the image to highlight it. It’ll gray out a bit.
- Then, click on the link icon (looks like a chain link).
- In the small window that pops up, check the box that says Open link a new window/tab.
- Click Update.
Option Two, Step 6: Grab the HTML
Click the Text tab in the top right corner.
This tab shows you the HTML for your image. Simply copy that whole bit of code and paste it wherever HTML is accepted (like in a sidebar widget).
Option Two, Step 7 (optional): If this is an affiliate link, make the link nofollow
If your image will is linked with an affiliate link, you should make it nofollow. Tagging it nofollow will tell search bots not follow those links when it’s indexing your site. You can read more about why this is important in my post How to Add the NoFollow Tag to A Link.
To add the nofollow tag, simply add this bit of code in the HTML right before the closing tag (>) of the first link:
I’ve inserted it below. See the highlighted text.
Now you can grab this HTML and paste it wherever you’d like the clickable image to appear (like in your sidebar).
Don’t stop there…
Are you getting the most out of your images? I’ve shared a lot more tips for using images on your blog.
Also, the Useletter often has tips about images as well.
Like it? Share it!