If you know me you know that I come from a programming background. My skillset was very much started on the backbone of logical programming. Design, while I love it, is not my strongest skill so when I discover a great tip or trick I always share.
Here is todays CSS tip:
Using the "box-sizing: border-box" item
SEO can seem ridiculously confusing, make you beleive you have no real concept of ROI and worst of all, make it very hard to see value for money.
Fortunately, there are HEAPS of free SEO resources out there and lots you can do yourself, for free that will enhance your websites search engine optimisation.
Below I've listed some easy to do, no cost actions you can address on your website to help you improve your SEO visibility via your images.
Every time you add an image to ANY page of your website you should consider how it can help you. Sure, if it's a product image, it has to be a consistent theme to the rest of your website, clear, concise and be a correct representation of that product.
What is can also be is a great tool to attract your ideal target market to your website.
CHALLENGE: Google can't read images. Sure you can find other instances of an image on the web via Google, but an image by default has no text. Because of this, its VERY important how you treat any and all images on your website.
Search engines get the info from your images by reading:
For example: I'm looking for a 'boho crochet top' for a Christmas party (remembering Christmas is very hot here in Australia). For Google to show me an image related to my search it has to somehow know that image on your website is of a crochet boho top right? So its up to you to give Google this info and the easiest way to do this is these three easy steps below.
1: Name Your Images
So you may have three different tops that match that description on your website but they don't show up in any search - because - they don't have any text related to that image identifying them with that search.
RESOLUTION: Name your images carefully keeping in mind, what clients may search for and how specific you want to get with your descriptions.
ACTIONS: Before you even attempt to upload any image to your website, make sure it has the best possible image name.
2: Give Your Images Captions
Captions are another way to enforce what your image is about and how that is relevant to your clients Google Search.
RESOLUTION: Give your images a meaningful caption that is short and to the point. Think about how your client may possibly find you and use those search terms (in a logical way) in your image caption.
ACTIONS: ASAP on upload, edit your image and add the caption you have decided on. Its very simple and easy to do it now but its mind numbingly boring to go through your entire website at a later date to do hundreds of images. Make this part of your image upload habits.
EXCEPTIONS: There are occasions where a caption on your image doesn't jell with your layout, theme or style. If that is the case, don't be scared to leave it off. While ideally you want all three characteristics of your image to be covered, if you are missing a caption, but overall are impressing clients with your design, don't stress over it.
3: Set Your Alt Tags
An 'ALT tag' is shorthand text we use to refer to the ALT attribute within in the image.
ALT tags are used with screed readers to explain to sight disabled clients what this image represents. Its also a great way to (again) reinforce what this image represents to Google.
Using best practices on your website and including ALT tags on all your images will mean your website has a strong accesability factor.
ALT tags are NOT visible so you don't have to worry about moving your image or compromising your design.
How To Set Image Tags
This step assumes you use Weebly as your website platform, html is shown below.
The HTML Way To Set Alt Tags On Your Images
If your website is hard coded HTML you will need to adjust the code behind your image to set your ALT Tag.
This is the html you image will use:
<img src="myImage.jpg" alt="This is your ALT Tag text"> (There may be other attributes used in the tag)
NB: if you are fairly new to html remember that the <img> tag in html is one of the few tags that is self closing.
IE: This tag <html></html> you can see is actually two parts, the open tag "<html>" and the close tag "</html>"
The image tag won't work this way. It closes itself. So you open the tag like this "<img" apply your image attributes here and then to close the tag its simply a ">".
You can't open and close an image tag like this "<img></img>" It won't work.
Small business owner, web developer and programmer.
Search The Website