Accessibility - idmontie's Portfolio

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    em: "em",
    code: "code",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into performance of web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Cache Pages"
    }), "\n", _jsxs(_components.p, {
      children: ["Dynamic pages should be cached in order to improve performance.  Understand how ", _jsx(_components.a, {
        href: "https://www.mnot.net/cache_docs/",
        children: "Web Caching"
      }), " works."]
    }), "\n", _jsx(_components.h2, {
      children: "Use Cache Manifest for Offline Performance"
    }), "\n", _jsxs(_components.p, {
      children: ["If you would like your page to be accessible offline after a user has already visited it, look into the ", _jsx(_components.a, {
        href: "http://www.w3.org/TR/2011/WD-html5-20110525/offline.html",
        children: "Cache Manifest"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Optimize Images"
    }), "\n", _jsx(_components.p, {
      children: "Compress and crop images for best performance."
    }), "\n", _jsx(_components.h2, {
      children: "Gzip Content"
    }), "\n", _jsxs(_components.p, {
      children: ["Most web servers can be configured to automatically do this for you.  Look into ", _jsx(_components.a, {
        href: "https://developer.yahoo.com/performance/rules.html#gzip",
        children: "Yahoo's Developer Network discussion"
      }), " for more information."]
    }), "\n", _jsx(_components.h2, {
      children: "Concatenate Stylesheets and Script Files"
    }), "\n", _jsxs(_components.p, {
      children: ["Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into ", _jsx(_components.a, {
        href: "http://gruntjs.com/",
        children: "Grunt"
      }), " for a Node.js solution."]
    }), "\n", _jsx(_components.h2, {
      children: "Use CSS Image Sprites When Possible"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.a, {
        href: "http://alistapart.com/article/sprites",
        children: "CSS Image Sprites"
      }), " when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression."]
    }), "\n", _jsx(_components.h2, {
      children: "Split Static Content to Its Own Domain"
    }), "\n", _jsxs(_components.p, {
      children: ["Static content like images, CSS, JavaScript, and other content should go in a separate domain that ", _jsx(_components.em, {
        children: "does not use cookies"
      }), ".  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible."]
    }), "\n", _jsx(_components.h2, {
      children: "Minify JavasScript"
    }), "\n", _jsxs(_components.p, {
      children: ["Minify your JavaScript if possible.  Use the ", _jsx(_components.a, {
        href: "https://developers.google.com/closure/compiler/",
        children: "Google Closure Compiler"
      }), " or look into ", _jsx(_components.a, {
        href: "http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node",
        children: "this Stackoverflow question for concatenating and minifying JavaScript files in Node"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Make a Favicon.ico File"
    }), "\n", _jsxs(_components.p, {
      children: ["Make sure there’s a ", _jsx(_components.code, {
        children: "favicon.ico"
      }), " file in the root of the site, i.e. ", _jsx(_components.code, {
        children: "/favicon.ico"
      }), ". ", _jsx(_components.a, {
        href: "https://mathiasbynens.be/notes/rel-shortcut-icon",
        children: "Browsers will automatically request it"
      }), ", even if the icon isn’t mentioned in the HTML at all. If you don’t have a ", _jsx(_components.code, {
        children: "/favicon.ico"
      }), ", this will result in a lot of 404s, draining your server’s bandwidth."]
    }), "\n", _jsxs(_components.p, {
      children: ["Check your Favicon against ", _jsx(_components.a, {
        href: "http://realfavicongenerator.net/",
        children: "The Real Favicon Generator"
      }), ".  It takes care of favicons for:"]
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Desktop Browsers"
      }), "\n", _jsx(_components.li, {
        children: "iOS Home Screen (Favorite icons)"
      }), "\n", _jsx(_components.li, {
        children: "Android Home Screen (Favorite icons)"
      }), "\n", _jsx(_components.li, {
        children: "Windows 8 Tile (Favorite tiles)"
      }), "\n", _jsx(_components.li, {
        children: "Windows Task Bar (App style icon)"
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "It also helps you compress the icons and generates the HTML markup for you."
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into performance of web applications.</p>
<h2>Cache Pages</h2>
<p>Dynamic pages should be cached in order to improve performance.  Understand how <a href="https://www.mnot.net/cache_docs/">Web Caching</a> works.</p>
<h2>Use Cache Manifest for Offline Performance</h2>
<p>If you would like your page to be accessible offline after a user has already visited it, look into the <a href="http://www.w3.org/TR/2011/WD-html5-20110525/offline.html">Cache Manifest</a>.</p>
<h2>Optimize Images</h2>
<p>Compress and crop images for best performance.</p>
<h2>Gzip Content</h2>
<p>Most web servers can be configured to automatically do this for you.  Look into <a href="https://developer.yahoo.com/performance/rules.html#gzip">Yahoo&#x27;s Developer Network discussion</a> for more information.</p>
<h2>Concatenate Stylesheets and Script Files</h2>
<p>Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into <a href="http://gruntjs.com/">Grunt</a> for a Node.js solution.</p>
<h2>Use CSS Image Sprites When Possible</h2>
<p>Use <a href="http://alistapart.com/article/sprites">CSS Image Sprites</a> when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression.</p>
<h2>Split Static Content to Its Own Domain</h2>
<p>Static content like images, CSS, JavaScript, and other content should go in a separate domain that <em>does not use cookies</em>.  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible.</p>
<h2>Minify JavasScript</h2>
<p>Minify your JavaScript if possible.  Use the <a href="https://developers.google.com/closure/compiler/">Google Closure Compiler</a> or look into <a href="http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node">this Stackoverflow question for concatenating and minifying JavaScript files in Node</a>.</p>
<h2>Make a Favicon.ico File</h2>
<p>Make sure there’s a <code>favicon.ico</code> file in the root of the site, i.e. <code>/favicon.ico</code>. <a href="https://mathiasbynens.be/notes/rel-shortcut-icon">Browsers will automatically request it</a>, even if the icon isn’t mentioned in the HTML at all. If you don’t have a <code>/favicon.ico</code>, this will result in a lot of 404s, draining your server’s bandwidth.</p>
<p>Check your Favicon against <a href="http://realfavicongenerator.net/">The Real Favicon Generator</a>.  It takes care of favicons for:</p>
<ul>
<li>Desktop Browsers</li>
<li>iOS Home Screen (Favorite icons)</li>
<li>Android Home Screen (Favorite icons)</li>
<li>Windows 8 Tile (Favorite tiles)</li>
<li>Windows Task Bar (App style icon)</li>
</ul>
<p>It also helps you compress the icons and generates the HTML markup for you.</p>


This post was originally on a blog I started for creating web applications. This post goes into performance of web applications.

## Cache Pages

Dynamic pages should be cached in order to improve performance.  Understand how [Web Caching](https://www.mnot.net/cache_docs/) works.

## Use Cache Manifest for Offline Performance

If you would like your page to be accessible offline after a user has already visited it, look into the [Cache Manifest](http://www.w3.org/TR/2011/WD-html5-20110525/offline.html).

## Optimize Images

Compress and crop images for best performance.

## Gzip Content

Most web servers can be configured to automatically do this for you.  Look into [Yahoo's Developer Network discussion](https://developer.yahoo.com/performance/rules.html#gzip) for more information.

## Concatenate Stylesheets and Script Files

Before deploying to production, concatenate Stylesheets and Script files to reduce the number of brwoser connections and improve gzip compression.  There are many solutions to concatinating and compressing CSS and JavaScript files.  You can look into [Grunt](http://gruntjs.com/) for a Node.js solution.

## Use CSS Image Sprites When Possible

Use [CSS Image Sprites](http://alistapart.com/article/sprites) when possible for small related images like toolbars.  The helps minimize HTTP requess and improves gzip compression.

## Split Static Content to Its Own Domain

Static content like images, CSS, JavaScript, and other content should go in a separate domain that *does not use cookies*.  Cookies are sent with every request to the domain and all of its subdomains.  Use a Content Delivery Network (CDN) if possible.

## Minify JavasScript

Minify your JavaScript if possible.  Use the [Google Closure Compiler](https://developers.google.com/closure/compiler/) or look into [this Stackoverflow question for concatenating and minifying JavaScript files in Node](http://stackoverflow.com/questions/6539837/concat-and-minify-js-files-in-node).

## Make a Favicon.ico File

Make sure there’s a `favicon.ico` file in the root of the site, i.e. `/favicon.ico`. [Browsers will automatically request it](https://mathiasbynens.be/notes/rel-shortcut-icon), even if the icon isn’t mentioned in the HTML at all. If you don’t have a `/favicon.ico`, this will result in a lot of 404s, draining your server’s bandwidth.

Check your Favicon against [The Real Favicon Generator](http://realfavicongenerator.net/).  It takes care of favicons for:

* Desktop Browsers
* iOS Home Screen (Favorite icons)
* Android Home Screen (Favorite icons)
* Windows 8 Tile (Favorite tiles)
* Windows Task Bar (App style icon)

It also helps you compress the icons and generates the HTML markup for you.


Performance

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    ul: "ul",
    li: "li",
    code: "code",
    em: "em"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into accessibility of web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Is your site accessible via screen readers?"
    }), "\n", _jsx(_components.p, {
      children: "Check to make sure your website is navigable from screen readers."
    }), "\n", _jsxs(_components.p, {
      children: ["If you are using ", _jsx(_components.a, {
        href: "http://getbootstrap.com/",
        children: "Twitter Bootstrap"
      }), ", look into the ", _jsx(_components.a, {
        href: "http://paypal.github.io/bootstrap-accessibility-plugin/",
        children: "Bootstrap accessibility plugin"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: ["If you are using ", _jsx(_components.a, {
        href: "http://foundation.zurb.com/",
        children: "Foundation"
      }), ", look into how ", _jsx(_components.a, {
        href: "http://zurb.com/article/1337/foundation-now-helps-you-build-accessible",
        children: "Foundation is built around accessibility"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Do your Positive, Negative, and Neutral Buttons look different?"
    }), "\n", _jsxs(_components.p, {
      children: ["Image from ", _jsx(_components.a, {
        href: "http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/",
        children: "UX Movement"
      }), "."]
    }), "\n", _jsx(_components.p, {
      children: "Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different.  Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness."
    }), "\n", _jsx(_components.h2, {
      children: "HTML Tags"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "<i>"
        }), " - ", _jsx(_components.em, {
          children: "\"alternate voice\""
        }), "; transliterated foreign words, technical terms, and typographically italicized text."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "<em>"
        }), " - ", _jsx(_components.em, {
          children: "\"stress emphasis\""
        }), "; something you'd pronounce differently."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "<b>"
        }), " - ", _jsx(_components.em, {
          children: "\"stylistically offset\""
        }), "; keywords and typographically emboldened text."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "<strong>"
        }), " - ", _jsx(_components.em, {
          children: "\"strong importance\""
        }), ";"]
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["See ", _jsx(_components.a, {
        href: "http://html5doctor.com/i-b-em-strong-element/",
        children: "this HTML5 Doctor post"
      }), " for more information."]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into accessibility of web applications.</p>
<h2>Is your site accessible via screen readers?</h2>
<p>Check to make sure your website is navigable from screen readers.</p>
<p>If you are using <a href="http://getbootstrap.com/">Twitter Bootstrap</a>, look into the <a href="http://paypal.github.io/bootstrap-accessibility-plugin/">Bootstrap accessibility plugin</a>.</p>
<p>If you are using <a href="http://foundation.zurb.com/">Foundation</a>, look into how <a href="http://zurb.com/article/1337/foundation-now-helps-you-build-accessible">Foundation is built around accessibility</a>.</p>
<h2>Do your Positive, Negative, and Neutral Buttons look different?</h2>
<p>Image from <a href="http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/">UX Movement</a>.</p>
<p>Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different.  Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness.</p>
<h2>HTML Tags</h2>
<ul>
<li><code>&lt;i&gt;</code> - <em>&quot;alternate voice&quot;</em>; transliterated foreign words, technical terms, and typographically italicized text.</li>
<li><code>&lt;em&gt;</code> - <em>&quot;stress emphasis&quot;</em>; something you&#x27;d pronounce differently.</li>
<li><code>&lt;b&gt;</code> - <em>&quot;stylistically offset&quot;</em>; keywords and typographically emboldened text.</li>
<li><code>&lt;strong&gt;</code> - <em>&quot;strong importance&quot;</em>;</li>
</ul>
<p>See <a href="http://html5doctor.com/i-b-em-strong-element/">this HTML5 Doctor post</a> for more information.</p>


This post was originally on a blog I started for creating web applications. This post goes into accessibility of web applications.

## Is your site accessible via screen readers?

Check to make sure your website is navigable from screen readers.

If you are using [Twitter Bootstrap](http://getbootstrap.com/), look into the [Bootstrap accessibility plugin](http://paypal.github.io/bootstrap-accessibility-plugin/).

If you are using [Foundation](http://foundation.zurb.com/), look into how [Foundation is built around accessibility](http://zurb.com/article/1337/foundation-now-helps-you-build-accessible).

## Do your Positive, Negative, and Neutral Buttons look different?

Image from [UX Movement](http://uxmovement.com/buttons/how-button-color-contrast-guides-users-to-action/).

Have your Positive Action buttons and your Neutral and Negative Action buttons look distinctly different.  Notice that in the above example, not only are the colors different, but one is bordered and ther other is filled in, making it accessible to those with color-blindness.

## HTML Tags

* `<i>` - *"alternate voice"*; transliterated foreign words, technical terms, and typographically italicized text.
* `<em>` - *"stress emphasis"*; something you'd pronounce differently.
* `<b>` - *"stylistically offset"*; keywords and typographically emboldened text.
* `<strong>` - *"strong importance"*;

See [this HTML5 Doctor post](http://html5doctor.com/i-b-em-strong-element/) for more information.


Accessibility

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    h2: "h2",
    a: "a",
    table: "table",
    thead: "thead",
    tr: "tr",
    th: "th",
    tbody: "tbody",
    td: "td",
    code: "code",
    blockquote: "blockquote",
    h3: "h3",
    ul: "ul",
    li: "li"
  }, props.components);
  return _jsxs(_Fragment, {
    children: [_jsx(_components.p, {
      children: "This post was originally on a blog I started for creating web applications. This post goes into SEO considerations for web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Use Search Engine Friendly URLs"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Semantic_URL",
        children: "semantic URLs"
      }), ".  Semantic URLs help improve usability and accessibility of a website.  The following table from the Wikipedia entry illistrates how to use semantic URLs:"]
    }), "\n", _jsxs(_components.table, {
      children: [_jsx(_components.thead, {
        children: _jsxs(_components.tr, {
          children: [_jsx(_components.th, {
            children: "Non-semantic URL"
          }), _jsx(_components.th, {
            children: "Semantic URL"
          })]
        })
      }), _jsxs(_components.tbody, {
        children: [_jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/index.php?page=name"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/name"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/index.php?page=consulting/marketing"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/consulting/marketing"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/products?category=2&pid=25"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/products/2/25"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/cgi-bin/feed.cgi?feed=news&frm=rss"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/news.rss"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/services/index.jsp?category=legal&id=patents"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/services/legal/patents"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/kb/index.php?cat=8&id=41"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/kb/8/41"
            })
          })]
        }), _jsxs(_components.tr, {
          children: [_jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/index.php?mod=profiles&id=193"
            })
          }), _jsx(_components.td, {
            children: _jsx(_components.code, {
              children: "http://example.com/profiles/193"
            })
          })]
        })]
      })]
    }), "\n", _jsx(_components.h2, {
      children: "Use Hashbangs for Dynamic Content When You Normally Use Hashes"
    }), "\n", _jsxs(_components.p, {
      children: ["If you normally use the hash ", _jsx(_components.code, {
        children: "#"
      }), " character for dynamic content, change it to the hashbang ", _jsx(_components.code, {
        children: "#!"
      }), ".  This allows googlebot to use ", _jsx(_components.code, {
        children: "#_REQUEST[\"_escaped_fragment_\"]"
      }), " instead of ", _jsx(_components.code, {
        children: "#!"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Use Push State If You Can"
    }), "\n", _jsxs(_components.p, {
      children: ["If the user is using Firefox or Chromium, you can use ", _jsx(_components.code, {
        children: "history.pushState( object, pageName, \"./?param=1\");"
      }), " so that the address bar changes, but the page does not reload.  This allows you to use ", _jsx(_components.code, {
        children: "?"
      }), " instead of ", _jsx(_components.code, {
        children: "#!"
      }), " to keep dynamic content."]
    }), "\n", _jsx(_components.h2, {
      children: "Use Descriptive Links"
    }), "\n", _jsx(_components.p, {
      children: "When creating links, refrain from using \"this\" or \"click here\" or similar phrases for your links.  Link descriptions should be descriptive."
    }), "\n", _jsx(_components.h2, {
      children: "Have an XML Sitemap"
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling."
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["Have a ", _jsx(_components.a, {
        href: "http://www.sitemaps.org/",
        children: "sitemap"
      }), " at ", _jsx(_components.code, {
        children: "/sitemap.xml"
      }), " for search engines to crawl."]
    }), "\n", _jsxs(_components.p, {
      children: ["Have a ", _jsx(_components.a, {
        href: "https://support.google.com/webmasters/answer/178636",
        children: "image sitemap"
      }), " for your images!"]
    }), "\n", _jsxs(_components.p, {
      children: ["Create a ", _jsx(_components.a, {
        href: "https://support.google.com/webmasters/topic/2370586?rd=1",
        children: "mobile sitemap"
      }), "!"]
    }), "\n", _jsx(_components.h2, {
      children: "Use Canonical URLs For Duplicate Content"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.code, {
        children: "<link rel=\"canonical\" ... />"
      }), " when you have duplicate content on multiple pages. Remember, multiple URLs that point to the same content coint as dusplicate content. Also remember that ", _jsx(_components.code, {
        children: "?page=1&subject=my-subject"
      }), " and ", _jsx(_components.code, {
        children: "?subject=my-subject&page=1"
      }), " are different pages to web crawlers!"]
    }), "\n", _jsx(_components.h2, {
      children: "Setup Webmaster Tools"
    }), "\n", _jsxs(_components.p, {
      children: ["Use ", _jsx(_components.a, {
        href: "http://www.google.com/webmasters/",
        children: "Google Webmaster Tools"
      }), " and ", _jsx(_components.a, {
        href: "http://www.bing.com/toolbox/webmaster",
        children: "Bing Webmaster Tools"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Setup Google Analytics"
    }), "\n", _jsxs(_components.p, {
      children: ["Have ", _jsx(_components.a, {
        href: "http://www.google.com/analytics/",
        children: "Google Analytics"
      }), " set up.  Or something like ", _jsx(_components.a, {
        href: "http://piwik.org/",
        children: "Piwik"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Have robots.txt Configured Properly"
    }), "\n", _jsxs(_components.p, {
      children: ["Set your ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Robots_exclusion_standard",
        children: "robots.txt"
      }), " file properly.  Each subdomain must have its own robots.txt file."]
    }), "\n", _jsx(_components.h2, {
      children: "301 Redirect for WWW Requests"
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.code, {
        children: "www.example.com"
      }), " or ", _jsx(_components.code, {
        children: "example.com"
      }), " should be your primary domain, not both. Have one 301 Redirect (Moved Permanently) to the other."]
    }), "\n", _jsx(_components.h2, {
      children: "Read the Search Engine Optimization Starter Guide"
    }), "\n", _jsxs(_components.p, {
      children: ["The ", _jsx(_components.a, {
        href: "http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf",
        children: "starter guide is viewable here"
      }), "."]
    }), "\n", _jsx(_components.h3, {
      children: "The Basics"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Create unique, accurate page titles. These titles are displayed in the search results. Titles reflect what is on each individual page."
      }), "\n", _jsx(_components.li, {
        children: "Use the description meta tag. Google will use them as snippets for your pages."
      }), "\n", _jsxs(_components.li, {
        children: ["Use simple to understand (ie \"friendly\") URLs.  URLs should contain relevant words. ", _jsx(_components.code, {
          children: "http://mysite.com/article/basket-ball-scores"
        }), " is a friendly URL."]
      }), "\n", _jsx(_components.li, {
        children: "Navigation is very important for search engines.  Think of you website as folders that should be easy to navigate.  Use breadcrumbs!"
      }), "\n", _jsxs(_components.li, {
        children: ["Use ", _jsx(_components.a, {
          href: "#have-an-xml-sitemap",
          children: "sitemaps"
        }), "!  Prepare one for users and one for search engines."]
      }), "\n", _jsx(_components.li, {
        children: "Use 404s when necessary."
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Improving Site Structure"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Create a naturally flowing hierarchy."
      }), "\n", _jsx(_components.li, {
        children: "Avoid having all navigation based entirely on dropdown menus.  Your website should be accessible, pages should be conntected with normal text links."
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Optimizing Content"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Create compelling and useful content."
      }), "\n", _jsx(_components.li, {
        children: "Offer unique and exclusive content."
      }), "\n", _jsxs(_components.li, {
        children: ["Checkout the ", _jsx(_components.a, {
          href: "https://adwords.google.com/KeywordPlanner",
          children: "Keyword Planner"
        }), " by Google AdWords."]
      }), "\n", _jsx(_components.li, {
        children: "Write easy-to-read text.  Don't embed text in images"
      }), "\n", _jsx(_components.li, {
        children: "Create fresh content."
      }), "\n", _jsx(_components.li, {
        children: "Create content for users, not for search engines."
      }), "\n", _jsxs(_components.li, {
        children: ["Write good anchor text: ", _jsx(_components.code, {
          children: "<a href=\"...\">Top Ten Basketball Shots</a>"
        }), " is a descriptive link."]
      }), "\n", _jsxs(_components.li, {
        children: ["Use ", _jsx(_components.code, {
          children: "alt"
        }), " tags on your images! This also helps with accessibility."]
      }), "\n", _jsx(_components.li, {
        children: "Use descriptive filenames for your images and assets!"
      }), "\n", _jsxs(_components.li, {
        children: ["Supply an ", _jsx(_components.a, {
          href: "https://support.google.com/webmasters/answer/178636",
          children: "image sitemap file"
        }), "!"]
      }), "\n", _jsxs(_components.li, {
        children: ["Use heading tags correctly!  ", _jsx(_components.code, {
          children: "<h1>"
        }), " is the most important. ", _jsx(_components.code, {
          children: "<h6>"
        }), " is the least important."]
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Dealing with Crawlers"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Restrict crawling with robots.txt."
      }), "\n", _jsxs(_components.li, {
        children: ["Use ", _jsx(_components.code, {
          children: "rel=\"nofollow\""
        }), " when necessary for links. Normally, user generated links through comment systems should be tagged with nofollow."]
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "SEO for Mobile Phones"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Configure mobiles sites so that they can be indexed accurately."
      }), "\n", _jsxs(_components.li, {
        children: ["Create a ", _jsx(_components.a, {
          href: "https://support.google.com/webmasters/topic/2370586?rd=1",
          children: "mobile sitemap"
        }), "!"]
      }), "\n", _jsxs(_components.li, {
        children: ["If you use User-agents to generate your mobile site, make sure to allow ", _jsx(_components.code, {
          children: "Googlebot-Mobile"
        }), "!"]
      }), "\n", _jsx(_components.li, {
        children: "If you use a seperate domain for your mobile app, redirect them to the correct page!"
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Promotions and Analysis"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Backlinks increase the value of your site ( backlinks are links that other people post to your site)."
      }), "\n", _jsx(_components.li, {
        children: "Know how to utilize your social media sites."
      }), "\n", _jsx(_components.li, {
        children: "Utilize the Google Webmaster Tools."
      }), "\n"]
    })]
  });
}
function MDXContent(props = {}) {
  const {wrapper: MDXLayout} = props.components || ({});
  return MDXLayout ? _jsx(MDXLayout, Object.assign({}, props, {
    children: _jsx(_createMdxContent, props)
  })) : _createMdxContent(props);
}
return {
  default: MDXContent
};


<p>This post was originally on a blog I started for creating web applications. This post goes into SEO considerations for web applications.</p>
<h2>Use Search Engine Friendly URLs</h2>
<p>Use <a href="http://en.wikipedia.org/wiki/Semantic_URL">semantic URLs</a>.  Semantic URLs help improve usability and accessibility of a website.  The following table from the Wikipedia entry illistrates how to use semantic URLs:</p>
<table><thead><tr><th>Non-semantic URL</th><th>Semantic URL</th></tr></thead><tbody><tr><td><code>http://example.com/index.php?page=name</code></td><td><code>http://example.com/name</code></td></tr><tr><td><code>http://example.com/index.php?page=consulting/marketing</code></td><td><code>http://example.com/consulting/marketing</code></td></tr><tr><td><code>http://example.com/products?category=2&amp;pid=25</code></td><td><code>http://example.com/products/2/25</code></td></tr><tr><td><code>http://example.com/cgi-bin/feed.cgi?feed=news&amp;frm=rss</code></td><td><code>http://example.com/news.rss</code></td></tr><tr><td><code>http://example.com/services/index.jsp?category=legal&amp;id=patents</code></td><td><code>http://example.com/services/legal/patents</code></td></tr><tr><td><code>http://example.com/kb/index.php?cat=8&amp;id=41</code></td><td><code>http://example.com/kb/8/41</code></td></tr><tr><td><code>http://example.com/index.php?mod=profiles&amp;id=193</code></td><td><code>http://example.com/profiles/193</code></td></tr></tbody></table>
<h2>Use Hashbangs for Dynamic Content When You Normally Use Hashes</h2>
<p>If you normally use the hash <code>#</code> character for dynamic content, change it to the hashbang <code>#!</code>.  This allows googlebot to use <code>#_REQUEST[&quot;_escaped_fragment_&quot;]</code> instead of <code>#!</code>.</p>
<h2>Use Push State If You Can</h2>
<p>If the user is using Firefox or Chromium, you can use <code>history.pushState( object, pageName, &quot;./?param=1&quot;);</code> so that the address bar changes, but the page does not reload.  This allows you to use <code>?</code> instead of <code>#!</code> to keep dynamic content.</p>
<h2>Use Descriptive Links</h2>
<p>When creating links, refrain from using &quot;this&quot; or &quot;click here&quot; or similar phrases for your links.  Link descriptions should be descriptive.</p>
<h2>Have an XML Sitemap</h2>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling.</p>
</blockquote>
<p>Have a <a href="http://www.sitemaps.org/">sitemap</a> at <code>/sitemap.xml</code> for search engines to crawl.</p>
<p>Have a <a href="https://support.google.com/webmasters/answer/178636">image sitemap</a> for your images!</p>
<p>Create a <a href="https://support.google.com/webmasters/topic/2370586?rd=1">mobile sitemap</a>!</p>
<h2>Use Canonical URLs For Duplicate Content</h2>
<p>Use <code>&lt;link rel=&quot;canonical&quot; ... /&gt;</code> when you have duplicate content on multiple pages. Remember, multiple URLs that point to the same content coint as dusplicate content. Also remember that <code>?page=1&amp;subject=my-subject</code> and <code>?subject=my-subject&amp;page=1</code> are different pages to web crawlers!</p>
<h2>Setup Webmaster Tools</h2>
<p>Use <a href="http://www.google.com/webmasters/">Google Webmaster Tools</a> and <a href="http://www.bing.com/toolbox/webmaster">Bing Webmaster Tools</a>.</p>
<h2>Setup Google Analytics</h2>
<p>Have <a href="http://www.google.com/analytics/">Google Analytics</a> set up.  Or something like <a href="http://piwik.org/">Piwik</a>.</p>
<h2>Have robots.txt Configured Properly</h2>
<p>Set your <a href="http://en.wikipedia.org/wiki/Robots_exclusion_standard">robots.txt</a> file properly.  Each subdomain must have its own robots.txt file.</p>
<h2>301 Redirect for WWW Requests</h2>
<p><code>www.example.com</code> or <code>example.com</code> should be your primary domain, not both. Have one 301 Redirect (Moved Permanently) to the other.</p>
<h2>Read the Search Engine Optimization Starter Guide</h2>
<p>The <a href="http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf">starter guide is viewable here</a>.</p>
<h3>The Basics</h3>
<ul>
<li>Create unique, accurate page titles. These titles are displayed in the search results. Titles reflect what is on each individual page.</li>
<li>Use the description meta tag. Google will use them as snippets for your pages.</li>
<li>Use simple to understand (ie &quot;friendly&quot;) URLs.  URLs should contain relevant words. <code>http://mysite.com/article/basket-ball-scores</code> is a friendly URL.</li>
<li>Navigation is very important for search engines.  Think of you website as folders that should be easy to navigate.  Use breadcrumbs!</li>
<li>Use <a href="#have-an-xml-sitemap">sitemaps</a>!  Prepare one for users and one for search engines.</li>
<li>Use 404s when necessary.</li>
</ul>
<h3>Improving Site Structure</h3>
<ul>
<li>Create a naturally flowing hierarchy.</li>
<li>Avoid having all navigation based entirely on dropdown menus.  Your website should be accessible, pages should be conntected with normal text links.</li>
</ul>
<h3>Optimizing Content</h3>
<ul>
<li>Create compelling and useful content.</li>
<li>Offer unique and exclusive content.</li>
<li>Checkout the <a href="https://adwords.google.com/KeywordPlanner">Keyword Planner</a> by Google AdWords.</li>
<li>Write easy-to-read text.  Don&#x27;t embed text in images</li>
<li>Create fresh content.</li>
<li>Create content for users, not for search engines.</li>
<li>Write good anchor text: <code>&lt;a href=&quot;...&quot;&gt;Top Ten Basketball Shots&lt;/a&gt;</code> is a descriptive link.</li>
<li>Use <code>alt</code> tags on your images! This also helps with accessibility.</li>
<li>Use descriptive filenames for your images and assets!</li>
<li>Supply an <a href="https://support.google.com/webmasters/answer/178636">image sitemap file</a>!</li>
<li>Use heading tags correctly!  <code>&lt;h1&gt;</code> is the most important. <code>&lt;h6&gt;</code> is the least important.</li>
</ul>
<h3>Dealing with Crawlers</h3>
<ul>
<li>Restrict crawling with robots.txt.</li>
<li>Use <code>rel=&quot;nofollow&quot;</code> when necessary for links. Normally, user generated links through comment systems should be tagged with nofollow.</li>
</ul>
<h3>SEO for Mobile Phones</h3>
<ul>
<li>Configure mobiles sites so that they can be indexed accurately.</li>
<li>Create a <a href="https://support.google.com/webmasters/topic/2370586?rd=1">mobile sitemap</a>!</li>
<li>If you use User-agents to generate your mobile site, make sure to allow <code>Googlebot-Mobile</code>!</li>
<li>If you use a seperate domain for your mobile app, redirect them to the correct page!</li>
</ul>
<h3>Promotions and Analysis</h3>
<ul>
<li>Backlinks increase the value of your site ( backlinks are links that other people post to your site).</li>
<li>Know how to utilize your social media sites.</li>
<li>Utilize the Google Webmaster Tools.</li>
</ul>


This post was originally on a blog I started for creating web applications. This post goes into SEO considerations for web applications.

## Use Search Engine Friendly URLs

Use [semantic URLs](http://en.wikipedia.org/wiki/Semantic_URL).  Semantic URLs help improve usability and accessibility of a website.  The following table from the Wikipedia entry illistrates how to use semantic URLs:

| Non-semantic URL                                                | Semantic URL                              |
|-----------------------------------------------------------------|-------------------------------------------|
| `http://example.com/index.php?page=name`                          | `http://example.com/name`                   |
| `http://example.com/index.php?page=consulting/marketing`          | `http://example.com/consulting/marketing`   |
| `http://example.com/products?category=2&pid=25`                   | `http://example.com/products/2/25`          |
| `http://example.com/cgi-bin/feed.cgi?feed=news&frm=rss`           | `http://example.com/news.rss`               |
| `http://example.com/services/index.jsp?category=legal&id=patents` | `http://example.com/services/legal/patents` |
| `http://example.com/kb/index.php?cat=8&id=41`                     | `http://example.com/kb/8/41`                |
| `http://example.com/index.php?mod=profiles&id=193`                | `http://example.com/profiles/193`           |

## Use Hashbangs for Dynamic Content When You Normally Use Hashes

If you normally use the hash `#` character for dynamic content, change it to the hashbang `#!`.  This allows googlebot to use `#_REQUEST["_escaped_fragment_"]` instead of `#!`.

## Use Push State If You Can

If the user is using Firefox or Chromium, you can use `history.pushState( object, pageName, "./?param=1");` so that the address bar changes, but the page does not reload.  This allows you to use `?` instead of `#!` to keep dynamic content.

## Use Descriptive Links

When creating links, refrain from using "this" or "click here" or similar phrases for your links.  Link descriptions should be descriptive.

## Have an XML Sitemap

> Sitemaps are an easy way for webmasters to inform search engines about pages on their sites that are available for crawling.

Have a [sitemap](http://www.sitemaps.org/) at `/sitemap.xml` for search engines to crawl.

Have a [image sitemap](https://support.google.com/webmasters/answer/178636) for your images!

Create a [mobile sitemap](https://support.google.com/webmasters/topic/2370586?rd=1)!

## Use Canonical URLs For Duplicate Content

Use `<link rel="canonical" ... />` when you have duplicate content on multiple pages. Remember, multiple URLs that point to the same content coint as dusplicate content. Also remember that `?page=1&subject=my-subject` and `?subject=my-subject&page=1` are different pages to web crawlers!

## Setup Webmaster Tools

Use [Google Webmaster Tools](http://www.google.com/webmasters/) and [Bing Webmaster Tools](http://www.bing.com/toolbox/webmaster).

## Setup Google Analytics

Have [Google Analytics](http://www.google.com/analytics/) set up.  Or something like [Piwik](http://piwik.org/).

## Have robots.txt Configured Properly

Set your [robots.txt](http://en.wikipedia.org/wiki/Robots_exclusion_standard) file properly.  Each subdomain must have its own robots.txt file.

## 301 Redirect for WWW Requests

`www.example.com` or `example.com` should be your primary domain, not both. Have one 301 Redirect (Moved Permanently) to the other.

## Read the Search Engine Optimization Starter Guide

The [starter guide is viewable here](http://static.googleusercontent.com/external_content/untrusted_dlcp/www.google.com/en/us/webmasters/docs/search-engine-optimization-starter-guide.pdf).

### The Basics

- Create unique, accurate page titles. These titles are displayed in the search results. Titles reflect what is on each individual page.
- Use the description meta tag. Google will use them as snippets for your pages.
- Use simple to understand (ie "friendly") URLs.  URLs should contain relevant words. `http://mysite.com/article/basket-ball-scores` is a friendly URL.
- Navigation is very important for search engines.  Think of you website as folders that should be easy to navigate.  Use breadcrumbs!
- Use [sitemaps](#have-an-xml-sitemap)!  Prepare one for users and one for search engines.
- Use 404s when necessary.

### Improving Site Structure

- Create a naturally flowing hierarchy.
- Avoid having all navigation based entirely on dropdown menus.  Your website should be accessible, pages should be conntected with normal text links.

### Optimizing Content

- Create compelling and useful content.
- Offer unique and exclusive content.
- Checkout the [Keyword Planner](https://adwords.google.com/KeywordPlanner) by Google AdWords.
- Write easy-to-read text.  Don't embed text in images
- Create fresh content.
- Create content for users, not for search engines.
- Write good anchor text: `<a href="...">Top Ten Basketball Shots</a>` is a descriptive link.
- Use `alt` tags on your images! This also helps with accessibility.
- Use descriptive filenames for your images and assets!
- Supply an [image sitemap file](https://support.google.com/webmasters/answer/178636)!
- Use heading tags correctly!  `<h1>` is the most important. `<h6>` is the least important.

### Dealing with Crawlers

- Restrict crawling with robots.txt.
- Use `rel="nofollow"` when necessary for links. Normally, user generated links through comment systems should be tagged with nofollow.

### SEO for Mobile Phones

- Configure mobiles sites so that they can be indexed accurately.
- Create a [mobile sitemap](https://support.google.com/webmasters/topic/2370586?rd=1)!
- If you use User-agents to generate your mobile site, make sure to allow `Googlebot-Mobile`!
- If you use a seperate domain for your mobile app, redirect them to the correct page!

### Promotions and Analysis

- Backlinks increase the value of your site ( backlinks are links that other people post to your site).
- Know how to utilize your social media sites.
- Utilize the Google Webmaster Tools.
