How to add alt text to webs.com

Adding ALT text to webs.com websites.

Adding ALT="TEXT" to Webs.com template websites

So, you have made your webs.com website using a really great looking template, added some cool text, inserted your best photos and then you read that adding alt text to your images makes it better for search engines and improves the experience for those with impaired vision or quirky browsers.

A quick search on how to add alt text to webs.com sites turns up some complicated or non working instructions, well..... here is the answer!

 

ALT="TEXT"

The ALT attribute is added to an image tag to associate the image with some text, a description of the image would be a good start. Search Engines can't read your photos, but they can read the ALT="TEXT" Description.

First things first - A new browser tab

First job is to open your website (not in the editor) in a new window or tab. You have several choices how to do it. You could type the name of your site into the URL bar of a new browser tab or from the webs SITE BUILDER click MANAGE PAGES and then the VIEW button, like this:

 View Home

Find your image on your published web page (not in the editor)

I am using FireFox for this example. Right click on your image and choose

View Image Info, like this:

 View image info selection

A window will open with some information that we will need later. You can copy this to a text file, or keep it onscreen for use soon. One bit we are interested in is LOCATION: and then the address of the image.

For example, the bit I need for this website is:

 

http://add-alt-text-to.webs.com//IMAGE.jpg

 

yours will be different from mine and different for each image you have.

 Image Information window

 The other bit of information that's worth remembering  or saving is the DIMENSIONS. 200 × 100 for my image, yours may be different. Use the (scaled to) dimensions if they are visible.

 

Screen Grab of Image Dimensions in Image Properties for alt text

In this example you would make a note of 252 and 232 for the width and height

 

To the webs SITE BUILDER

Flip or switch back to the webs SITE BUILDER. Select EDIT WEBSITE and Select the page with your image on from the drop down list.

To select the image to add the ALT="TEXT" to

Click on the photo you want to add text to. Click on the photo again to ensure the picture is selected. (Sometimes three clicks are required to get the image selected correctly, just be patient).

Like this:

  Image Selection box for ALT Text HTML Editing

There are 8 Dots around the image with an icon bar across the top of the image.

Buy Gold American Eagles

Adding the correct HTML

With the image selected and the white box showing around the image, click the button called HTML - Its under the VIEW button, Here:

 webs.com HTML Button for ALT Text entry

The HTML BOX

A new box pops up. Its asking for CUSTOM HTML. Lets give it some.

For my example image I am going to give it this:

<B><img src="http://add-alt-text-to.webs.com//IMAGE.jpg" alt="This is an Image" width="200" height="100"></B>

 Custom ALT TEXT HTML entry

 Click INSERT HTML button to save the HTML to your page.

What do I have to enter?

Each image on each website will need to have a different bit pasted into the example below.

From the View Image Info screen replace the XXXXXXs with your images LOCATION:

Replace the YYYs and ZZZs with its Dimensions (only the numbers, not the px)

Replace the "This is an Image" with your ALT TEXT - Keep the Quote marks around the text, put whatever text you think is appropriate.

 

 

<B><img src="XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX" alt="This is an Image" width="YYY" height="ZZZ"></B>

 

 

There is a space between alt="This is an Image", width="YYY" and height="ZZZ"

XXXXXXXXX contains the full path to the image including the image name and extension. Copy and Paste it out of the View Image Info box.

 

Where has my image gone?

Hopefully, now, your image has changed from your picture to a rather bland grey box like this:

 webs.com </HTML> widget place holder image

This is GOOD, don't panic! You are supposed to see this. If you see the grey box and still see your image below/above/next to it, then you didn't have the image selected correctly before clicking the HTML button.

No drama, just delete the grey box, select your image by clicking it, click it again, then press HTML and follow the instructions for entering the HTML again.

How do I know that its worked?

Usually the ALT Text is only displayed when the image is not displayed, so, to check that your ALT text is looking good, just open your web page in a new browser window or tab (not in the editor) right click on your image and choose,

View Image Info, Like This:

 

 View image info

 

A new window appears, as before, but now showing some Extra Information:

 

 Image Info showing Associated Text from our ALT=TEXT

 Associated Text: This is an Image is the ALT="This is an Image" that I added in the example

Good Job and Well Done on adding alt="text" to your html

Try adding a floating tool tip to your images in webs.com

Click Here to take you to the page that shows you how to add the floating tool tip to your photos using the title="" attribute in the Custom HTML editor