How to Title & Size Images for SEO

Titling & Sizing Images for SEOIn last month’s SEO Quick Tip we talked about the importance of page titles and descriptions. If you missed it, you can check it out here. In today’s post, we’ll be talking about the correct way to save and title your images to best optimize them for SEO.


Titling Images for SEO

 

Use the right file names

To help your images rank well, it’s important to save images using file names Google can understand. Google can’t actually “see” your images unless you are saving them using file names that accurately describe what each image is about. For example, if you were saving this cute pug dog image for your blog…

pug-dog-in-a-blanket…instead of saving it with a random file name like DSC9324.jpg, you would instead save it with a file name that accurately describes the image like pug-dog-in-blanket.jpg. Be sure to remember the keyword you are trying to rank for and use that at the beginning of the file name (see last month’s post to learn about the importance of this). In this example, the main keyword is “pug dog,” so it was placed at the beginning of the file name to help this image have a better chance of pulling up when someone enters “pug dog” into a search engine.
 

Add Alt Text to Images

Adding Alt text to each of your images is important so there will be descriptive text visible if, for whatever reason, an image can’t be displayed (maybe a reader has turned off images in their browser for example).

How to add alt text to images in Blogger:

 
First upload an image to a post or page.

adding-alt-text-to-images-in-blogger-example
Then click the HTML button to switch to the HTML view. Copy this code:

alt="description of image"

…and paste it into the html just before the final /> in the code. Replace “description of image” with a description of your image.

adding-alt-text-to-images-in-blogger-example-2

Do this for each image in your post. To see if it is working correctly, after the post is published, temporarily disable your browsers images and you will see your alt descriptions instead of your images.

How to add alt text to images in WordPress:

 
WordPress makes adding alt text to images super easy using the Yoast SEO plugin. Start by uploading an image to a post or a page by clicking the Add Media button.

adding-alt-text-to-images-in-wordpress-example
After uploading your image to the media file, on the right side of the screen, you’ll see a gray area that will allow you to change or add info for the photo. In the Alt Text section is where you can add the description for your photo. Then click Insert Into Post to add the photo to your post. If you don’t add any alt text to your image, WordPress will automatically use the image title as your default alt text.

adding-alt-text-to-images-in-wordpress-example-2

Do this for each image in your post or page. Again, to see if it is working correctly, temporarily disable your browsers images and your photos will be replaced by your alt descriptions.


Sizing & Saving Images for SEO

 

Size Images Correctly

Image load time can have a huge impact on your site’s overall speed and SEO. Re-sizing images before uploading them to your site helps your site load quickly and will give your SEO a boost. Even if you are displaying a large image (say a 4000 x 2000 pixel image) at a smaller size within your post (at say 400 x 200 pixels), your site still has to load the entire image, which slows down your site and, in turn, negatively impacts your SEO. Re-sizing your images to the exact dimensions you want them to appear in your posts is a key step to optimizing your images for SEO.

Photoshop is the best tool for resizing images, but if you don’t have Photoshop, Pixlr is a free service you can use to do this. Here’s how to easily resize a photo using Pixlr:

1) Hop over to Pixlr, scroll down and click Launch Web App under the Pixlr Editor option.

2

2) Click Open Image from Computer and find the image you want to use from your computer.

pixlr example

3) Your image will appear and will be ready for editing. At the bottom of the image you’ll see the current image size. My sample image is currently 4000px wide, which is WAY too large to be uploaded to a blog. So I’m going to change it to the width of my post area, which is 800px wide. In the top navigation bar, click Image and then Image size…

pixlr example

4) Change the image width to the width of your post area (if you need to know your post area width, contact us and we can tell you). The height of the image will automatically adjust to keep the proper proportions. Click OK.

pixlr example

5) Now you just need to save the re-sized image, but before you do, read on to learn how to reduce the file size before saving.

Reduce the file size of images

 
The final step to saving your images is making sure your re-sized images are saved in the smallest file size possible, while still maintaining a good quality image.

How to reduce file size of images in Pixlr

 
To reduce the file size in Pixlr before saving, simply drag the quality bar down to 59 or lower. The lower you go, the more pixelated the image will become, so setting it right around 59 will allow for a nicely compressed file size while still maintaining a good quality image.
 
pixlr example

How to reduce file size of images in Photoshop

 
If you are using Photoshop, after re-sizing the image, go to File > Save for Web & Devices. Then set the Preset to PNG-24 as follows and then hit Save.

photoshop example

If you are on WordPress and have a lot of existing posts with images that are not SEO optimized, WP Smush is a great plugin that will “smush” the image sizes of your existing photos for you so you won’t have to take the time to manually fix the file sizes of each one.

If you have any questions about anything discussed here, please leave them in the comments and we’ll do our best to answer them.

Posted by: Erin

Spring Bucket List Printable

SPRING-BUCKET-LIST-PRINTABLEShed your winter coat and start enjoying the warmer weather with the help of our free Spring bucket list printable. Creating a bucket list is a great motivator to get outside and get moving with your family!

spring bucket listYou can write your list directly on the printable with a permanent marker or you can place the printable in a frame behind glass so you can use a wet erase marker and wipe it off with a wet cloth when you are done. The zip file contains both an 8×10 and 12×18 printable (you may need to trim them slightly to fit your frame).

Happy Spring bucket listing!

For personal use only.

Posted by: Erin

Join Our Team

Now Hiring
Due to a designer leaving soon to have a baby and increased work flow, Designer Blogs is now hiring! We are looking for two qualified designers to join our amazing team of talented designers.

Job Description:

Designer Blogs designers are responsible for creating and adding designs to our template and premade shops. They are also responsible for fulfilling accessory orders, premade orders, custom blog, and custom website orders as assigned to them. Our designers set their own hours and accept as much or little work as their time permits–however, it is expected that any work accepted be completed in a timely manner using professional and timely communication skills. This is a work-at-home position.

To apply, you must:

  • have the ability to design and install for Blogger blogs AND self-hosted WordPress.org blogs using the Genesis Framework and StudioPress Child Themes
  • be proficient in Adobe Photoshop, InDesign and/or Illustrator
  • have a complimentary design style that would represent the Designer Blogs brand well
  • be loyal, friendly, trustworthy, and have exceptional customer service skills
  • be self-motivated to add and update designs to our template and premade shops
  • be capable of communicating clearly and frequently with assigned clients via email (and occasionally via phone or Skype)
  • be willing to go above and beyond for assigned clients
  • be dependable and able to follow through with promised dates and deadlines

 
If you meet this criteria and are interested in being considered, please click the link below to submit your application. We will contact you if we feel you are a good fit for our team (do not contact us).

Posted by: Erin

Mind Over Matter | Free Printable

Mind Over Matter Free PrintableI created this printable for a photo/art gallery that I am putting together in my new office space and thought I’d share it as a free printable because I absolutely love the concept of “mind over matter.” Have you read The Secret? If not, I highly recommend it. Our way of thinking really does have the power to bring to pass amazing realities. Allowing our mind to visualize the things we want to achieve in life (better relationships, health, success, wealth, etc.) will attract those things to us. Positive thinking has the power to change us as individuals and the world around us. I wanted this to hang in my office to help me constantly remember the direct influence my way of thinking has over changing my life. I hope it helps you remember that too!

Mind Over Matter Free Printable

The download includes four print sizes: 4×6, 5×7, 8×10 and 11×14. Enjoy.

For personal use only.

Posted by: Erin

Page Titles & Descriptions | SEO Quick Tip

3 Quick Seo TipsIf you have a blog or website, it’s important to understand the importance of Search Engine Optimization (SEO). The key to SEO is understanding how search engines view your website. Search engines are amazingly powerful and sophisticated pieces of machinery but they can’t interpret and understand a website in the same way that human’s can. SEO is what helps search engines “see” your website so that they can know how your information might be useful to people. Understanding SEO is vital in improving your search engine rankings.

Because SEO is so important, we are starting a post series called “SEO Quick Tips” where, every few weeks, we’ll be giving you a quick SEO tip that will help give your search engine rankings a boost.

Today’s focus: page titles and meta descriptions.


Page Titles

Page titles are the first item we’re discussing in our SEO series because title tags are considered one of the most important elements of SEO. Page titles are the titles of every post and page on your site. Using keywords in page and post titles can help your pages rank higher in Google as those keywords will often be highlighted as links to your website. Here’s an example of how our Ultimate Blog Planner is highlighted in Google when someone uses the search term “blog planner”:

Google Example

TIPS FOR WRITING SUCCESSFUL PAGE AND POST TITLES

  • Keep titles under 65 characters (including spaces)
  • Place keywords at the beginning of the title
  • Use your brand name at the end of the title
  • Use pipes (|) to seperate important keyword phrases
  • Keep phrases short and simple (eliminate these types of words: and, if, but, then, etc.)
  • Your titles should be short and concise and should accurately describe the content on the page

 


HOW TO SEO OPTIMIZE PAGE & POST TITLES

IN BLOGGER

SEO-BLOGGER-TITLES
By default, Blogger displays your blog title in front of each page or post title like the example above (ie: BLOG TITLE:POST TITLE)–however, this is not optimal for SEO. To change all of your post titles to be automatically SEO optimized (ie: POST TITLE | BLOG TITLE) follow these steps:

Step 1:

Log into your Blogger Dashboard and go to Template > Edit HTML. Click anywhere inside the code area and press CTRL + F to open the Blogger search box.

Step 2:

Search for this code:

<title><data:blog.pageTitle/></title>

Step 3:

Replace that code in the HTML with this code:

<b:if cond='data:blog.pageType == "item"'>
<title><data:blog.pageName/> | <data:blog.title/></title>
<b:else/>
<title><data:blog.pageTitle/></title> </b:if>

Click save and all of your past and future post and page titles will automatically be SEO optimized.
 

IN WORDPRESS

Step 1:

Make sure you have the latest version of the Yoast SEO plugin installed and activated.

Step 2:

Navigate to the post you want to edit the title on either by editing an existing post or creating a new post.

Step 3:

Scroll to the bottom of the page until you find the Yoast SEO section. The Snippet Editor will show you a preview of how the page will be displayed in search results. Click the Edit Snippet button and in the SEO Title area type in your title. Then click Update or Publish to save the changes.

Yoast SEO Plugin


Meta Descriptions

Although meta descriptions do not directly affect your search engine rankings, they do increase the likelihood of people clicking through to your site, which will indirectly improve your rankings. If you leave your meta descriptions blank, then Google will pull content from your page to display as the snippet. If you want control over what descriptions are displayed, then it’s wise to write up your own descriptions.

TIPS FOR WRITING SUCCESSFUL META DESCRIPTIONS

  • Keep description under 160 characters (including spaces)
  • Describe what the content of the page is about using sentences
  • Use quality and concise descriptions
  • Use unique meta descriptions for every page
  • Use a call to action to motivate people to click
  • Inspire curiosity with the wording you choose
  • Think about the keywords you are targeting and use those terms in your description

 


HOW TO ADD META DESCRIPTIONS TO POSTS AND PAGES

IN BLOGGER

STEP 1: ENABLE META DESCRIPTION FOR HOME PAGE

On your dashboard go to Settings > Search preferences > Meta tags > Description and then click the Edit link. Then select Yes. This will open a little box that will allow you type in a meta description for your site. Be sure to save the changes.

Enabling Meta Tags in Blogger

STEP 2: ADD META DESCRIPTIONS TO EACH POST AND PAGE

After you’ve completed step 1, you’ll now see a search description option on the right side of your post or page editor (Note: this will only appear after you’ve completed step 1). Click on Search Description and it will open a box where you can type in the meta description for that page or post. Click Done when you are finished. Do this on all past and future posts and pages for best SEO.

Enabling Meta Tags on Blogger Posts and Pages

IN WORDPRESS

Step 1:

Make sure you have the latest version of the Yoast SEO plugin installed and activated.

Step 2:

Navigate to the post you want to edit the description on either by editing an existing post or creating a new post.

Step 3:

Scroll to the bottom of the page until you find the Yoast SEO section again and click on Edit Snippet. This time, edit the meta description. Then click Update or Publish to save the changes.

Yoast SEO Plugin

Questions about anything not covered in the post? Leave them in the comments and we’ll do our best to answer.

Posted by: Erin

Menu Title
×