Travis Smith wpsmithtwc

#Meta Tags

<!---favicon-->
<link rel="icon" href="http://www.example.com/favicon.ico" type="image/x-icon">
<link rel="shortcut icon" href="http://www.example.com/favicon.ico" type="image/x-icon">

<!--Apple Touch Icon for iPad and iPhone Meta Tag-->
<link rel="apple-touch-icon" href="http://www.example.com/apple-touch-icon.png">
<link rel="apple-touch-icon-precomposed" href="http://www.example.com/apple-touch-icon.png">

Intro

http://socialdriver.com/2012/07/20-best-responsive-websites/ lists 20 sites that are supposedly best-in-class when it comes to responsive design techniques. I had a look at the viewport meta tags used in these sites.

Findings

All sites use width=device-width, with in most cases an additional initial-scale=1. This is good practice.

However:

8 sites turn off pinch-zooming by setting maximum-scale to 1, or using user-scalable=no. While there are some corner use cases for this, it does not make sense to do this on text-heavy sites as it impairs accessibility.
3 sites use semi-colons as delimiters between viewport values. While this works in newer mobile browsers, it's not officially supported, and breaks in older mobile browser versions.
1 site has 2 viewport meta tags (with different values) in the source...

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta name="keywords" content="your, tags"/>
<meta name="description" content="150 words"/>
<meta name="subject" content="your website's subject">
<meta name="copyright"content="company name">
<meta name="language" content="ES">

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>

Copied from http://code.lancepollard.com/complete-list-of-html-meta-tags/

Basic HTML Meta Tags

<meta charset='UTF-8'>
<meta name='keywords' content='your, tags'>
<meta name='description' content='150 words'>
<meta name='subject' content='your website's subject'>
<meta name='copyright' content='company name'>

	package main

	import (
	"bytes"
	"encoding/json"
	"fmt"
	"strconv"
	)

	func main() {


	<!-- add the following code in the head tag -->
	<head prefix='og: http://ogp.me/ns# fb: http://ogp.me/ns/fb# article: http://ogp.me/ns/article#'>

	<!-- Share Image -->
	<link href='YOUR_LOGO_IMAGE' rel='image_src'/>

	<!-- Open Graph Meta Tags -->
	<b:if cond='data:blog.pageType != "index"'>
	<meta expr:content='data:blog.title' property='og:site_name'/>

	<?php
	/*
	Plugin Name: Custom META Tags
	Description: Add custom META tags on a per-page/post basis using custom fields.
	Author: Keith Solomon
	Version: 1.0
	Author URI: http://solowebdesigns.net/
	*/

	<html>
	<head>

	<!--Recommended Meta Tags-->
	<meta charset="utf-8">
	<meta name="language" content="english">
	<meta http-equiv="content-type" content="text/html">
	<meta name="author" content=”Rafayel Mkrtchyan”>
	<meta name="designer" content=”Rafayel Mkrtchyan”>
	<meta name="publisher" content=”Rafayel Mkrtchyan”>

	---
	layout: default
	permalink: /search/
	---

	<!--
	http://10consulting.com/2013/03/06/jekyll-and-lunr-js-static-websites-with-powerful-full-text-search-using-javascript/
	-->

	<div class="home">