The img tag and how it can super power your food blog

Bjork

by Bjork on Jan 22, 2014 in Growing Your Food Blog, Understanding HTML

The img tag and how it can super power your food blog | foodbloggerpro.com

Do you have a favorite super hero? I have always been fascinated with Mighty Mouse. I love the idea of a tiny little mouse that has a really big impact.

There are a lot of different "Mighty Mouse" elements that exist when you're growing a blog. These are seemingly small or unknown things that in actuality have a big impact on the success of your blog. One of these "Mighty Mouse" elements is the img tag. In today's post we're going to dissect the img tag and explain how it can super power your food blog.

Want to practice doing some of this on your own? You can click on the button below to download the images and text that I'll use in the examples.

Download Lesson Files

What is the img tag?

The img tag is the HTML code used to communicate information about an image to a user’s web browser. When looking at a website, we humans see images, but your computer sees HTML code.

I think the best way to understand is by doing, so let’s jump in and explore this together.

  1. Login to your blog (we’ll be using a WordPress blog in this example).
  2. Hover over Pages and select Add New (don’t worry, we won’t be publishing this page).
    Adding a new page in WordPress
  3. Add a title of Chocolate Chip Muffins and then click Add Media.
    Adding media to a WordPress post
  4. Drag the chocolate-chip-muffin.jpg image from the lesson material folder into the Insert Media window.
    Drag file to import media window
  5. Fill in the Attachment Details and Attachment Display Settings like the screenshot below. Click Insert into page.
    Attachment Details and Attachment Display Settings
  6. After clicking Insert into page, WordPress will drop the image into the page. Now let’s take a look at the HTML code that WordPress is using behind the scenes. We can see the HTML code by clicking on the Text tab in the top right corner.
    Switching to the text tab in wordpress
  7. Cool! We’re now looking at the img tag exactly as a web browser would see it when it comes to our blog.
    The img tag in WordPress

The begin and end of the img tag

The first part we need to look at is the img tag itself. I put a red box around the beginning and the end of the image tag. The first red box shows where the tag starts, and the second red box shows where the tag stops.

img tag opening and closing

It’s important to know where the beginning and end of the tag is so we can examine everything that’s inside of it. The parts that are inside of the tag are called attributes. Let’s take a look at the four attributes that are inside of the img tag and talk about how they can super power your food blog.

1. The class attribute

The class attribute

We’re not going to spend much time with the class attribute, as you’ll only use it if you’re familiar with CSS (CSS is a type of code that helps you add style to websites). One thing that is important to point out in the class attribute area is the “align” class. In our example above, the align class is set to alignnone.

As the name implies, this is the way that your image is aligned in the post. There are four choices for alignment that you can pick from when putting an image into a post: Left, Center, Right and None.

Alignment options in WordPress

Here’s how those alignments look:

alignleft

WordPress alignleft class

aligncenter

WordPress aligncenter class

alignright

WordPress alignright class

alignnone

WordPress alignnone class

Nerd note: If you want to switch your image’s alignment you can just change the text in the class attribute. For instance, we can change our example image to have a left alignment by changing alignnone to alignleft.

There are two other classes we see, size-full and wp-image-16139. These are not classes that we'll need to change or adjust manually.

That's all that we need to know with the class attribute for now. Let's move on to the alt attribute.

2. The alt attribute

The alt attribute

It’s easiest to remember the alt attribute as the alternative attribute, as in what text should be displayed as an alternative if, for whatever reason, the image can’t be displayed.

There are three reasons why the alt attribute is really important:

  1. Usability: It communicates information about your image to visitors that are visually impaired.
  2. SEO: It communicates to search engines what your image is about.
  3. Pinterest: It’s the information that is auto populated into the description area when an image is pinned from your site.

1. Usability

Visitors that are visually impaired will use a screen reader to process the information on websites. A screen reader will go through the different parts of a website and attempt to read back information to the user. This works really well for text, but it doesn’t work as well for images. Providing descriptive text in your alt attribute supplies the screen reader with content that can be read back to the visitor, enabling them to better understand what the image is about. Imagine how you would describe your image to someone that is visually impaired. That’s a good starting point for what you should put in as your image's alt attribute.

2. SEO

When a search engine like Google comes to your site it will crawl through your page and attempt to understand the information on your blog post. Search engines are really good at understanding text, but not so great at understanding images. That’s why the alt attribute and the image’s file name (more on that later) are so important for your food blog’s SEO. If your file name is IMG_9205.jpg and the alt attribute area is empty, then you’re not giving Google any clues to help it figure out what your image is about. Providing an accurate and informational alt text helps Google understand your image.

Nerd Note: Never try and trick Google by "stuffing" a bunch of words into your alt attribute in an attempt to help your post show up higher in Google. This would be an example of "black hat" SEO and could actually end up hurting your blog's rank in Google. Just do your best to provide an accurate description of the image.

3. Pinterest

Understatement: Pinterest has the potential to drive traffic to your food blog.

If you have a post that becomes popular on Pinterest it has the potential to send HUGE amounts of traffic to your blog. The most important part of a viral Pinterest post is how an image looks, but the alt attribute also plays a really important role when an image is pinned. This is because the default description for a Pinterest pin is the text in the image's alt attribute.

That's a really important point, so I'm going to repeat it: The default description for a Pinterest pin is the text in the image's alt attribute.

Here’s an example:

The impact the alt tag has when using pinterest

A creative, eye-catching description can go a long way with Pinterest.

Want to take it a step further?

Here’s a Food Blogger Pro certified “super tip”: Include your blog’s URL at the end of the alt attribute. The URL will be clickable once the image gets pinned to Pinterest and will act as a direct link back to your site.

Here’s an example:

Include your blog's URL in the alt attribute so it shows up in Pinterest

Here’s an example of some Pinch of Yum pins that include the URL in the description so you can see how this really looks on Pinterest: http://www.pinterest.com/search/pins/?q=pinchofyum

Can you see how it’s a major benefit to have your blog’s URL in the description of a Pinterest pin? Pretty darn cool.

3. The src attribute.

The src attribute

The src attribute is telling the browser where the image is located on your server. It’s easiest to remember the src attribute as the source attribute, as in this URL is the source of the image.

This isn’t critical to know, but I think it’s interesting: Your blog’s images are organized the same way that they would be on a computer — where every image is stored in a folder. So, if you’re using WordPress, the URL for your src attribute will usually look like this:

http://yourblogname.com/wp-content/uploads/2014/01/your-image-name.jpg

In our example, the URL is:

http://pinchofyum.com/wp-content/uploads/2014/01/chocolate-chip-muffin.jpg

  1. That means that there is a folder on our server called wp-content:
    pinchofyum.com/wp-content/uploads/2014/01/chocolate-chip-muffin.jpg
    WordPress folder structure for media
  2. …and in that folder there is another folder called uploads:
    pinchofyum.com/wp-content/uploads/2014/01/chocolate-chip-muffin.jpg
    WordPress folder structure for media
  3. …and in that folder there is another folder called 2014:
    pinchofyum.com/wp-content/uploads/2014/01/chocolate-chip-muffin.jpg
    WordPress folder structure for media
  4. …and in that folder there is another folder called 01:
    pinchofyum.com/wp-content/uploads/2014/01/chocolate-chip-muffin.jpg
    WordPress folder structure for media
  5. …and in that folder we can find our image:
    pinchofyum.com/wp-content/uploads/2014/01/chocolate-chip-muffin.jpg
    WordPress folder structure for media

FBP Members: If you want to see how to access these files and folders on your blog you can watch the FTP course in the Essential Tools topic area.

Nerd Note: You can actually copy the URL in the src attribute and paste it into your web browser like it is a website. When you do that it’ll bring you to a web page, but the only thing on the page will be the image.

The most important thing to consider with the src attribute is the file name that you give to the image before uploading it. The file name is important because search engines use it to try and figure out what your image is about. If your image is of a chocolate chip muffin, make sure that you don’t have a file name of IMG_9205.jpg, because that’s communicating to the search engine that your image is about "IMG_9205.jpg," which doesn’t really make sense.

It would make much more sense if you call your image chocolate-chip-muffin.jpg, because that’s the actual content that is in image. This is an important concept, so I’ll bring in some emojis to help make my point.

SEO Tip - Ideal Image File Name

There are lots of different ways you can change the file name of an image. Here’s how I usually do it:

  1. Click on the file
  2. Press return (enter) on your keyboard.
  3. Type in the new file name.
  4. Press return (enter) to finish editing.

Renaming an image's file name

You want to do this before you upload the image to your blog, as it’s really hard to change the file name after you uploaded the image.

4. The height and width attributes

The height and width attribute

WordPress should automatically add these attributes to your img tag, but if they’re not included you need to add them. The height and width attributes are important because they save the web browser from having to measure the image’s file size on it’s own.

It’s kind of like handing someone a picture and asking them to go buy a frame for it. If you start by first telling them the exact dimensions of the picture then they’ll be able to quickly find the correct frame size. If you don’t tell them the dimensions then they’ll have to measure the picture before buying the frame, which takes a lot longer.

The same is true for images online. If you tell the web browser the size of the image then it doesn’t have to measure the image on it’s own, which means your page will load faster.

Linking an image to an image :(

Occasionally I'll notice a blog that is linking all of it's images to a page that is just another picture of that image. I'll provide an example below. If you hover over that image you'll see that you can click on it. When you do click on it you'll notice that it opens a new window that contains the same image.

Blueberry Muffin

This doesn't hurt anything, but it's considered poor form (unless you're linking to a larger version of the same image to allow the visitor to see it better).

The issue comes from having "Media File" selected under "Link To" when you first add the image to your post.

Link to Media File

You'll usually want "Link To" set to "None."

If you notice this issue on old posts and you'd like to fix it you can remove the anchor element (highlighted in red below) that is wrapped around the img tag.

Anchor Element around IMG tag

Editing and updating your img tag

We've dissected the img tag and understand the attributes that are located inside, but how the heck do you put them in correctly in the first place (or edit them if you know you've done it wrong in the past)?

Attachment Details and Attachment Display Settings

The easiest way is fill out the information in the Attachment Details and Attachment Display Settings when you're first adding the image. It's insanely simple, but many people rush through this part. The screenshot below shows a basic example of an image with properly formatted Attachment Details and Attachment Display Settings.

Attachment Details and Attachment Display Settings

Nerd Note: Here's a quick explanation on the other fields in this screen: (1) The title attribute is no longer used in WordPress, so it's not a critical area to fill out. (2) It's rare to see a caption used on a food blog (as the pictures are pretty self explanatory. (3) The description is for your own internal use and won't show up when you insert the image.

Editing the HTML in the text tab

At the begin of this post we switched our editing screen from the Visual tab to the Text tab. Once you're in the Text tab you can easily update the different attributes of the img tag. Although you can technically change all of them, the only one you'll really want to change is the alt attribute (and possibly the alignment class).

Editing the alt attribute in WordPress

Conclusion

Did you make it all the way through this post? If you did then you're the kind of person that's serious about growing your food blog. smile

I just threw you a virtual high five for going above and beyond and taking the time to understand the img tag. Remember: it's all about small changes that can have a big effect on your blog. I'm off to watch some Mighty Mouse on YouTube!


Ask Questions - Get Answers

comments powered by Disqus
  1. Artur -

    Really an excellent tutorial. It’s little details like the image alt tags that help sites compete with other sites and differentiate them from the some of the lazier competition.

    Jan 22, 2014

  2. Dee @ The Kitchen Snob -

    Thanks for explaining this in great detail. Very helpful. One thing I’m still confused about is the area under the “Attachment Details”. I thought if (for example) my image was titled “tangerine-beef-4” when I uploaded it, that I could change the title in the Attachment Details area. I then put in the “Title” area “tangerine-beef-stir-fry” because that is my SEO keyword. Are you saying that by putting that in the title area, I’m not really changing the title of the image?

    A second question: if it is titled tangerine-beef-4, is the “4” bad for SEO?

    Thanks!

    Jan 22, 2014

  3. Bjork

    Bjork -

    @Artur

    Thanks Artur! smile

    @Dee @ The Kitchen Snob

    Are you saying that by putting that in the title area, I’m not really changing the title of the image?

    Yep. Title is another attribute just like the alt attribute, but WordPress has recently stopped including it all together in the img tag. The purpose of the title attribute is to give the user a “hint” when you hover over the image. Check out this old post on Pinch of Yum and hover over the images - http://pinchofyum.com/cornmeal-blueberry-muffins- see that little box that comes up when you hold your mouse still? That’s the title attribute.

    The file name of the image has to be changed before you upload it.

    Jan 23, 2014

  4. Rachelle -

    Thank you so much for this tutorial!  I’m in the process of setting up my blog and had been wondering about how to get “Pins” to automatically put in the description when people pin my images.  This was just what I needed!

    Jan 24, 2014

  5. Bjork

    Bjork -

    @Rachelle

    Awesome! Happy to hear that it was helpful Rachelle.

    Jan 24, 2014

  6. wendypolisi -

    This is a great tutorial, thank you!  One question - when I add my URL to the end of the alt attribute is isn’t clickable on Pinterest.  I tried just www and also starting with http and neither work.  Any idea what I am doing wrong?

    Jan 26, 2014

  7. Bjork

    Bjork -

    @wendypolisi Did you try just “domainname.com”?

    Jan 26, 2014

  8. Victoria -

    Hi, is there a reason why you used “add a page” rather than “add a post”? Ive been curious about whether there is any benefit to this.

    Jan 26, 2014

  9. Debra Wprth -

    Whoa!!! I had no idea. Now I do. SEO overwhelms me because I am not even sure where to begin!

    And, thanks for the virtual high five. I have high dreams for my food blog (not yet launched) so, it was encouraging.

    Jan 27, 2014

  10. wendypolisi -

    @BjorkThat didn’t work either.  Apparently I have something in place on my website that Pinterest is pulling from because when I change the alt tag it isn’t changing what Pinterest is showing the title to be.

    Jan 27, 2014

  11. wendypolisi -

    @BjorkThe problem is the pin it button on my website.  If I pin it from my browser it is fine.

    Jan 27, 2014

  12. Bjork

    Bjork -

    @Victoria Nope. No really reason. smile Here’s the difference between a post and a page: http://www.wpbeginner.com/beginners-guide/what-is-the-difference-between-posts-vs-pages-in-wordpress/

    @Debra Wprth Glad to hear it was helpful. SEO is simple stuff once you start to learn a bit about HTML.

    @wendypolisi Good catch. There are a handful of “Pin It” buttons that just use the blog post title instead of the text from the alt attribute.

    Jan 27, 2014

  13. willrunforpasta

    willrunforpasta -

    I’m curious about Artur’s second question as well.  I’m more of a lifestyle blogger so I don’t really do recipes (yes, I know it’s FOOD BLOGGER Pro, haha!), so let’s say I’m posting a restaurant review, is it bad to title all the pictures the same, like burger-king-1, burger-king-2, burger-king-3, etc.

    Is it better to be as specific as possible, like burger-king-chocolate-shake, burger-king-booth-with-a-view, burger-king-bathroom-decor, etc. ?

    (Don’t worry, I’m not blogging about BK bathrooms wink )

    Feb 05, 2014

  14. Bjork

    Bjork -

    @willrunforpasta I don’t think having a number at the end would really hurt anything for a single image, but I’m guessing (you never really know for sure with SEO unless Google tells you) that it would be better to have descriptive/unique file names vs. repetitive/similar file names.

    Feb 05, 2014

  15. Amy Stafford -

    I recently read that it helps SEO to add hashtags in the alt text, is this true?? Thanks for all of your helpful tips, they are great and easy to understand and use.

    Feb 08, 2014

  16. Bjork

    Bjork -

    @Amy Stafford Interesting! I haven’t heard that, but I just read into it a bit and it seems like the general consensus is that hashtags wouldn’t help SEO, but it would add a cool level of interaction to the images that get pinned to Pinterest, as anything that would be a hashtag in the alt text would then be a hashtag on Pinterest.

    Feb 09, 2014

  17. Katie | Healthy Seasonal Recipes -

    When I imported my old website from Joomla to Wordpress more than a year ago I didn’t change my image links. I had been using a joomla plug in that allowed the reader to click on an image and a second larger version would come up. It was called Magic Thumb. So what I’m saying is that there is a bunch of old unused code in all of my old images. Would it make sense for me to go in and clean that all out?

    Mar 15, 2014

  18. Bjork

    Bjork -

    @Katie | Healthy Seasonal Recipes

    So what I’m saying is that there is a bunch of old unused code in all of my old images. Would it make sense for me to go in and clean that all out?

    How many posts do you have? I imagine it would take awhile, but if you have the time it would make sense to clear out that unused code.

    Mar 15, 2014

  19. lucyb

    lucyb -

    @Bjork - Do you think it would be worth it to actually go through and reload and rename the old images? Would that be harmful or helpful to SEO? Wouldn’t be the same as reposting something, just changing the image link. I have a lot of images so would be a lot of work but if worth it then I’ll do it.

    Mar 21, 2014

  20. Bjork

    Bjork -

    @lucyb Not unless you have a ton of free time, which most people don’t. smile I’d just be sure to keep this in mind as you move forward with creating new posts. New content is almost always more important than fine tuning or tweaking old content.

    Mar 21, 2014