Video 70: Using Image Tags Properly on Your Insurance Website
*Hi, it’s Aaron from AgentMethods talking about insurance websites. And hopefully, the raccoon tan is starting to fade a little bit. It’s spring here in Washington, and I’ve been out snowboarding, and got kind of a funny tan line going on here. Anyway, I want to talk today about a little bit of technical topic again. I haven’t talked much about HTML recently, and I thought it would be good to go back and just talk about some more of the basics and talk specifically about image tags. And there are just a couple things that are good to know about image tags and how you use them and how they can also be used to help your search engine optimization. *
*So I’ve created a little demo page on my site, and let’s just go take a look at it and I’ll use this to kind of explain some of these basics about image tags. Let’s go to the browser and check it out. *
*So we are looking at a page that shows here just kind of basics of an image tag. And I’ve gone ahead and put a tag right here, and I’ve got some fillers, but basically an image tags, like an HTML tag, begins with this less than sign and then IMG (IMG is a tag for image), and then a bunch of attributes behind that. So the first one is the source, or SRC, and this is the actual location of the image file. Now, I’ve just got filename.jpeg, and if the file is located in the same directory as the HTML document, you can just have the name of the file. Otherwise, you need to have the relative path. So if it’s in a subdirectory, you have a slash, directory name, slash, filename. Or if it’s on a different server entirely, you want to specify the complete URL, so it would begin with HTTP:// the domain name and then the path of the file. *
Now, ALT is the next thing I show here, and ALT is really the alternate text for an image, and you can think about ALT as being what you would show if images were turned off or if maybe you’re focusing on making your site accessible and you want to be able to use text readers, so the ALT tag is really going to be a placeholder that can replace the image. So it describes what the image would have otherwise communicated.
A title tag, on the other hand, is your chance to put extra information. So more about the image or describe a bit more about what the image contains, and really kind of get in more detail. And then finally, you can specify height and width, and this is not the height and width of the image, it’s how you want the browser to render the image. And so you can put in any numbers here. You know, if you put in a taller height in the image, it’s going to stretch it. If you put in a wider width in the image, it will stretch it wide and kind of look squashed. And so you’ll see this sometimes if you’re browsing a website and you see some really kind of distorted, weird-looking images. It’s because the height and width are put incorrectly. You can not put height and width here and the browser will figure it out, but by putting them in, you can either resize an image, force it to fit a certain size, or speed up the rendering because it will create a space for that image automatically and just load it quickly.
*Now, a couple of things here. The ALT, text, and title text, these are places where you can put keywords that will get read by search engines. And so if you have an image that is relevant to the content of your page and you put in good ALT text that kind of explain what an image says, or if you want to provide more detail and put in a good descriptive title, or even in the filename itself, the image name, these are more places where there’s text that can be read by search engines, and you can go and get your keywords on the page. Now, do this with caution because if you go too far, if you sort of stuff lots of keywords in ALT tag that aren’t relevant, it will make your site look unnatural, and we know that sites that look unnatural, that are not designed for users in mind, tend to tip off sort of a red flag to search engines. And so, for example, if you have a placeholder image where it it’s missing it doesn’t break the design, it doesn’t break the information communicated, don’t put an alternate tag there; you can just leave it out. So use alternate tags only to communicate what would need to be communicated if the image wasn’t there. But if you can, put keywords in there, by all means, do. *
*So let me show you an example of all this at work. So here is just a picture of my dog, Oscar, out on a hike; he’s very happy as you can see doing what he loves to do, which is go out with me in nature. And this is the actual image tag that’s in the HTML for this image. And so you can see here the image title equals Oscar is seven-year-old Labordoodle. And we’ll actually even see the title if we hover over here for a second, you see it just pops up. Now, we’ve got the source of the image. And if I were to right-click here and view the image, you’ll see that’s the source, exact same location as in the HTML, and then we have the ALT tag, Oscar the Labordoodle, and I can turn off the images. So here you can see I have the ALT tag turned off – I’m sorry, the images turned off and it’s showing the ALT tag in its place. And so this is what would happen if I were using a text reader and couldn’t view this image. And here’s the image turned back on, and then finally, the width and height of the image, 240 by 180. *
So this is just an example of an image tag. You can see kind of proper use of title and ALT tags and how they display by turning off images or hovering over them. Really simple, not a lot to it, but it’s one more way for you to get your webpage structured correct. It’s a chance to get some more keywords in where appropriate; don’t go overboard with this, but do it where it makes sense, and really kind of just make sure your website is performing well, works for people who are using readers or have images turned off, maybe if they’re on older Blackberries or if you’re focusing on accessibility, people who don’t bring imagery in their browsing, this can help you.
So, that’s what I’ve got; that’s image tags. And I think it’s helpful, good to know, good sort of basic information on getting your site structured correctly. I will have more about websites and insurance websites tomorrow. Thanks for watching.