How to Link Blog Photos To URL'S | Spindle & Rye

How to Link Blog Photos To URL'S

Monday, November 16, 2015



Happy Monday friends!

If you've landed here on my blog, you're either an active blogger yourself or a person who likes to read blogs. Welcome to Spindle & Rye!

I often think about blogging, how we can make it better as a community, how we can help and support each other with more visits, comments etc. Blogging to me, is like reading a newspaper article, but only better because unlike a newspaper, blogs are filled with not only great stories, but beautiful photos!



Whether you're a lifestyle blogger who shares a variety of topics or a specific 'niche" blogger (food, home decor, photography, etc.) the main attraction to your blog is the photos you share! Photos help tell your story, and let's face it, if people didn't want to see your photos they would be reading a newspaper.

My blogging platform is Blogger and most of you know that when you upload a photo to insert in your blog post you grab it from a location on your computer and the photo appears. Blogger then "holds" your photo by assigning it a URL. This basically means that when someone clicks on your photo inside your blog post, the photo enlarges in a new tab, but that's it. It goes NO WHERE.

People are "visual" by human nature. Most tend to click on photos inside of your blog posts so why not make your photos work for you?  This is especially true if you have partnered with brands or companies and you are highlighting their products with photos in your blog post. YOU have the ability to change that assigned Blogger URL to land directly to a specific company website, or even the specific product!



I'm pretty seasoned in blog coding and html, but I promise you that you don't have to be to make this work for your blog!

After you have created your blog post, click the button to switch from "Compose" to "HTML". Everything will look a little wonky at this point but that's ok. Search for the tag "href". Href tells the photo location where to link to. Locate this line of code and replace this url with the url location of where you want your photo to land, such as a company website, or the specific url to the product you are showcasing. Be sure to leave the " " on either side of the code, just copy and paste in between each.

*******If you are having trouble locating the "href" code line, click inside the text box and hit "Control +F". This will bring up a small search bar on your page where you can type in "href" and each place the "href" word is listed will be highlighted in yellow.

I mention in the photo above the word src..........src is the tag that tells the actual location of where your photo is being stored. You do not have to switch out this code as the photo location can remain on Blogger, you just want the "click out" location to change.

After you have replaced all photo URL's, click back to "Compose" mode and hit the preview button. When you click each blog photo, you will now be re-directed to the updated URL's for each that you changed. Pretty simple right?

This technique takes an extra step in addition to writing your blog post, but I think it's more than worth it to have your photos link directly to a specific URL. It's also a great point to stress to brands/companies that you are working with so they know you have made their products easily accessible for purchase directly through your blog post photos.


If you are being compensated in anyway from your blog post (product or monetarily) you should include the code: rel="nofollow" after the company website or product link. This code is referred to as a "no follow link" and it instructs search engines such as Google not to influence your page rank based on your compensated content.

If you give this a try with your blog and you have any issues, please feel free to reach out to me on Instagram, I'd be more than happy to help you!



1 comment:

  1. This is such helpful information! Thank you so much Collette for always helping others and me!!

    ReplyDelete

Printfriendly