When creating content in places that allow both links and images, you can place images in your textual content to break it off and lead people to products which are related to your articles.

Image Styling and Linking

The following are some useful styles you can use when placing images:

float: (left | right)

Makes the image float to the left or right of the text near it.

<img src="URL" style="float: left;" />

<img src="URL" style="float: right; padding-right: 0.5em; padding-bottom: 0.25em;" />

padding-left: 0.5em;

padding-right: 0.5em;

padding-bottom: 0.25em;

Padding attributes create a buffer of space around your images.

When using float: left; be sure to add padding-right: #.#; if necessary

When using float: right; be sure to add padding-left: #.#; if necessary

Padding bottom will prevent text from running right up against the edge of an image.

If you want an equal buffer around all sides of an image, use padding: #.#;

margin-left: 0.5em;

margin-right: 0.5em;

margin-bottom: 0.25em;

Margin attributes create a buffer of space around your images.

When using float: left; be sure to add margin-right: #.#; if necessary

When using float: right; be sure to add margin-left: #.#; if necessary

Margin bottom will prevent text from running right up against the edge of an image.

If you want an equal buffer around all sides of an image, use margin: #.#;

The difference between padding and margin is that padding is space considered to be within the block of an item while margin is external to it.

If you want a color around an image, give your image a background-color and a margin. If you want space between the color around your image and everything else, add a margin as well.

As you can see, this image is floating to the left of this text. Placing multiple images floating in different ways can be problematic between browsers, though the easy way to do so and have it look right is to place each section in div tags.

The problem with that is your text then may not look the way you want it to either.

This time, our image is floating to the right side of the displayed text. For longer articles, you might place an image floating one way near the front of the title and an image floating another way near the end of it.

Making your image into a link:

When you place your images, you can turn them into links.

If you place an item you sell on a page, you might make it into a link to that item on your store.

<a href="URL"><img src="URL" style="float: right;" />

<a href="URL"><img src="URL" style="float: left;" />

Since I don’t sell beer online currently (now that is a good idea!), I’ve instead decided to include an image of an old slide I have lying about which appears to be an authentic slide from the making of Star Wars: Empire Strikes Back. Additionally, I have added a title tag to the link so that when someone places their mouse over the image they see what it is.

Being no expert, I couldnt say for sure…but if it is a fake, someone went through a good deal of trouble to make it.

Now that you know how to place arbitrary images into html text, I would like to point out that you can do the same thing with blocks of text.

The easiest way is to place a floating div inside of your content.

Floating Divs

<div style="float: right;">Some Text</div>

That will create a block of text and float it to the right side of the page.

You can place informational blurbs, links, lists, and just about anything else inside of it that you want.

Some good attributes to place in the style tag of your floating div:

width: 200px;

The width in pixels to make the div

border: 1px solid #000000;

Width of the border, style of the border, color of the border

padding: 1em;

How far to place internal text away from the edge of the containing div

margin: 1em;

How far away from external content ( in character widths ) to keep the div

background-color: #DEDEDE;

The color to fill the background in with

color: #000000;

The color to make the non hyperlink text within the box

If you find yourself using floating divs a lot, you might want to create a style for them in your style sheet ( or add one to your CSS Inserts if you use Atahualpa ) that defines the typical settings you want. Then you only have to set the ones that you want to be different than normal when you create them.

For example, you could set all of the above in a style called co-right.

To place the div, you would use <div class="co-right">Your Text</div>

TO override a particular style, you would add a style="" section with only the overridden style set.

As you can see, the box floats to the right side of this text. As with images, be sure to use padding if your text is running right into your bordered divs.

The div box is a container which can hold other html items within it. In fact, it is used by most modern WordPress themes to display different sections of pages.

If you have a large display, resize your window a few times and see how the divs react. They can be a bit erratic and hard to get just right when you first start using them…at least on large display areas.

However, if you have a maximum width or fixed width set for your page, then this becomes a lot less problematic.

You can place images inside of divs to help position them a bit more reliably.

You can also use styled divs ( or even styled paragraph tags ) for callouts:

A Styled Paragraph Callout

The above paragraph uses the following styles:

• text-align: center;
• border: 1px solid #000;
• font-weight: bold;
• color: #D00;
• background-color: #EEE

The #XXX notation is shorthand for #RRGGBB, which each single digit being repeated so #FFF stands for #FFFFFF.

And again, you could create a class so that you only had to enter class="whatever" rather than each style attribute every time.

.whatever {

text-align: center;

border: 1px solid #000;

font-weight: bold;

color: #D00;

background-color: #EEE;

}

That is how you would add such a style to your style sheet or CSS Insert.

With the Platinum SEO plugin installed, you can:

Specify the meta description for each page on your site

This can help significantly when competing with other pages for clicks on search results.

Specify the meta keywords for each page on your site

Not terribly important these days, but still nice.

Set the noodp robots tag

This tells Google to display your meta description as the page summary under your link on their search engine.

Set the noydir robots tag

This tells Yahoo to display your meta description as the summary under your link on their search engine.

Automatically do 301 redirects for permalink changes

This is great for those times when you need to change a permalink for some reason.

Specify rewriting of particular types of page titles

Particularly handy for short "Page" page names

Set the noindex robots command for various types of archives, comments, and feeds

Add nofollow automatically to particular types of links

Good for preventing the passing of too much page rank to your archives pages

Add extra post, page, and home headers

If you run a WordPress site and want to get it ranked up in search engines more easily, the Platinum SEO plugin is a great way to go.

Resources:

• Get the Platinum SEO Plugin
• See the Platinum SEO FAQ
• Read more on the benefits of the Platinum SEO plugin

The Page Title

Page Section: <head>

HTML Tag: <title></title>

Shown to users in browser title bars and tab names

Used as the default bookmark name

Meta Description

Page Section: <head>

HTML Tag: <meta name=”description” content="" />

Shown to users as the page summary in some search engines

Not shown to users on your site by most browsers

See noodp and noydir for getting this to show in Google and Yahoo

Meta Keywords

Page Section: <head>

HTML Tag: <meta name="keywords" content="" />

Not shown to users by most browsers and search engines

Not used as much as it used to be by major search engines

Content

Page Section: <body>

Important tags in your page body:

Header Tags

HTML Tag: <h1></h1>, <h2></h2>, <h3></h3>, <h4></h4>, <h5></h5>, <h6></h6>

Used on page to surround important information such as the page title, subheaders, site title, etc.

Image Alt, Title, and SRC Tags

HTML Tag: <img src="" alt="" title="" />

Image is displayed to viewers

Alt is displayed if the image cannot be displayed

Title is shown when the image is hovered over

Bold, Underline, and Emphasize Tags

HTML Tags: <b></b>, <u></u>, <em></em>,

Displays enclosed text in bold, underlines it, or emphasizes it

Hyperlink Tags

HTML Tag: <a href="" rel="" title="" target=""></a>

Creates links to other pages or items on the internet

When creating a content page on the internet, it is a good idea to consider what the page is going to be about and then decide upon primary words and/or phrases that you want to focus on in the page.

These words and phrases, commonly called keywords, let you easily build well targeted pages that search engines will rank well.

When deciding upon key words and phrases for a page that you want people to find, it is a good idea to do at least a little bit of keyword research.

Keyword research consists of finding out what words and phrases people actually use when looking for the kind of information you are going to provide on your page.

By doing keyword research before you build a page, you can reinforce the page to rank well for searches on your chosen keywords.

Resources:

• Keyword Research for Targeted Marketing

Your page title is used to tell people and search robots what your page is about.

This is not the title displayed to readers, but rather the title that is included in the head section of your html document.

A strong title should:

• Include the primary keyword for your page
• Tell people what the page is about

If you are familiar with information marketing, many of the concepts which apply to an article title apply just as well to a page title.

This tag is used to tell people what the page is about in a few short sentences.

It is most commonly used to display a brief summary of the page for people who are browsing lists of pages, particularly in search engines.

A strong meta description should:

• Include your primary keyword near the front of if it
• Include a couple of secondary keywords
• Read naturally
• Tell people what benefit reading the page will bring them
• Tell people what is on the page

From an information marketing standpoint, your meta description should be treated much like an article summary.

To get Google to show your meta description, use the noodp command in your robots header tag.

To get Yahoo to show your meta description, use the noydir command in your robots header tag.

Resources:

• Googles Webmaster Site Management Page
• Yahoo Search Content Quality Guidelines

This tag is used to tell people what the primary keywords for your page are.

These days, it is typically not used by the major search engines due to the fact that pages themselves note what is on them and it is easily abused by webmasters.

However, it is still used by some engines and, if you don’t mind people knowing specifically which words you are targeting on a page, placing them here is a good idea.

When creating a meta keyword tag:

Avoid repetitive keywords

For example:

1. Toys, Kids Toys, Children’s Toys, Boys Toys, Toddler Toys, Girls Toys, Infants Toys, Wooden Toys, Fun Toys
2. Toy, Kid, Child, Boy, Girl, Infant, Wood, Fun

The first entry might be seen as keyword stuffing by search engines because you are using the same word within a lot of different phrases.

The second entry cuts out the redundancy and uses each word once.

Avoid words unrelated to the page in question

This may seem obvious, but if you are going to specify keywords, they should be relevant to the current page.

Other than not stuffing your meta keywords tag and using relevant words, I wouldn’t worry too much about this attribute as it is viewed as unreliable by most search engines.

When building a page to rank well with search engines, keep the following in mind:

Strong content and readability are important

Good content will tend to naturally have a good mix of keywords, get people to read your page, and even get people to link back to it or refer other people to it.

Search engines are trying to think like people, so you really don’t need to spend a lot of time fretting over the optimal number of keywords to include in your page. use your targeted keywords in a natural manner while providing good content and you should not need to revise pages for search ranking purposes.

Use your primary keyword in your page title and surround the title with H1 tags

If your displayed page title matches the page title in the html head section, all the better.

Placing H1 tags around the displayed page title tells search engines that it is the most important thing on the page.

By using your primary keyword and enclosing it in H1 tags, you are telling search engines that your title is important and that your primary keyword is as well.

Use H2, H3, etc. tags for sections of your page

If you are writing content that breaks down well into subsections with subheaders, you can note that your subheaders are important by using header tags around them. This gives them more emphasis than using specific bold or underline tags.

When including images:

Give them descriptive alt tags

Alt tags are displayed when an image cannot be displayed for some reason.

If you use your alt tag to provide a short description of what is being shown, search engines will know what is being displayed.

Give your images good names

If you include an image of an apple pie, give it an appropriate name.

img0124534.jpg doesn’t tell search engines anything.

fresh-baked-apple-pie.jpg does tell search engines something useful.

Give your images a good title

The title tag not only tells search engines about the image, it also displays in most browsers when a user hovers their mouse over it.

Emphasize important words or ideas

If you do not link important words or phrases, you can make them stand out with bold, underline, or emphasis tags.

Search engines often use these tags to tell what things on a page are important.

Build good hyperlinks

When placing links on your pages:

Use title tags to give a short description of where a user is going

These are normally displayed when someone puts their pointer over a link.

Choose good names for your links

Linked text is typically considered to be emphasized.

"How to bake an apple pie" might be better than "Johnnies page" if the page tells people how to bake an apple pie.

Use rel="nofollow" attributes liberally

By including this attribute in your links, you avoid passing page rank on to linked pages.

I would recommend including this attribute on both external links ( unless you want to promote someone elses site ) and links to pages on your own site which you don’t want to pass page rank onto from other pages ( your about me page, contact page, terms of service, etc. )

Use target="_blank" for external links that lead to other peoples sites

This will cause the link to open in a different window or tab by default.

It leaves your page open and opens a new one…so when they are done looking at the other one, your page is still there.

The most important thing is your content. If you give people what they are looking for, chances are that at least some of them will link to your page and/or refer it to other people…giving your site even more traffic.