What is SEO? Search Engine Optimization – manipulating elements of your website in order to appear higher in Google searches. Think of the last time you searched for something – did you click on the first result? Did you click beyond the first page of results? Result position matters!
Video Overview
What did I leave out? Leave a comment and let me know what questions I can answer!
One of the things you can work with is your image metadata (data about data, ha!). In this instance, it is information about the images added to your website.
Look behind the curtain
When inserting an image into a post, we often see the image itself.
Behind the scenes (in the media library), each image comes with several meta options.
For each image, you will see input fields for URL, Title, Caption, Alt Text, and Description.
After inserting an image into a post, this meta-information can be pulled directly into the post.
You can view what information is pulled in by clicking edit as text (classic editor) or view as html (new block Guttenberg editor).
Code for this image:
<figure>
<img src="https://pitchclipsgraphics.com/wp-content/uploads/2019/04/I-am-an-image.jpeg" alt="hands typing on the computer with the text I am an image. But there is so much more to me!."/>
<figcaption>
This is my caption.
</figcaption>
</figure>
Let’s take a look at each part of the meta data code above.
URL Meta
This is the web address for your picture. It is usually in the form of yourwebsite.com/image-file-name.
SEO experts advise to name the file something relevant like “ukulele featured post” as opposed to what mine were named in the beginning. I have countless files on my site named “screenshot-123.jpg” or “13847365093473.jpg.” :/
URL in code would look like this (Color coding only to show different parts and not necessary for the code to work):
<img src=”yourwebsite.com/image-file-name”/>
TITLE Meta
WordPress automatically adds the filename here. However, when inserting a picture, the title is not added to the meta code. The title is used for database searching. When you have hundreds of posts and want to reuse a picture, it is easier to search for “logo” than “124859503403.”
It is not currently advised to add the title to the image meta on your posts itself. Just make sure each of your images has a title in the library (usually the filename).
ALT Meta
The alt tag is supposed to describe what is actually in the picture. Pinterest used to use the alt meta as the pin description so many, many bloggers (myself included) used the alt tag for a keyword-heavy description. For example, instead of saying the image to the right is a “cover image with blue graphics”, I would have said “Check out how I can save you time and money by maintaining your website!” which does not describe the image at all.
The main purpose of alt tags are to improve accessibility by enabling screen readers to read out the alt text for visually impaired users. The alt text would also appear in place of the image if the image went missing from your server for some reason.
Alt text is also crucial for image SEO. It helps search engines understand the context of the image.
URL in code would look like this (Color coding only to show different parts and not necessary for the code to work):
<img src=”yourwebsite.com/image-file-name” alt=”This text describes what the picture actually is.”/>
DESCRIPTION Meta
The description meta is used to put in additional information about the images. It would appear IF the image was allowed to have its own page on your website but this is discouraged because it can damage SEO (Google sees it as a page with little to no text as low quality).
Use the plugin YOAST SEO to disable this.
CAPTION Meta
The caption tag is only useful for providing additional information for website visitors about the image. It is not necessary for most photos. The WordPress Maintenance picture to the right has a caption.
URL in code would look like this (note: this one is a little more complicated to manually add – you have to add all the purple sections). (Color coding only to show different parts and not necessary for the code to work):
<figure>
<img src=”yourwebsite.com/image-file-name” alt=”This text describes what the picture actually is.”/>
<figcaption>
Here is the caption of the picture.
</figcaption>
</figure>
Random Things to Note:
- To delete the caption in the block editor, delete from <figcaption> to </figcaption>
- Put all your meta information in the media library BEFORE pulling the image into the post. It does not sync with the information in the library. If you change the information in the library, you will also have to change it on each post. If you change information on the post, you would also need to change it in the library (if you want it to be a change for the image going forward).
How does this affect SEO?
In laymen’s terms, adding the various meta information tells Google more information about the image. What is the image about? What is the image? Is it accessible? Google will then rank your image higher in image searches, which tells Google that the page itself should also rank higher for text searches. It’s all related! I can’t explain the Google search algorithm (no one can!) but in general, when you boost one part of SEO it will affect the other parts!
Pin for later!
Wordpress and Website Information You Need!
Get all the latest website, WordPress, and Teacherpeneur tips right in your inbox!