In this session we show how to remove the tool tip from inserted images by either leaving the title of the title tag blank or deleting it. However, we don’t recommend that you do this. In order to have a valid HTML, you should add a descriptive title to the image. We discuss validation errors and validation warnings that occur when the title tag is left blank or deleted. We also discuss how this negatively affects the site with Google and the SEO benefits of having descriptive title and alt tags. Google assumes that images in the page are relevant to understand in the content of the page.
Member: I’m trying to figure out how do I… whenever I upload a picture, I don’t want the tips saying what that picture is or the name of that picture showing on my website. Is there any way I can turn that off?
Rick: Sure. Can you give me a URL so I can see it in action?
Member: Oh it’s not up and running. It’s being built in…
Rick: Okay so I’m going to make you the presenter then and we’ll take a look at it from your side. I think I understand what you’re asking but I just want to make sure.
Member: Okay. Can you see the screen?
Rick: I can.
Member: Say like here, whenever my cursor goes over and it’s not doing it right now, it would show what I named that photo.
Rick: Go ahead and refresh your browser window for a second and then try it again.
Member: There it is.
Rick: Subscribe now 90 by 300. Okay and so show me how you inserted that.
Member: Oh let’s see if I can walk through that here. I actually uploaded the picture and it’s in the file here. Let’s see if I can go back in. I’m new at this now.
Rick: No problem.
Member: Okay in images inside of my library, I found the picture wherever it’s located. I’m not sure exactly but I would go in and say edit and…
Rick: Why don’t you find the actual picture?
Member: Okay, let me go back. We’re going to edit this…
Rick: Well, it’s not… okay so it’s baby subscribe now is the picture, right?
Member: Yes, that’s the picture. And if I edit this page, I should be able to go to where it’s located, correct?
Rick: No, I don’t think so. I mean, that looks to me like that’s in the sidebar. It looks like it’s a widget to me.
Member: Oh, I know what I did. Hang on. Let me go back. I actually put that in as a background as my header layout.
Rick: No, I diont’ think so because again, I think that’s inside of a sidebar.
Member: Well, let me walk through the steps and you tell me if I’ve done this totally, totally wrong here. On 3, it’s going to be the bottom section to the left so it’s going to be this, Rick. I got it, hang on. One sec. Where to go? Full.
Rick: It’s not going to be there either.
Member: Right there. There’s the image.
Rick: Pregnancy logo 1.png. Okay so leaving this one to open, I want you to open up another window or another tab so we can see that.
Member: Okay, another tab from the Thesis?
Rick: Well, go… I mean, I just want to be able to flip back and forth between those 2 tabs, between this tab and the tab… well actually, what I really want you to do was keep the other tab open.
Member: Oh it is. It’s behind there.
Rick: Oh okay. So now… so okay, let’s go ahead and look at the webpage itself. Okay now show me where this image is.
Member: Well, what I’ve done is from the top of that navigation bar, that part from that part up to the top is a background image. It’s all one image. And I’ve created image 1 and image 2 as the background and this is a setting in the background.
Rick: Okay well the thing is that a background image cannot display a tool tip like that. There’s no way for a background image to display that. So the only kind of image that can display that is an actual image with an img tag. So the thing that is displaying that tool tip is not a background image and it is an actual image that appears to me, to be inserted into some sort of a widget. Whether it is a text widget with the image stuck in it or it’s got to be something like that because a background image cannot show that.
Member: Okay, I think you rang a bell to me here. Hang on, here we go. We’re going to come over here. We’re going to click widgets and you’re right. It’s going to be in the header… okay, this one right here.
Rick: Okay so you’ve got an image tag there. See where it says title? Title equals subscribe now 90 by 300?
Rick: If you delete that, subscribe now 90 by 300 and just say title equals and then have it be… just be nothing in between… no, not the whole thing, just the title equals. So title equals starts with the… yeah, it starts with the… no. See, the way this code works is it has attributes and then it has the value for the attribute. Title equals is an attribute. Everything inside of the double quotation marks is the value of that attribute. So what you want to just do is delete the value inside of those quotation marks or delete subscribe now 90 by 300 which is the thing that is showing up. So delete that… now, save it. Then go back over to the other page.
Member: Hold on, I made that… it’s gone.
Rick: Right, okay. So the… what’s going on here is that the title tag of an image is displayed as the tool tip. And if that image.. now this is also the case for links where the title tag of a link is what’s displayed when you hover over the link. So when you don’t want that stuff to show up, what you need to do is delete the title tag. Now you can do what I just showed you which was leave the title but title equals blank or you can delete the title altogether. However, if you want to have valid HTML then you have to leave the title tag. It will show a validation error if you don’t have a title tag in place. It can be an empty title tag and then it’ll just be a validation warning but it won’t be a validation error.
Member: Okay so does that affect me with Google when they’re searching sites?
Rick: Well, you just made it so that it negatively affects you with Google. Google indexes images… Google assumes that images on your page are relevant to understanding the content of the page. And so it looks at title tags and alt tags to understand what the image is about and therefore, what the content of the page is about. Now in some cases where it’s generic and it shows up on every page, not having a title tag is probably fine. But really, from Google’s standpoint, every image you have on your site, not a background image but a regular image, every image on your site should have both a title tag and an alt tag. And Google considers both title tags and alt tags when it is indexing your page. If you do not have title tags and alt tags then your images are not helping your SEO. And if you do not have title tags and alt tags, you’re also not validating. You’re not creating a valid HTML. And if you go to a validation checker for your site, it will show you either validation errors or validation warnings depending upon how you approached it. So rather than wanting to get rid of that thing, what you really should do is not get rid of it. You should really take full advantage of it and give a descriptive title there and make sure you have a descriptive alt tag.
Member: Yeah. Alright, thank you very much.
Rick: You’re welcome. Anything else?
Member: That’s going to do it for today.
Rick: Okay. Have a good day.