14Four Wiki

# Website Requirements

# Title

The Title is visible in a browser tab and is also used by Search Engines in result lists. For sites with multiple pages, the title should be unique to the content for a given page although this is less important for shorter lived projects that are more promotional in nature; Sweepstakes, Meme Generators, etc.

# HTML

<title>Wiki | 14Four</title>

# Favicon

The Favicon is the small image displayed next to the Title in the browser tab and may also be used by Search Engines in result lists, displayed next to the page title of the result.

Depending on the project, this can be sourced from a brand site (www.quaker.com for a Quaker Sweepstakes Site) or requested from the client.

<!-- Standard favicon -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Recommended favicon format -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">

# Browser Support

Our typical browser support is 'latest two' versions of Chrome, Safari, Edge and Firefox. However you should always review the scope to ensure that you are testing the right browsers. Test across an Mobile, Tablet and Desktop devices.

TIP

Chrome on iOS uses a WKWebView that displays page using Safari and not it's own rendering engine.

We have a Browserstack (access in 1Password) account available for testing along with a couple of PC's and a slew of devices upstairs at Seven2. To borrow a device, write your name on a card found on top of the device rack and place it in the slot of the device you are borrowing.

# Social Metadata

<!--  Facebook -->
<meta property="og:url" content="https://www.example.com"/>
<meta property="og:site_name" content="The name of your website"/>
<meta property="og:title" content="The name of your website"/>
<meta property="og:titdescriptionle" content="A detailed description of the piece of content"/>
<meta property="og:image" content="https://www.example.com/facebook.jpg"/>
<meta property="og:image:width" content="1200"/>
<meta property="og:image:height" content="630"/>

<!--- Twitter -->
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@handle" />

TIP

Twitter will fallback to using the available Open Graph (OG) Tags, so title and description tags are required if content should be unique to Twitter

# Additional Resources

← Banner Framework Overview →