Category Archives: HTML

SEO Audit Outline

[quotes_right]
REFERENCE: 

How to Perform the World’s Greatest SEO Audit by Steve Webb, Ph.D.

… Thanks, Steve, for the good reference.
[/quotes_right]

This article was posted on SEOMoz recently and I thought that it would make a great resource to have on-hand for reference when reviewing a website for SEO quality. The article is written by Steve Webb (see article references on this page) and I have captured the outline here for my reference. Visit the article for all of the full details.

SEO Audit Preparation

  • Crawl Before You Walk
  • Crawling Tools
  • Crawling Configuration
  • Ask the Oracles

SEO Audit Analysis

  • Accessibility
    • Robots.txt
    • Robots Meta Tags
    • HTTP Status Codes
    • XML Sitemap
    • Site Architecture
    • Flash and JavaScript Navigation
    • Site Performance
  • Indexability
    • Site: Command
    • Index Sanity Checks
    • Page Searches
    • Brand Searches
    • Search Engine Penalties
    • Make Sure You’ve Actually Been Penalized
    • Identify the Reason(s) for the Penalty
    • Fix the Site’s Penalized Behavior
    • Request Reconsideration
  • On-Page Ranking Factors
    • URLs
    • URL-based Duplicate Content
    • Content
    • Information Architecture
    • Keyword Cannibalism
    • Duplicate Content
    • HTML Markup
    • Titles
    • Meta Descriptions
    • Other <head> Tags
    • Images
    • Outlinks
    • Other <body> Tags
  • Off-Page Ranking Factors
    • Popularity
    • Trustworthiness
    • Backlink Profile
    • Authority
    • Social Engagement
    • Competitive Analysis

SEO Audit Report

  • Write for multiple audiences
  • Prioritize, prioritize, and then prioritize some more
  • Provide actionable suggestions


Websafe Fonts and Other Options

[quotes_right]

  • Arial, Helvetica, sans-serif;
  • ‘Arial Black’, Gadget, sans-serif;
  • ‘Bookman Old Style’, serif;
  • ‘Comic Sans MS’, cursive;
  • Courier, monospace;
  • ‘Courier New’, Courier, monospace;
  • Garamond, serif;
  • Georgia, serif;
  • Impact, Charcoal, sans-serif;
  • ‘Lucida Console’, Monaco, monospace;
  • ‘Lucida Sans Unicode’, ‘Lucida Grande’, sans-serif;
  • ‘MS Sans Serif’, Geneva, sans-serif;
  • ‘MS Serif’, ‘New York’, sans-serif;
  • ‘Palatino Linotype’, ‘Book Antiqua’, Palatino, serif;
  • Symbol, sans-serif;
  • Tahoma, Geneva, sans-serif;
  • ‘Times New Roman’, Times, serif;
  • ‘Trebuchet MS’, Helvetica, sans-serif;
  • Verdana, Geneva, sans-serif;
  • Webdings, sans-serif;
  • Wingdings, ‘Zapf Dingbats’, sans-serif;

[/quotes_right]

Websafe Fonts

If you don’t use an HTML editor that readily reminds you of all available websafe fonts it can be hard to remember those. Here is a list of several sites that have some good reference info on this.

www.ampsoft.net/webdesign-l/WindowsMacFonts.html
www.w3schools.com/cssref/css_websafe_fonts.asp
www.fonttester.com/help/list_of_web_safe_fonts.html
web.mit.edu/jmorzins/www/fonts.html

Font Hosting Sites

Another thing to note is that if you need something a little more specific than the typical websafe font and don’t want to embed it all in a graphic, there are several font services — some free and some paid — that will serve the fonts to your website on demand.

Essentailly, all you do is put a link tag in the header of each page on which you use the font (<link href=”” />) and pull in the font as people visit your pages. Then you just call out the font in your CSS class (in your style sheet, within the <style></style> tags on your page, or inside of the style=”” attributes) like you normally would. Here are some places to find these.

Google.com/webfonts (www.google.com/webfonts)
Fonts.com (new.fonts.com/)
TypeKit.com (typekit.com/)

HTML Conditional Statements (IF IE)

IF conditions are allowed in HTML and can be a very powerful way to quickly eliminate cross-browser issues. The IF IE set of conditionals is great to have on hand and can save hours of frustration when trying to wrap up projects quickly.

Here they are:

<p class="accent">
<!--[if IE]>
According to the conditional comment this is IE<br />
<![endif]-->
<!--[if IE 6]>
According to the conditional comment this is IE 6<br />
<![endif]-->
<!--[if IE 7]>
According to the conditional comment this is IE 7<br />
<![endif]-->
<!--[if IE 8]>
According to the conditional comment this is IE 8<br />
<![endif]-->
<!--[if IE 9]>
According to the conditional comment this is IE 9<br />
<![endif]-->
<!--[if gte IE 8]>
According to the conditional comment this is IE 8 or higher<br />
<![endif]-->
<!--[if lt IE 9]>
According to the conditional comment this is IE lower than 9<br />
<![endif]-->
<!--[if lte IE 7]>
According to the conditional comment this is IE lower or equal to 7<br />
<![endif]-->
<!--[if gt IE 6]>
According to the conditional comment this is IE greater than 6<br />
<![endif]-->
<!--[if !IE]> -->
According to the conditional comment this is not IE<br />
<!-- <![endif]-->
</p>

Note that they are only allowed in HTML and not in CSS. IF you want to load a whole separate CSS file for IE for one reason or another you can put the link tag into the conditional as follows:

<html>
  <head>
    <title></title>

    <!--[if IE]>
      	<link rel='stylesheet' href='stylesheet.css' type='text/css' />
    <![endif]-->

  </head>
  <body> ... 

[quotes]Reference:

  1. quirksmode.org/css/condcom.html
  2. css-tricks.com/how-to-create-an-ie-only-stylesheet/

[/quotes]

Printing HTML with Page Breaks

A common need for a web developer is to be able to design a web page that is intended to be printed by an end-user. Printing through the web browser’s “print” button or the JavaScript window.print feature is not too difficult, particular with the CSS properties: “page-break-before” and “page-break-after“.

div {
  page-break-before: always;
}

OR

div {
  page-break-after: always;
}

[quotes_right]
Here are some references:

[/quotes_right]

Here are the property options:

Value Description
auto Default. Insert a page break after the element if necessary
always Insert a page break after the element
avoid Avoid inserting a page break after the element
left Insert page breaks after the element until it reaches a blank left page
right Insert page breaks after the element until it reaches a blank right page
inherit Specifies that the value of the page-break-after property should be inherited from the parent element

(table content from w3schools.com)

NOTE: Keep in mind that if you have the page-break-after: always; set on a page element, even if nothing follows it on that particular page, there will always be a second page printed each time you print. If you want to stop that second page from always printing, use the page-break-before: always; property instead. Use that property any place you want the new page to START.

Running PHP Script Inside of .HTM and .HTML Files

If your site is running on a LAMP (Linux, Apache, MySQL, PHP) platform it is possible to make the server execute PHP scripts inside of a .HTM or .HTML page.  Pages with the HTML file extensions (.htm or .html) typically, when requested from the server are just sent straight to the browser by the server. With those extensions the web server assumes that there is nothing more to do than that. With Apache’s .htaccess file, however, you can alter this.

Why would you want to do that? It is common for webmasters to come across situations where a site consists entirely of static HTML files and the job does not allow for changing those extensions. Typically this is for search engine reasons.

The quick work-around for this is to add a line or to into the .htaccess file in the site’s root directory that will tell the server to look through each .html or .htm files for PHP scripting prior to sending them to the requesting browser/user. The exact lines of .htaccess code will depending upon the settings of the server that you’re running on but here are the most common.

AddHandler php-script .htm .html

or

AddType application/x-httpd-php .php .htm .html

Each simply tells the server to parse HTML pages as if they were PHP pages and generally, one of those two lines will accomplish the goal.

ie9-pic2

Cross-browser Testing Old Versions of IE on Mac

I run a Mac and for all of my web development work and for years had used any old PC that I could get my hands on for my cross browser / cross platform testing for my HTML, CSS, and Javascript work.

I had always been under the impression that, even though I was running IE9 on Windows 7 through my VM Ware Fusion software and could just do my IE9 testing right on my Mac, that I still had to keep that old PC around for my older versions of the browser.

One day not too long ago I stumbled across a solution that I didn’t even know was available to me.  Moreover, I already had it in place and didn’t even know it. Internet Explorer 9 has this functionality built right into it.

On any copy of IE9, click on the “Tools” icon in the upper-right corner of the browser and look for the selection that says: “F12 Developer Tools”.

When you click on that you will either get a split window in your browser that shows both your website view along with the resources available to you in the developer tools app; or, yours will show up in an entirely new window all to itself.

When the Developer Tools window appears, look through the main menu for the “Browser Mode” drop down menu.

There you have it. All the late-model IE testing that your little heart can handle right in one place.