/*@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",
    strong: "strong",
    ul: "ul",
    li: "li",
    pre: "pre",
    code: "code",
    blockquote: "blockquote"
  }, 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 security for web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Against SQL Injection"
    }), "\n", _jsxs(_components.p, {
      children: ["Read about ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/SQL_injection",
        children: "SQL injection"
      }), " and learn how to prevent it for the langauge and database you are using."]
    }), "\n", _jsx(_components.h2, {
      children: "All User Input is Filtered"
    }), "\n", _jsx(_components.p, {
      children: "Never trust user input.  This includes cookies and hidden form field values."
    }), "\n", _jsx(_components.h2, {
      children: "Read the Open Web Application Security Project"
    }), "\n", _jsxs(_components.p, {
      children: ["Read ", _jsx(_components.a, {
        href: "https://www.owasp.org/index.php/Category:OWASP_Guide_Project",
        children: "the Open Web Application Security Project"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "All Passwords are Hashed with a Salt"
    }), "\n", _jsxs(_components.p, {
      children: ["Hash all passwords using a ", _jsx(_components.a, {
        href: "http://security.stackexchange.com/q/21263/396",
        children: "salt"
      }), " and all salts are different to prevent against ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Rainbow_table",
        children: "rainbow attacks"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: ["The hashing algorithm should be bcrypt or scrypt for storing passwords.  Look into ", _jsx(_components.a, {
        href: "http://codahale.com/how-to-safely-store-a-password/",
        children: "How To Safely Sroe a Password"
      }), "."]
    }), "\n", _jsxs(_components.p, {
      children: ["Do ", _jsx(_components.strong, {
        children: "not"
      }), " use MD5 or any SHA algorithm.  SHA algorithms are meant to be fast, which should not be used for trying to securely store passwords."]
    }), "\n", _jsx(_components.h2, {
      children: "Use a Standard Authentication System"
    }), "\n", _jsx(_components.p, {
      children: "Do not role your own authentication system."
    }), "\n", _jsx(_components.h2, {
      children: "Process Credit Card Information Correctly"
    }), "\n", _jsxs(_components.p, {
      children: ["Look into the ", _jsx(_components.a, {
        href: "https://www.pcisecuritystandards.org/",
        children: "PCI Security Standards"
      }), " for financial security information."]
    }), "\n", _jsx(_components.h2, {
      children: "Use HTTPS for Sensitive Data"
    }), "\n", _jsxs(_components.p, {
      children: ["Set up your ", _jsx(_components.a, {
        href: "http://www.mozilla.org/projects/security/pki/nss/ssl/draft302.txt",
        children: "SSL"
      }), "/", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Https",
        children: "HTTPS"
      }), " certs correctly and check it against ", _jsx(_components.a, {
        href: "https://www.ssllabs.com/ssltest/",
        children: "SSL Labs Server Test"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Session Hijacking"
    }), "\n", _jsx(_components.p, {
      children: "Built in session systems are usually premade to handle these types of attacks. It is not recommended that you roll your own, but it should have the following features:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Encrypted data traffic.  The session key in particular should be encrypted, but ideally all traffic should be encrypted by using SSL/TLS."
      }), "\n", _jsx(_components.li, {
        children: "Long random session key.  Attackers should not be able to guess valid session keys."
      }), "\n", _jsxs(_components.li, {
        children: ["Regenerating the session id after a successful login.  Prevents [session fixation](", _jsx(_components.a, {
          href: "http://en.wikipedia.org/wiki/Session_fixation%5D",
          children: "http://en.wikipedia.org/wiki/Session_fixation]"
        }), "."]
      }), "\n", _jsx(_components.li, {
        children: "Change the cookie value with each and every request.  This reduces the window for an attacker to hijack the session."
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Cross Site Scripting (XSS)"
    }), "\n", _jsxs(_components.p, {
      children: ["Unfiltered query parameters that are added to the DOM are an easy way for attackers to use cross site scripting to pull data from your users.  Filter all query parameters; see ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Cross-site_scripting",
        children: "Cross-site Scripting"
      }), " for more information on common attacks and prevention methods."]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Page Embedding"
    }), "\n", _jsx(_components.p, {
      children: "You can prevent page embedding with the following header:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "X-Frame-Options: DENY\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "This will cause browsers to refuse requests for framing in that page."
    }), "\n", _jsxs(_components.p, {
      children: ["You can also prevent page embedding with JavaScript to prevent users from accessing your website in an iframe.  Look into this ", _jsx(_components.a, {
        href: "http://stackoverflow.com/questions/7776281/javascript-jquery-how-to-detect-if-a-page-is-embedded-by-others",
        children: "StackOverflow solution"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Cross Site Request Forgeries"
    }), "\n", _jsx(_components.p, {
      children: "Cross site request forgeries are attacks by a malicious user whereby they craft a link to a site which a user is know to have been authenticated.  For example, say your site is a bank website; the malicious user may craft a URL for you site that when a user clicks on it, deposits money into the attacker's account.  The attacker then sends the link to users who may have been logged into your bank website."
    }), "\n", _jsxs(_components.p, {
      children: ["According to ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Cross-site_request_forgery",
        children: "Wikipedia"
      }), ":"]
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "At risk are web applications that perform actions based on input from trusted and authenticated users without requiring the user to authorize the specific action. A user who is authenticated by a cookie saved in the user's web browser could unknowingly send an HTTP request to a site that trusts the user and thereby causes an unwanted action."
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Prevent Click Jacking"
    }), "\n", _jsxs(_components.p, {
      children: ["Similar to ", _jsx(_components.a, {
        href: "#prevent-page-embedding",
        children: "Page Embedding"
      }), ", click jacking works by:"]
    }), "\n", _jsxs(_components.blockquote, {
      children: ["\n", _jsx(_components.p, {
        children: "A user might receive an email with a link to a video about a news item, but another valid page, say a product page on Amazon.com, can be \"hidden\" on top or underneath the \"PLAY\" button of the news video. The user tries to \"play\" the video but actually \"buys\" the product from Amazon."
      }), "\n"]
    }), "\n", _jsx(_components.p, {
      children: "Other known exploits include:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Tricking users into enabling their webcam and microphone through Flash"
      }), "\n", _jsx(_components.li, {
        children: "Tricking users into making their social networking profile information public"
      }), "\n", _jsx(_components.li, {
        children: "Making users follow someone on Twitter[8]"
      }), "\n", _jsx(_components.li, {
        children: "Sharing links on Facebook"
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["See ", _jsx(_components.a, {
        href: "http://en.wikipedia.org/wiki/Clickjacking",
        children: "Wikipedia"
      }), " for more information."]
    }), "\n", _jsx(_components.h2, {
      children: "Verify That Server Software is Up to Date"
    }), "\n", _jsx(_components.p, {
      children: "Make sure that the software on your system is up to date with the latest patches."
    }), "\n", _jsx(_components.h2, {
      children: "Verify That Packages, Modules, Plugins, etc are Up to Date"
    }), "\n", _jsx(_components.p, {
      children: "Make sure that the latest software used by your projest is up to date with the latest patches."
    }), "\n", _jsx(_components.h2, {
      children: "Verify That Your Database is Secured"
    }), "\n", _jsx(_components.p, {
      children: "Make sure that connections to the database are at least password protected.  Verify that only the least amount of permissions are being used."
    }), "\n", _jsx(_components.p, {
      children: "Make sure that confidential information is encrypted or hashed."
    }), "\n", _jsx(_components.h2, {
      children: "Attempt to Make Your App Run As Non-Root"
    }), "\n", _jsxs(_components.p, {
      children: ["Apply ", _jsx(_components.a, {
        href: "https://en.wikipedia.org/wiki/Principle_of_least_privilege",
        children: "the principle of least privilege"
      }), " and try to have your app run as non-root as often as possible."]
    }), "\n", _jsx(_components.h2, {
      children: "Use the Content-Security-Policy Header"
    }), "\n", _jsx(_components.p, {
      children: "Specify the following header to make the browser only run certain content depending on its origin:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "example"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "Content-Security-Policy: script-src 'self' https://apis.google.com\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "You can also specify the following type of content:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "script-src (JavaScript)"
      }), "\n", _jsx(_components.li, {
        children: "connect-src (XMLHttpRequest, WebSockets, and EventSource)"
      }), "\n", _jsx(_components.li, {
        children: "font-src (Fonts)"
      }), "\n", _jsx(_components.li, {
        children: "frame-src (Frame Urls)"
      }), "\n", _jsx(_components.li, {
        children: "img-src (Images)"
      }), "\n", _jsx(_components.li, {
        children: "media-src (Audio and Videos)"
      }), "\n", _jsx(_components.li, {
        children: "object-src (Flash)"
      }), "\n", _jsx(_components.li, {
        children: "style-src (CSS)"
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Do Not Allow Mime Sniffing with User Uploaded Content"
    }), "\n", _jsx(_components.p, {
      children: "You can tell browsers to not try to guess Mime Types of files with the following header:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "X-CONTENT-TYPE-OPTIONS: nosniff\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "For example, say a user uploads an HTML file. You intend to serve it to users as a text file, but the browser will attempt to serve it as an HTML page.  You can tell the browser that you know what you are doing and that the Mime Type you are providing is indeed correct by using the above header."
    }), "\n", _jsx(_components.h2, {
      children: "Force HTTPS Traffic"
    }), "\n", _jsx(_components.p, {
      children: "You can force HTTPS Traffic with the following header:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "Scrict-Transport-Security: max-age=31536000; includeSubDomains\n"
      })
    }), "\n", _jsxs(_components.p, {
      children: ["This will force ", _jsx(_components.code, {
        children: "https://website.com"
      }), " even when typing in ", _jsx(_components.code, {
        children: "http://website.com"
      })]
    })]
  });
}
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 security for web applications.</p>
<h2>Prevent Against SQL Injection</h2>
<p>Read about <a href="http://en.wikipedia.org/wiki/SQL_injection">SQL injection</a> and learn how to prevent it for the langauge and database you are using.</p>
<h2>All User Input is Filtered</h2>
<p>Never trust user input.  This includes cookies and hidden form field values.</p>
<h2>Read the Open Web Application Security Project</h2>
<p>Read <a href="https://www.owasp.org/index.php/Category:OWASP_Guide_Project">the Open Web Application Security Project</a>.</p>
<h2>All Passwords are Hashed with a Salt</h2>
<p>Hash all passwords using a <a href="http://security.stackexchange.com/q/21263/396">salt</a> and all salts are different to prevent against <a href="http://en.wikipedia.org/wiki/Rainbow_table">rainbow attacks</a>.</p>
<p>The hashing algorithm should be bcrypt or scrypt for storing passwords.  Look into <a href="http://codahale.com/how-to-safely-store-a-password/">How To Safely Sroe a Password</a>.</p>
<p>Do <strong>not</strong> use MD5 or any SHA algorithm.  SHA algorithms are meant to be fast, which should not be used for trying to securely store passwords.</p>
<h2>Use a Standard Authentication System</h2>
<p>Do not role your own authentication system.</p>
<h2>Process Credit Card Information Correctly</h2>
<p>Look into the <a href="https://www.pcisecuritystandards.org/">PCI Security Standards</a> for financial security information.</p>
<h2>Use HTTPS for Sensitive Data</h2>
<p>Set up your <a href="http://www.mozilla.org/projects/security/pki/nss/ssl/draft302.txt">SSL</a>/<a href="http://en.wikipedia.org/wiki/Https">HTTPS</a> certs correctly and check it against <a href="https://www.ssllabs.com/ssltest/">SSL Labs Server Test</a>.</p>
<h2>Prevent Session Hijacking</h2>
<p>Built in session systems are usually premade to handle these types of attacks. It is not recommended that you roll your own, but it should have the following features:</p>
<ul>
<li>Encrypted data traffic.  The session key in particular should be encrypted, but ideally all traffic should be encrypted by using SSL/TLS.</li>
<li>Long random session key.  Attackers should not be able to guess valid session keys.</li>
<li>Regenerating the session id after a successful login.  Prevents [session fixation](<a href="http://en.wikipedia.org/wiki/Session_fixation%5D">http://en.wikipedia.org/wiki/Session_fixation]</a>.</li>
<li>Change the cookie value with each and every request.  This reduces the window for an attacker to hijack the session.</li>
</ul>
<h2>Prevent Cross Site Scripting (XSS)</h2>
<p>Unfiltered query parameters that are added to the DOM are an easy way for attackers to use cross site scripting to pull data from your users.  Filter all query parameters; see <a href="http://en.wikipedia.org/wiki/Cross-site_scripting">Cross-site Scripting</a> for more information on common attacks and prevention methods.</p>
<h2>Prevent Page Embedding</h2>
<p>You can prevent page embedding with the following header:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>X-Frame-Options: DENY
</code></pre></div>
<p>This will cause browsers to refuse requests for framing in that page.</p>
<p>You can also prevent page embedding with JavaScript to prevent users from accessing your website in an iframe.  Look into this <a href="http://stackoverflow.com/questions/7776281/javascript-jquery-how-to-detect-if-a-page-is-embedded-by-others">StackOverflow solution</a>.</p>
<h2>Prevent Cross Site Request Forgeries</h2>
<p>Cross site request forgeries are attacks by a malicious user whereby they craft a link to a site which a user is know to have been authenticated.  For example, say your site is a bank website; the malicious user may craft a URL for you site that when a user clicks on it, deposits money into the attacker&#x27;s account.  The attacker then sends the link to users who may have been logged into your bank website.</p>
<p>According to <a href="http://en.wikipedia.org/wiki/Cross-site_request_forgery">Wikipedia</a>:</p>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>At risk are web applications that perform actions based on input from trusted and authenticated users without requiring the user to authorize the specific action. A user who is authenticated by a cookie saved in the user&#x27;s web browser could unknowingly send an HTTP request to a site that trusts the user and thereby causes an unwanted action.</p>
</blockquote>
<h2>Prevent Click Jacking</h2>
<p>Similar to <a href="#prevent-page-embedding">Page Embedding</a>, click jacking works by:</p>
<blockquote class="border-l-4 border-gray-300 pl-4">
<p>A user might receive an email with a link to a video about a news item, but another valid page, say a product page on Amazon.com, can be &quot;hidden&quot; on top or underneath the &quot;PLAY&quot; button of the news video. The user tries to &quot;play&quot; the video but actually &quot;buys&quot; the product from Amazon.</p>
</blockquote>
<p>Other known exploits include:</p>
<ul>
<li>Tricking users into enabling their webcam and microphone through Flash</li>
<li>Tricking users into making their social networking profile information public</li>
<li>Making users follow someone on Twitter[8]</li>
<li>Sharing links on Facebook</li>
</ul>
<p>See <a href="http://en.wikipedia.org/wiki/Clickjacking">Wikipedia</a> for more information.</p>
<h2>Verify That Server Software is Up to Date</h2>
<p>Make sure that the software on your system is up to date with the latest patches.</p>
<h2>Verify That Packages, Modules, Plugins, etc are Up to Date</h2>
<p>Make sure that the latest software used by your projest is up to date with the latest patches.</p>
<h2>Verify That Your Database is Secured</h2>
<p>Make sure that connections to the database are at least password protected.  Verify that only the least amount of permissions are being used.</p>
<p>Make sure that confidential information is encrypted or hashed.</p>
<h2>Attempt to Make Your App Run As Non-Root</h2>
<p>Apply <a href="https://en.wikipedia.org/wiki/Principle_of_least_privilege">the principle of least privilege</a> and try to have your app run as non-root as often as possible.</p>
<h2>Use the Content-Security-Policy Header</h2>
<p>Specify the following header to make the browser only run certain content depending on its origin:</p>
<p><strong>example</strong></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>Content-Security-Policy: script-src &#x27;self&#x27; https://apis.google.com
</code></pre></div>
<p>You can also specify the following type of content:</p>
<ul>
<li>script-src (JavaScript)</li>
<li>connect-src (XMLHttpRequest, WebSockets, and EventSource)</li>
<li>font-src (Fonts)</li>
<li>frame-src (Frame Urls)</li>
<li>img-src (Images)</li>
<li>media-src (Audio and Videos)</li>
<li>object-src (Flash)</li>
<li>style-src (CSS)</li>
</ul>
<h2>Do Not Allow Mime Sniffing with User Uploaded Content</h2>
<p>You can tell browsers to not try to guess Mime Types of files with the following header:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>X-CONTENT-TYPE-OPTIONS: nosniff
</code></pre></div>
<p>For example, say a user uploads an HTML file. You intend to serve it to users as a text file, but the browser will attempt to serve it as an HTML page.  You can tell the browser that you know what you are doing and that the Mime Type you are providing is indeed correct by using the above header.</p>
<h2>Force HTTPS Traffic</h2>
<p>You can force HTTPS Traffic with the following header:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>Scrict-Transport-Security: max-age=31536000; includeSubDomains
</code></pre></div>
<p>This will force <code>https://website.com</code> even when typing in <code>http://website.com</code></p>


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

## Prevent Against SQL Injection

Read about [SQL injection](http://en.wikipedia.org/wiki/SQL_injection) and learn how to prevent it for the langauge and database you are using.

## All User Input is Filtered

Never trust user input.  This includes cookies and hidden form field values.

## Read the Open Web Application Security Project

Read [the Open Web Application Security Project](https://www.owasp.org/index.php/Category:OWASP_Guide_Project).

## All Passwords are Hashed with a Salt

Hash all passwords using a [salt](http://security.stackexchange.com/q/21263/396) and all salts are different to prevent against [rainbow attacks](http://en.wikipedia.org/wiki/Rainbow_table).

The hashing algorithm should be bcrypt or scrypt for storing passwords.  Look into [How To Safely Sroe a Password](http://codahale.com/how-to-safely-store-a-password/).

Do **not** use MD5 or any SHA algorithm.  SHA algorithms are meant to be fast, which should not be used for trying to securely store passwords.

## Use a Standard Authentication System

Do not role your own authentication system.

## Process Credit Card Information Correctly

Look into the [PCI Security Standards](https://www.pcisecuritystandards.org/) for financial security information.

## Use HTTPS for Sensitive Data

Set up your [SSL](http://www.mozilla.org/projects/security/pki/nss/ssl/draft302.txt)/[HTTPS](http://en.wikipedia.org/wiki/Https) certs correctly and check it against [SSL Labs Server Test](https://www.ssllabs.com/ssltest/).

## Prevent Session Hijacking

Built in session systems are usually premade to handle these types of attacks. It is not recommended that you roll your own, but it should have the following features:

- Encrypted data traffic.  The session key in particular should be encrypted, but ideally all traffic should be encrypted by using SSL/TLS.
- Long random session key.  Attackers should not be able to guess valid session keys.
- Regenerating the session id after a successful login.  Prevents [session fixation](http://en.wikipedia.org/wiki/Session_fixation].
- Change the cookie value with each and every request.  This reduces the window for an attacker to hijack the session.

## Prevent Cross Site Scripting (XSS)

Unfiltered query parameters that are added to the DOM are an easy way for attackers to use cross site scripting to pull data from your users.  Filter all query parameters; see [Cross-site Scripting](http://en.wikipedia.org/wiki/Cross-site_scripting) for more information on common attacks and prevention methods.

## Prevent Page Embedding

You can prevent page embedding with the following header:

```
X-Frame-Options: DENY
```

This will cause browsers to refuse requests for framing in that page.

You can also prevent page embedding with JavaScript to prevent users from accessing your website in an iframe.  Look into this [StackOverflow solution](http://stackoverflow.com/questions/7776281/javascript-jquery-how-to-detect-if-a-page-is-embedded-by-others).

## Prevent Cross Site Request Forgeries

Cross site request forgeries are attacks by a malicious user whereby they craft a link to a site which a user is know to have been authenticated.  For example, say your site is a bank website; the malicious user may craft a URL for you site that when a user clicks on it, deposits money into the attacker's account.  The attacker then sends the link to users who may have been logged into your bank website.

According to [Wikipedia](http://en.wikipedia.org/wiki/Cross-site_request_forgery):

> At risk are web applications that perform actions based on input from trusted and authenticated users without requiring the user to authorize the specific action. A user who is authenticated by a cookie saved in the user's web browser could unknowingly send an HTTP request to a site that trusts the user and thereby causes an unwanted action.

## Prevent Click Jacking

Similar to [Page Embedding](#prevent-page-embedding), click jacking works by:

> A user might receive an email with a link to a video about a news item, but another valid page, say a product page on Amazon.com, can be "hidden" on top or underneath the "PLAY" button of the news video. The user tries to "play" the video but actually "buys" the product from Amazon.

Other known exploits include:

- Tricking users into enabling their webcam and microphone through Flash
- Tricking users into making their social networking profile information public
- Making users follow someone on Twitter[8]
- Sharing links on Facebook

See [Wikipedia](http://en.wikipedia.org/wiki/Clickjacking) for more information.

## Verify That Server Software is Up to Date

Make sure that the software on your system is up to date with the latest patches.

## Verify That Packages, Modules, Plugins, etc are Up to Date

Make sure that the latest software used by your projest is up to date with the latest patches.

## Verify That Your Database is Secured

Make sure that connections to the database are at least password protected.  Verify that only the least amount of permissions are being used.

Make sure that confidential information is encrypted or hashed.

## Attempt to Make Your App Run As Non-Root

Apply [the principle of least privilege](https://en.wikipedia.org/wiki/Principle_of_least_privilege) and try to have your app run as non-root as often as possible.

## Use the Content-Security-Policy Header

Specify the following header to make the browser only run certain content depending on its origin:

**example**

```
Content-Security-Policy: script-src 'self' https://apis.google.com
```

You can also specify the following type of content:

- script-src (JavaScript)
- connect-src (XMLHttpRequest, WebSockets, and EventSource)
- font-src (Fonts)
- frame-src (Frame Urls)
- img-src (Images)
- media-src (Audio and Videos)
- object-src (Flash)
- style-src (CSS)

## Do Not Allow Mime Sniffing with User Uploaded Content

You can tell browsers to not try to guess Mime Types of files with the following header:

```
X-CONTENT-TYPE-OPTIONS: nosniff
```

For example, say a user uploads an HTML file. You intend to serve it to users as a text file, but the browser will attempt to serve it as an HTML page.  You can tell the browser that you know what you are doing and that the Mime Type you are providing is indeed correct by using the above header.

## Force HTTPS Traffic

You can force HTTPS Traffic with the following header:

```
Scrict-Transport-Security: max-age=31536000; includeSubDomains
```

This will force `https://website.com` even when typing in `http://website.com`


Security

/*@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.


/*@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",
    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"
  }, 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 maintenance of web applications."
    }), "\n", _jsx(_components.h2, {
      children: "Setup an Error/Bug Reporting Solution"
    }), "\n", _jsx(_components.p, {
      children: "Use Github's issue tracker, or JIRA, or anything.  Keeping track of issues, enhancements, and bugs in progress helps tremendously down the line."
    }), "\n", _jsx(_components.h2, {
      children: "Setup a Contact Form"
    }), "\n", _jsx(_components.p, {
      children: "Simple email forms or using other services like Reddit or even forums can help users give you suggestions and criticism."
    }), "\n", _jsx(_components.h2, {
      children: "Documentation"
    }), "\n", _jsx(_components.p, {
      children: "Document how the application works, the deployment progress, and anything else you can!  Those who do future maintenance will thank you."
    }), "\n", _jsx(_components.h2, {
      children: "Backup/Restore Strategy"
    }), "\n", _jsx(_components.p, {
      children: "Have a backup strategy and a restore strategy."
    }), "\n", _jsx(_components.h2, {
      children: "Version Control Your Project"
    }), "\n", _jsx(_components.p, {
      children: "Use Subversion, Mecurial, Git to version control your files.  Preferably Git ;) ."
    }), "\n", _jsx(_components.h2, {
      children: "Setup Unit Tests/Acceptance Tests/Regression Test etc"
    }), "\n", _jsx(_components.p, {
      children: "Getting any type of tests is very useful, especially acceptance testing and integration testing."
    }), "\n", _jsx(_components.h2, {
      children: "Setup Logging"
    }), "\n", _jsx(_components.p, {
      children: "Log any application errors, user errors, exceptions, etc."
    })]
  });
}
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 maintenance of web applications.</p>
<h2>Setup an Error/Bug Reporting Solution</h2>
<p>Use Github&#x27;s issue tracker, or JIRA, or anything.  Keeping track of issues, enhancements, and bugs in progress helps tremendously down the line.</p>
<h2>Setup a Contact Form</h2>
<p>Simple email forms or using other services like Reddit or even forums can help users give you suggestions and criticism.</p>
<h2>Documentation</h2>
<p>Document how the application works, the deployment progress, and anything else you can!  Those who do future maintenance will thank you.</p>
<h2>Backup/Restore Strategy</h2>
<p>Have a backup strategy and a restore strategy.</p>
<h2>Version Control Your Project</h2>
<p>Use Subversion, Mecurial, Git to version control your files.  Preferably Git ;) .</p>
<h2>Setup Unit Tests/Acceptance Tests/Regression Test etc</h2>
<p>Getting any type of tests is very useful, especially acceptance testing and integration testing.</p>
<h2>Setup Logging</h2>
<p>Log any application errors, user errors, exceptions, etc.</p>


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

## Setup an Error/Bug Reporting Solution

Use Github's issue tracker, or JIRA, or anything.  Keeping track of issues, enhancements, and bugs in progress helps tremendously down the line.

## Setup a Contact Form

Simple email forms or using other services like Reddit or even forums can help users give you suggestions and criticism.

## Documentation

Document how the application works, the deployment progress, and anything else you can!  Those who do future maintenance will thank you.

## Backup/Restore Strategy

Have a backup strategy and a restore strategy.

## Version Control Your Project

Use Subversion, Mecurial, Git to version control your files.  Preferably Git ;) .

## Setup Unit Tests/Acceptance Tests/Regression Test etc

Getting any type of tests is very useful, especially acceptance testing and integration testing.

## Setup Logging

Log any application errors, user errors, exceptions, etc.


Maintenance

/*@jsxRuntime automatic @jsxImportSource react*/
const {Fragment: _Fragment, jsx: _jsx, jsxs: _jsxs} = arguments[0];
function _createMdxContent(props) {
  const _components = Object.assign({
    p: "p",
    em: "em",
    h2: "h2",
    ul: "ul",
    li: "li",
    a: "a",
    strong: "strong",
    pre: "pre",
    code: "code",
    h3: "h3"
  }, 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 RESTful interfaces and how to design them."
    }), "\n", _jsxs(_components.p, {
      children: ["RESTful APIs are a common way for applications to be able to communicate with each other.  An important part about RESTful APIs is that they are ", _jsx(_components.em, {
        children: "consistent"
      }), ".  Naming, verbage, actions, and errors should be consistent within your API and with how other APIs behave."]
    }), "\n", _jsx(_components.p, {
      children: "Here are some tips and questions that you should ask yourself when developing an API."
    }), "\n", _jsx(_components.h2, {
      children: "Are you using PUT and POST correctly?"
    }), "\n", _jsx(_components.p, {
      children: "Both PUT and POST can be used for creating. You do not need to support both PUT and POST. Consider the following design decisions:"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: "Do you name your URL objects you create explicitly, or let the server decide? If you name them then use PUT. If you let the server decide then use POST."
      }), "\n", _jsx(_components.li, {
        children: "PUT is idempotent, so if you PUT an object twice, it has no effect. This is a nice property, so I would use PUT when possible."
      }), "\n", _jsx(_components.li, {
        children: "You can update or create a resource with PUT with the same object URL"
      }), "\n", _jsx(_components.li, {
        children: "With POST you can have 2 requests coming in at the same time making modifications to a URL, and they may update different parts of the object."
      }), "\n"]
    }), "\n", _jsxs(_components.p, {
      children: ["See ", _jsx(_components.a, {
        href: "http://stackoverflow.com/questions/630453/put-vs-post-in-rest",
        children: "this StackOverflow question for more information"
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Are you using appropriate verbs?"
    }), "\n", _jsx(_components.p, {
      children: "When making a REST API, your verbs are your request types, not actual verbs in your URL!  Your URLs should use nouns, not verbs!  Remember to use the plural form for multiple results."
    }), "\n", _jsx(_components.p, {
      children: "Use your URLs to specify your objects.  Here are some examples of RESTful style requests:"
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Obtain 1 Question"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "GET /questions/<question>\n"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Obtain All Questions"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "GET /questions\n"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Append/Update Question"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "POST /questions/<existing_question>\n"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Create a New Question"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "PUT /questions/<new_question>\n"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Overwrite a Question"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "PUT /questions/<existing_question>\n"
      })
    }), "\n", _jsx(_components.p, {
      children: _jsx(_components.strong, {
        children: "Delete Question"
      })
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "DELETE /questions/<existing_question>\n"
      })
    }), "\n", _jsx(_components.h2, {
      children: "Nested Resources should be exenstions, not entirely different queries"
    }), "\n", _jsx(_components.p, {
      children: "If you want to get answers to a question, using the above examples as a starting point, the URL should be:"
    }), "\n", _jsx(_components.pre, {
      children: _jsx(_components.code, {
        children: "GET /questions/1/answers\n"
      })
    }), "\n", _jsx(_components.p, {
      children: "This is nested routing and it helps for a cleaner design."
    }), "\n", _jsx(_components.h2, {
      children: "Do you have a plan to version your API?"
    }), "\n", _jsx(_components.p, {
      children: "There are different ways to version your API, but it's nice to plan ahead in order for consumers of your API to be prepared."
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.a, {
        href: "https://developer.github.com/v3/media/#request-specific-version",
        children: "Github uses"
      }), " the ", _jsx(_components.code, {
        children: "Accept"
      }), " HTTP header to pass the desired version to the API."]
    }), "\n", _jsxs(_components.p, {
      children: ["Another less common method is to version the application in the URL: ", _jsx(_components.code, {
        children: "/api/v1/..."
      }), "."]
    }), "\n", _jsx(_components.h2, {
      children: "Paging"
    }), "\n", _jsxs(_components.p, {
      children: ["Large result sets should be paginated, you can use ", _jsx(_components.a, {
        href: "https://developer.github.com/guides/traversing-with-pagination/",
        children: "the Github method"
      }), " for indicated next and previous pages of results using the ", _jsx(_components.code, {
        children: "Link"
      }), " HTTP header."]
    }), "\n", _jsx(_components.h2, {
      children: "HTTP Status Codes"
    }), "\n", _jsxs(_components.p, {
      children: [_jsx(_components.a, {
        href: "https://bourgeois.me/rest/",
        children: "This list of HTTP Status codes"
      }), " and their meaning is very helpful for knowing what HTTP Status your API should be returning.  It has been duplicated here as a backup:"]
    }), "\n", _jsx(_components.h3, {
      children: "Success codes"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "201 Created"
        }), " should be used when creating content (INSERT)"]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "202 Accepted"
        }), " should be used when a request is queued for background processing (async tasks),"]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "204 No Content"
        }), " should be used when the request was properly executed but no content was returned (a good example would be when you delete something)."]
      }), "\n"]
    }), "\n", _jsx(_components.h3, {
      children: "Client error codes"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "400 Bad Request"
        }), " should be used when there was an error while processing the request payload (malformed JSON, for instance)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "401 Unauthorized"
        }), " should be used when a request is not authenticiated (wrong access token, or username or password)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "403 Forbidden"
        }), " should be used when the request is successfully authenticiated (see 401), but the action was forbidden."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "406 Not Acceptable"
        }), " should be used when the requested format is not available (for instance, when requesting an XML resource from a JSON only server)."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "410 Gone Should"
        }), " be returned when the requested resource is permenantely deleted and will never be available again."]
      }), "\n", _jsxs(_components.li, {
        children: [_jsx(_components.code, {
          children: "422 Unprocesable entity"
        }), " Could be used when there was a validation error while creating an object.\nA more complete list of status codes can be found in ", _jsx(_components.a, {
          href: "http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html",
          children: "RFC2616"
        }), "."]
      }), "\n"]
    }), "\n", _jsx(_components.h2, {
      children: "Further Reading"
    }), "\n", _jsxs(_components.ul, {
      children: ["\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "https://pages.apigee.com/rs/apigee/images/api-design-ebook-2012-03.pdf",
          children: "API Design Ebook"
        })
      }), "\n", _jsx(_components.li, {
        children: _jsx(_components.a, {
          href: "http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api",
          children: "Best Practices for a Pragmatic RESTful API"
        })
      }), "\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 RESTful interfaces and how to design them.</p>
<p>RESTful APIs are a common way for applications to be able to communicate with each other.  An important part about RESTful APIs is that they are <em>consistent</em>.  Naming, verbage, actions, and errors should be consistent within your API and with how other APIs behave.</p>
<p>Here are some tips and questions that you should ask yourself when developing an API.</p>
<h2>Are you using PUT and POST correctly?</h2>
<p>Both PUT and POST can be used for creating. You do not need to support both PUT and POST. Consider the following design decisions:</p>
<ul>
<li>Do you name your URL objects you create explicitly, or let the server decide? If you name them then use PUT. If you let the server decide then use POST.</li>
<li>PUT is idempotent, so if you PUT an object twice, it has no effect. This is a nice property, so I would use PUT when possible.</li>
<li>You can update or create a resource with PUT with the same object URL</li>
<li>With POST you can have 2 requests coming in at the same time making modifications to a URL, and they may update different parts of the object.</li>
</ul>
<p>See <a href="http://stackoverflow.com/questions/630453/put-vs-post-in-rest">this StackOverflow question for more information</a>.</p>
<h2>Are you using appropriate verbs?</h2>
<p>When making a REST API, your verbs are your request types, not actual verbs in your URL!  Your URLs should use nouns, not verbs!  Remember to use the plural form for multiple results.</p>
<p>Use your URLs to specify your objects.  Here are some examples of RESTful style requests:</p>
<p><strong>Obtain 1 Question</strong></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>GET /questions/&lt;question&gt;
</code></pre></div>
<p><strong>Obtain All Questions</strong></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>GET /questions
</code></pre></div>
<p><strong>Append/Update Question</strong></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>POST /questions/&lt;existing_question&gt;
</code></pre></div>
<p><strong>Create a New Question</strong></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>PUT /questions/&lt;new_question&gt;
</code></pre></div>
<p><strong>Overwrite a Question</strong></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>PUT /questions/&lt;existing_question&gt;
</code></pre></div>
<p><strong>Delete Question</strong></p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>DELETE /questions/&lt;existing_question&gt;
</code></pre></div>
<h2>Nested Resources should be exenstions, not entirely different queries</h2>
<p>If you want to get answers to a question, using the above examples as a starting point, the URL should be:</p>
<div class="overflow-auto rounded bg-gray-200 p-4 font-mono text-sm dark:bg-gray-800 dark:text-gray-100"><pre><code>GET /questions/1/answers
</code></pre></div>
<p>This is nested routing and it helps for a cleaner design.</p>
<h2>Do you have a plan to version your API?</h2>
<p>There are different ways to version your API, but it&#x27;s nice to plan ahead in order for consumers of your API to be prepared.</p>
<p><a href="https://developer.github.com/v3/media/#request-specific-version">Github uses</a> the <code>Accept</code> HTTP header to pass the desired version to the API.</p>
<p>Another less common method is to version the application in the URL: <code>/api/v1/...</code>.</p>
<h2>Paging</h2>
<p>Large result sets should be paginated, you can use <a href="https://developer.github.com/guides/traversing-with-pagination/">the Github method</a> for indicated next and previous pages of results using the <code>Link</code> HTTP header.</p>
<h2>HTTP Status Codes</h2>
<p><a href="https://bourgeois.me/rest/">This list of HTTP Status codes</a> and their meaning is very helpful for knowing what HTTP Status your API should be returning.  It has been duplicated here as a backup:</p>
<h3>Success codes</h3>
<ul>
<li><code>201 Created</code> should be used when creating content (INSERT)</li>
<li><code>202 Accepted</code> should be used when a request is queued for background processing (async tasks),</li>
<li><code>204 No Content</code> should be used when the request was properly executed but no content was returned (a good example would be when you delete something).</li>
</ul>
<h3>Client error codes</h3>
<ul>
<li><code>400 Bad Request</code> should be used when there was an error while processing the request payload (malformed JSON, for instance).</li>
<li><code>401 Unauthorized</code> should be used when a request is not authenticiated (wrong access token, or username or password).</li>
<li><code>403 Forbidden</code> should be used when the request is successfully authenticiated (see 401), but the action was forbidden.</li>
<li><code>406 Not Acceptable</code> should be used when the requested format is not available (for instance, when requesting an XML resource from a JSON only server).</li>
<li><code>410 Gone Should</code> be returned when the requested resource is permenantely deleted and will never be available again.</li>
<li><code>422 Unprocesable entity</code> Could be used when there was a validation error while creating an object.
A more complete list of status codes can be found in <a href="http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">RFC2616</a>.</li>
</ul>
<h2>Further Reading</h2>
<ul>
<li><a href="https://pages.apigee.com/rs/apigee/images/api-design-ebook-2012-03.pdf">API Design Ebook</a></li>
<li><a href="http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api">Best Practices for a Pragmatic RESTful API</a></li>
</ul>


This post was originally on a blog I started for creating web applications. This post goes into RESTful interfaces and how to design them.

RESTful APIs are a common way for applications to be able to communicate with each other.  An important part about RESTful APIs is that they are *consistent*.  Naming, verbage, actions, and errors should be consistent within your API and with how other APIs behave.

Here are some tips and questions that you should ask yourself when developing an API.

## Are you using PUT and POST correctly?

Both PUT and POST can be used for creating. You do not need to support both PUT and POST. Consider the following design decisions:

- Do you name your URL objects you create explicitly, or let the server decide? If you name them then use PUT. If you let the server decide then use POST.
- PUT is idempotent, so if you PUT an object twice, it has no effect. This is a nice property, so I would use PUT when possible.
- You can update or create a resource with PUT with the same object URL
- With POST you can have 2 requests coming in at the same time making modifications to a URL, and they may update different parts of the object.

See [this StackOverflow question for more information](http://stackoverflow.com/questions/630453/put-vs-post-in-rest).

## Are you using appropriate verbs?

When making a REST API, your verbs are your request types, not actual verbs in your URL!  Your URLs should use nouns, not verbs!  Remember to use the plural form for multiple results.

Use your URLs to specify your objects.  Here are some examples of RESTful style requests:

**Obtain 1 Question**

```
GET /questions/<question>
```

**Obtain All Questions**

```
GET /questions
```

**Append/Update Question**

```
POST /questions/<existing_question>
```

**Create a New Question**

```
PUT /questions/<new_question>
```

**Overwrite a Question**

```
PUT /questions/<existing_question>
```

**Delete Question**

```
DELETE /questions/<existing_question>
```

## Nested Resources should be exenstions, not entirely different queries

If you want to get answers to a question, using the above examples as a starting point, the URL should be:

```
GET /questions/1/answers
```

This is nested routing and it helps for a cleaner design.

## Do you have a plan to version your API?

There are different ways to version your API, but it's nice to plan ahead in order for consumers of your API to be prepared.

[Github uses](https://developer.github.com/v3/media/#request-specific-version) the `Accept` HTTP header to pass the desired version to the API.

Another less common method is to version the application in the URL: `/api/v1/...`.

## Paging

Large result sets should be paginated, you can use [the Github method](https://developer.github.com/guides/traversing-with-pagination/) for indicated next and previous pages of results using the `Link` HTTP header.

## HTTP Status Codes

[This list of HTTP Status codes](https://bourgeois.me/rest/) and their meaning is very helpful for knowing what HTTP Status your API should be returning.  It has been duplicated here as a backup:

### Success codes

- `201 Created` should be used when creating content (INSERT)
- `202 Accepted` should be used when a request is queued for background processing (async tasks),
- `204 No Content` should be used when the request was properly executed but no content was returned (a good example would be when you delete something).

### Client error codes

- `400 Bad Request` should be used when there was an error while processing the request payload (malformed JSON, for instance).
- `401 Unauthorized` should be used when a request is not authenticiated (wrong access token, or username or password).
- `403 Forbidden` should be used when the request is successfully authenticiated (see 401), but the action was forbidden.
- `406 Not Acceptable` should be used when the requested format is not available (for instance, when requesting an XML resource from a JSON only server).
- `410 Gone Should` be returned when the requested resource is permenantely deleted and will never be available again.
- `422 Unprocesable entity` Could be used when there was a validation error while creating an object.
A more complete list of status codes can be found in [RFC2616](http://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html).

## Further Reading

- [API Design Ebook](https://pages.apigee.com/rs/apigee/images/api-design-ebook-2012-03.pdf)
- [Best Practices for a Pragmatic RESTful API](http://www.vinaysahni.com/best-practices-for-a-pragmatic-restful-api)


Blog Page 4

Security

SEO

Accessibility

Performance

Maintenance

RESTful Interfaces