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!
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 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:
I am using FireFox for this example. Right click on your image and choose
View Image Info, like this:
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:
yours will be different from mine and different for each image you have.
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.
In this example you would make a note of 252 and 232 for the width and height
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).
There are 8 Dots around the image with an icon bar across the top of the image.
With the image selected and the white box showing around the image, click the button called HTML - Its under the VIEW button, Here:
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>
Click INSERT HTML button to save the HTML to your page.
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.
Hopefully, now, your image has changed from your picture to a rather bland grey box like this:
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.
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:
A new window appears, as before, but now showing some Extra Information:
Associated Text: This is an Image is the ALT="This is an Image" that I added in the example
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