• Toll-free: 1-800-514-5796
  • In Montreal: 514-400-0852

SEO Glossary

An ever-growing glossary of SEO Jargon

Get a Quote Call today :1-800-514-5796

SEO Glossary » i

Image replacement

Image replacement, or CSS image replacement is a technique to make image text accessible to screen readers, text-only web browsers, and search engines, especially when images are used for navigation or headings. When images are used to replace text for important content, image replacement ensures that text is accessible to all visitors and devices, even when image can't be interpreted.

Considerations

When implementing any of the various image replacement techniques, consider that combinations of various devices and browser setting can yield different results. These settings can be reduced to:

  • CSS ON, Images ON
  • CSS OFF, Images OFF
  • CSS ON, Images OFF
  • CSS OFF, Images ON

Implementation

Several popular techniques of image replacement exist, most of them based on the same principle: Instead of using the HTML <img> element to markup a graphic, the CSS background property is used in its place, with a plain text version of the content positioned over it, but hidden via CSS. This method allows search engines and text-only devices to view the text hidden to typical viewers, who can see the images.

Custom Example:

HTML

<h1 class="ImgReplace">My Heading</h1>

CSS


h1.ImgReplace {
  width: 400px; 
  height: 75px;
  background: url("img/header.png");
  text-indent: 100%;
  white-space: nowrap;
  overflow: hidden;
}
								

Popular methods of CSS image replacement include FIR (Fahrner Image Replacement), and the Phark Method, both with their own strengths and drawbacks.

Used properly, CSS image replacement is an example of hidden text that is not considered deceptive, and will not risk a search engine penalty.

Top
Impression
See Page View Top
See Backlink Top
Index
See Search engine index Top
Information Architecture

("Information design" redirects here)

Information architecture (IA) is the science of organizing and labeling information. In web design, information architecture generally consists of a hierarchical structure that accommodates people, user-devices, web browsers, and search engines alike.

Information architecture for the Web overlaps with several other disciplines, such as content strategy, web usability, and search engine optimization. Key components of IA include:

  • Organization: How information is categorized, e.g., subject vs chronology
  • Labelling: How information is represented, e.g., technical vs user-friendly terminology
  • Navigation: How information is accessed or browsed
  • Search: How information is searched and retrieved

Successful information design shapes content according to the needs of its audience, opposed to the structure of the organization.

Top

An internal link is a hyperlink that points to a resource within the same website or domain name, opposed to an external link, which points to an external resource.

Examples of internal link types include:

  • Main, sidebar, and footer menus
  • Breadcrumb navigation
  • Website header logos that links to its home page
  • Links from main body content

Internal linking from within body copy adds user-friendly references to contextually relevant content, and helps search engines index web pages.

Internal Linking Best Practices

  • Use appropriate anchor text: User-friendly anchor text gives visitors insight into where the link leads; for example, 'useful links' suggests a destination page that contains useful links, whereas 'useful links' suggests a destination page on links in general
  • Diversify: Anchor text need not always be 100% descriptive of its target content. Calls to action, for example, are often more effective with engaging action words instead of keywords
  • Don't overdo it: Create internal links only when they add context to referring content, or help visitors navigate to relevant content
Top
Invisible text
See Hidden text Top
Get a QuoteOr call us: 1-800-514-5796