Posts Tagged images
Help search engines find your photo posts
There is plenty of advise all over the Internet on how to do SEO, “search engine optimization”. Not so much when it comes to helping photographers who mainly post photos to their photo gallery blogs. Photographers are visual people, they let their images do the talking. Search engines, on the other hand, look for words. Text is the majority of what searching is all about.
Look at the situation from the searchers perspective. There are occasions when someone does an image search. If you are running Chrome, right-click on an image and there is an option “Search Google for this image”. Google will find other places where this photo is posted and it also shows “visually similar images”. You need not do anything to help this process.
Note the tip from Google (marked in the illustration here). “Try entering a descriptive word in the search box.”
Mostly people search by entering some words or or a phrase in the text box on Google, Bing, Yahoo, and other search engines. We mostly look for words, and so do search engines. People may not use the words that you thought as describing your photo. The search engines are good, they know about synonyms and will provide returns for those.
The search engine designers want to provide the answer to a user that the user is looking for, even if he has not expressed himself correctly. That is a tall order. You, the blogger, need to give the search engine a hand so your blog will come up in a search that is best satisfied by your post. This is not about tricking the search engine to favor your post, it is about helping the search engine satisfy its user. You need text that will match the search terms. Since you cannot anticipate the question, you need to supply plenty of details. Live Writer can help you with that.
So here some thoughts on how to post photos that will be found in searches.
Let’s start with a photo. There are different ways of adding it to a post. When you click Insert > Picture, Live Writer gives you two options: “From your computer …” and “From the web …”.
Let’s start with the first method, inserting a photo that is stored on you computer. You probably have attached tags and other metadata to the photo. None of that matters to Live Writer, except the title. Live Writer generates the HTML code in accordance with some preferences that you have set up. The code for the small picture of the green plant looks like this:
Note that the title, “Green” for this photo, is shown as the “img title=” and also as “alt=”. It is these two pieces of information, or “attributes”, that search engines can learn from the code. And it is here where you can help them along.
Give your photo an accurate and descriptive title
The title of the photo, contained in the HTML code, is the most important text associated with an image in your blog. Make it accurate and descriptive so it can be found when someone searches for those words (or synonyms). This is also the text that a viewer sees when hovering the pointer over the image.
The second text item in the code, the “alt” attribute text, or “alternate text”, can be even more useful. That text is not seen by the viewer (except when the image cannot be displayed, and just the place-holder area and this text appears). But the search engines read this text.
Take advantage of the alternate text
Think of this alternate text as what you would say to a blind friend when describing this photo. Give all the needed information to allow a mental image being formed from your description. Keep the text concise but complete. A sentence or a small paragraph should suffice. Here is some text that might go with the photo of the green plant:
This photo is of a lush, green plant as seen from above. The tip of the plant, with the tiniest new leaves just unfolding is to the right and below center of the image. There are no colors other than green in this photo. The newest, budding leaves are the lightest green. Older, larger, leaves, farther in the background are darker shades of green. The leaf-edges have tiny triangular serrations. The leaf surfaces are rich in texture showing the structure of the leaves.
You might not want such gushy, detailed information to appear alongside your photo, but it is fine to have it there for the search engines (and blind readers). Make it readable text. Do not provide a list of your tags. Search engines are “offended” by lists of words since that is how “optimizers” have tried to trick them in the past.
How do you insert the alt text? Click the Source tab at the bottom left of the Live Writer window to see the generated HTML code. Find the alt attribute for the photo of interest (Tip: I use a temporary line of equal signs above and below a photo so I can find it easily in the code.) Replace the alt text between the quotation marks with your full description.
Inserting a photo from the web
When you select Insert > Picture > From the web… the dialog allows you to specify the web address, URL, of the image you wish to insert. After you enter the URL, Live Writer retrieves the image from the web and shows it in the dialog. It also shows the size of the image. You can change the image size after insertion, however, it is best for speedy performance, if the original size will be used in your blog post.
The image will be inserted at the location of the cursor after you click Insert.
Live Writer offers a Hyperlink insertion option. This presents a dialog for entering the URL that the image should link to. In the Advanced section of the dialog you can enter the title text as well as the alternate text. The Live Writer dialog calls this “Rel:” . You can enter as much text as you wish. It is easiest to have this text prepared beforehand so you can just paste it in. This method will generate the full HTML code and you need not patch in the alt text in the source view.
One caution: The Hyperlink insert option does not allow you to modify an already attached link. The URL will be retained in the new dialog, however, the title and alt text will be blanked out and you need to reenter them. A bit of a nuisance, but that is how Live Writer works.
One more thought: The more of a story you provide, the more there will be for search engines to work with. It may be difficult for you, a visual artist, to describe your works in text, but if you do, there is a much better chance for your future admirers, and customers, to find you!
© 2014 Ludwig Keck
To show a photo in a post it has to be located somewhere on the Internet. You can use Windows Live Writer to upload images to your blog service image store, or you can do it manually. You can also insert the address of a photo stored on another service on the web. Flickr makes it particularly easy to source photos for a blog.
Getting your photos to Flickr
Flickr, the popular photo-sharing service from Yahoo!, is widely used by bloggers for their photo storage. To use it, you need an account, of course. Flickr offers a free account and a Pro account, for many bloggers the free account is quite sufficient. Windows Live Photo Gallery can upload photos directly to your Flickr account. To upload, select the thumbnails then click the Flickr symbol in the Share group of the Home ribbon.
If this is the first time you are uploading to Flicker, you will see a dialog telling you that “Windows Live requires your authorization before you can publish on Flickr”. The Authorize button opens the browser and takes you to your Flickr account. Sign in and step through the authorization process. Close the browser when finished. Back in the Live Gallery dialog, click Authorize again and the upload process starts. You need to go through this only once. After that, Live Gallery will remember the settings and the upload proceeds smoothly.
The upload dialog allows you to choose the account and the “set”, Flickr-speak for album, for the uploads (ignore this, it doesn’t work), you can also specify the “Photo size”. Live Gallery will resize your photo to this size before uploading. I suggest you choose 1024 pixels. More on this shortly. The last option is “Public” or “Private” (several settings). Leave this on public. Then click Publish. After the upload the browser opens and you can view your uploads in Flickr and select the set and add other details.
If you use the free Flickr account, your original uploaded photos will be inaccessible. Flickr makes JPG copies, the largest being 1024 pixels on the largest side, plus several smaller ones. These will be accessible to you. For use in a blog, you do not even need the 1024 px size, however it might be nice to link to the large size so your readers can see it in good detail. More on this below.
Getting the URL for Flickr photos
Once you have photos on Flickr, you will need the web address, URL, of a photo to insert into a blog post. Go to your Flicker photos and select the one of interest. Click on Actions (above photo on left) and select View all sizes. Select the size that you wish to insert into your post, or the next larger size if what you want is not there.
Right-click on the image. In the menu select the web address. If you are using Internet Explorer, click Properties to get to the address. Copy the address (Ctrl+C). Paste the URL in the Live Writer Insert – Picture – From the web… dialog.
The URL you got is the address for the actual image. There is one other address you will want. Back in the Flickr page for the photo, click on Share (see illustration here). Click in the text box under Grab the link and copy this address. This address is actually the address of the Flickr page for this photo.
You can use this as the hyperlink assigned to the image in your post. Maybe this is getting ahead of the story just a bit, so let’s go over the details for inserting a photo into a blog post.
Inserting a picture in Windows Live Writer
Above I explained how to get two web addresses, one to the image itself, the other to the Flickr page that shows the photo. Here is how to insert the photo into the text of a blog post in Live Writer.
Pick the place for the image. In the Insert group (Home tab), or Media group (Insert tab), click Picture. Click From the web… in the dropdown menu. This opens an “Insert web image” dialog. Paste the URL of the image into the the address field. A view of the photo will be shown in the main area. If you do not see this small image, then the address you entered is not valid. The Flickr page address will not work here. This must be the URL of an actual image. Click Insert and the picture will be placed into your post text. I have done this here with the barn photo.
Note that when you click on this picture, the “Picture Tools” ribbon will be available. There will be just two “Picture styles” offered. A frame (shown in blue) or no frame. This is true for all images sourced from a web location. The Size options will be available. The best size to use is Original, that is as it is stored in Flickr. You can choose a smaller size, even specify the number of pixels for width or height. When a reader views your post, the stored size is downloaded to the browser and resized as specified. If you chose Original then that resizing will not be needed. You can select a larger size than original and the browser will scale the image up. It will, of course, loose resolution, so this is not recommended.
You will want to offer your reader a larger view of your photo, so send your fan back to your Flickr photo. You can use a hyperlink to the largest image that was shown in the Flickr “View all sizes” page. Such a link will show the photo bare of any other details in the browser. It may not be centered or set in an appealing way.
This is where the other address comes in. It takes your reader to the photo page with all the additional info around it. Your reader can click the photo to see it in the slide view mode. You can take her or him directly to that view. Remember the address you got for the page, it looks like this: http://www.flickr.com/photos/ludwigkeck/5711283156/ If you append the word “lightbox” to it, like this: http://www.flickr.com/photos/ludwigkeck/5711283156/lightbox then it takes your reader directly to the photo in slide view mode. Much more appealing.
To attach a hyperlink, click on the picture, then click the Hyperlink icon in the ribbon. Paste the Flickr page address into the address field, and click OK. I have done this on the little barn photo above, click on it to see how it works.
There is more. You can take your reader directly to a running slide show of one of your sets on Flickr. Here is how:
Link to a Flickr slide show
Once the slide show starts, move the pointer to the upper right corner and click Share. In the dialog you can copy the address to the slide show. Click in the field to select it, then press Ctrl+C to copy it. It will look like this: http://www.flickr.com//photos/ludwigkeck/sets/72157626699391108/show/
When your reader clicks on such a link, the Flickr slide show will start. Try it here on the picture on the left.
So you see, Flickr makes sourcing photos for your blog quite easy. There are some rules that Flickr has set up concerning such use. I will quote from the Flickr Community Guidelines:
Flickr Community Guidelines – excerpts:
- Do link back to Flickr when you post your Flickr content elsewhere.
Flickr makes it possible to post content hosted on Flickr to other web sites. However, pages on other web sites that display content hosted on flickr.com must provide a link from each photo or video back to its page on Flickr. This provides a way to get more information about the content and the photographer.
- Don’t use your account to host web graphics, like logos and banners.
If we find you using your account to host graphic elements of web page designs, logos, icons, and other non-photographic elements on other web sites, we will warn you or delete your account.
- Do upload content that you’ve created.
Respect the copyright of others. This means don’t steal photos or videos that other people have shared and pass them off as your own. (That’s what favorites are for.)
- Don’t upload anything that isn’t yours.
This includes other people’s photos, video, and/or stuff you’ve copied or collected from around the Internet. Accounts that consist primarily of such collections may be deleted at any time.
These rules help us all, so be observant of them.
Other articles you might like to view:
- Sourcing images from the new SkyDrive
- “Insert Picture” in Live Writer – a look behind the curtain
- A SkyDrive Photo Album in your Blog Post
© 2011 Ludwig Keck
UPDATE 10 December 2011: SkyDrive has been updated, URLs are again easily accessible. See Sourcing photos from SkyDrive is now easy.
Illustrating blogs with images makes them more interesting and informative and Live Writer makes the process of inserting pictures very easy. You can use photos from your computer and Live Writer takes care of uploading them to your blog file store. Images can also be sourced from other locations on the web. My post “Sourcing blog post images from SkyDrive” explained the process in detail. The recent facelift of SkyDrive introduced changes that necessitates these revised instructions.
The look of the new SkyDrive has been handsomely improved, more of that is covered in my post “The new SkyDrive – Bouquets and Brickbats”. When you display an album the thumbnails are larger and show the image in correct proportions. The next level is similar to the slide show view in the previous version.
There is no additional view, as before, that shows the image in an otherwise empty browser window. That is where one got the image URL in the past.
Sourcing with “Embed” code
REVISED AFTER POST – The “embed” code does not work! It is stripped during publishing.
DO NOT USE THIS METHOD!
Before inserting an image from your SkyDrive, make sure that the album containing the photo is shared publicly. The easiest way to bring a picture from SkyDrive to a blog post is the “embed” method. Note the Sharing group in the information pane to the right of the photo. There is a link “Embed”. Click it to obtain the code. In the next page click in the code box. It will be selected, highlighted, and you can copy it with Ctrl+C to the clipboard. Then, in Windows Live Writer, just place the pointer where you want the image and press Ctrl+V to paste it in. You don’t need to do this in Source view, this works fine in Edit view.
Here is what you get:
It looks like this and there is a hyperlink to the SkyDrive page of this image. It work in Preview, but during publishing the code appears to get stripped.
Nice, quick, you couldn’t ask for more. Or could you? Click on the image and the tools in the Ribbon are greyed out. There is no Picture Tools tab. You cannot change the size, location, nor specify text wrapping. Yes, clever blogging geeks can make changes to the code in Source view, but even that is a rather aggravating. If you can be happy with an illustration as shown here, you can use this method. There is one nice feature: A hyperlink is already present that takes the reader to the full view of the image in SkyDrive, with access to the other pictures in the album (and other public albums and files). If this is not to your liking there is another way.
When this is published all you get is an URL text that may or may not connect to something. So this method does not work! Here in Windows Live Writer is an image that looks right and works in preview, but see what you really get in the actual published post:
Sourcing the image directly
To get control over the image size and placement you can get the address to the image – sort of. In the full view SkyDrive, right-click the image. You may see Copy image location, or Copy image URL, or Copy image address. Some browser do not offer the image address (URL) directly, including Internet Explorer, but you can get it by clicking Properties at the bottom of the menu and then copying it from the properties listing. This address can be used in the Live Writer Insert Picture dialog. Click Picture in the Insert group of the Ribbon, then click From the web… In the next dialog paste (Ctrl+V) the address of the image. A preview of the image will be shown. If you don’t get the preview, you did not get the address correctly.
Click Insert and the picture will be inserted full size into your post. It likely will spill over beyond the post margin. Click on the picture to select it, the Picture Tools tab will be displayed. Click Lock aspect ratio, then select a size, Small, Medium or Large. You can manually set the size, of course. You can set the alignment and margins around the picture and a simple frame, or none, as is usual with web-sourced images. Do not attach a hyperlink to the address you used for the picture. It will not work. You cannot show the image full-size in a browser window. You can get the address of the image in SkyDrive from the browser address bar. This will give your reader access to that image in your SkyDrive and all other public material.
If you do not wish your reader to have access to your SkyDrive album (and more), simply set the link setting in Picture Tools – Properties to No link.
Sadly, the self-running slide show feature is no longer available in SkyDrive. Let’s hope that this is just a temporary shortcoming.
© 2011 Ludwig Keck