Google adds experimental proxy to Chrome for Android

Google Chrome Android beta logo

Google Chrome 26 for Android includes an experimental setting to proxy all http scheme requests through Google servers. Chrome for Android opens a SPDY connection to a Google server running a Page Speed proxy which performs a DNS lookup, converts all images to WebP, and compression and minification of HTML, CSS, and JavaScript.

HTTPS traffic and incognito tabs bypass the proxy. The original IP address of the device is exposed through the X-Forwarded-For HTTP header.

Google Chrome 26 for Android is the current com.chrome.beta release.

Nike+ Accelerator

Nike+ devices 2012

Nike partnered with TechStars to attract ten startup companies to Portland, Oregon for three months to create new experiences and companies based on the Nike+ APIs. The Nike+ Accelerator offers accepted startup companies $20,000, access to Nike executives and an outside mentor network, office space, and free server hosting. TechStars receives 6% equity in each participating company.

The corporate accelerator seems like a pretty good trial as Nike tries to expand its role in digital devices. Total cost to Nike is unreleased but assuming $200,000 plus access to executives might be a similar cost as running developer days in multiple cities.

Twitter Card markup in expanded Tweets

Twitter now supports story summaries in an expanded Tweet view powered by Twitter Card markup. Twitter looks for special <meta> elements inside linked pages to classify content and build a story summary. Twitter Cards fall back to Open Graph protocol markup to complete a story when no Twitter-specific <meta> exists. Publishers may associate a page with an author and site Twitter account to encourage new followers. Twitter plans to syndicate parsed story summaries with the Tweet data, allowing a viewer to browse basic story information in a mobile client before following the link. Anyone can add Twitter Card markup to their pages; Twitter is currently whitelisting domains for special treatment within timeline (request inclusion here).

I wrote a Twitter Card generator for PHP and a Twitter Card WordPress plugin if you would like to add Twitter Card markup to your site.

Card types

Twitter supports three types of story summaries: summary, photo, and player.

Summary

Twitter Card summary

All pages are considered a “summary” by default. Twitter wants to see a canonical URL, page title up to 70 characters, and a description up to 200 characters. You may optionally provide an image Twitter will crop and resize to a 120×120 pixel square.

Photo

Twitter Card photo

Photo cards place an image at the top of the story summary expanded up to the full width of the expanded Tweet display area. Photos must be at least 280 pixels wide and 150 pixels tall to meet the minimum viewing area of mobile phone client. Twitter will resize your image up to a maximum width of 560 pixels while trying to maintain your original aspect ratio.

Player

Twitter Card player

A player card features inline video through an HTML <iframe> or a directly linked MP4 file with a H.264 Baseline Level 3.0 video track and AAC LC audio track up to 640×480 pixels. All video assets are expected to be served over HTTPS to avoid any mixed content issues with a parent Twitter HTTPS timeline.

Google recommendations for smartphone-optimized websites

Google updated its webmaster recommendations for smartphone-optimized websites. You may need to change your site HTML and server headers to help Google’s various crawlers find your smartphone content and better associate the same pages optimized for various screen sizes. Google recommends responsive web design with CSS media queries for smartphone-optimized websites.

Recommended changes vary based on your site’s approach to smartphone optimized content: responsive design, content negotiation, or redirects to mobile-specific URLs.

Responsive web design

Google will download your page CSS and evaluate viewport width ranges specified as media queries. Google considers sites optimized for a 640 pixel width as smartphone-optimized and may look for other resolutions “that can be reasonably expected to refer to smartphone screen resolutions.”

If your site uses responsive web design make sure your CSS and JavaScript assets specifying such behavior are not blocked by robots.txt rules.

Content negotiation by User-Agent

Does your site look for strings such as “iphone” or “android” in a User-Agent string to trigger a smartphone-specific template? Add a Vary HTTP header value of “User-Agent” to encourage Google to revisit your page with a smartphone User-Agent string.

Separate mobile site

Do you redirect incoming requests to a mobile-specific URL (e.g. mydomain.com to m.mydomain.com? Google wants you to define your viewport targets on your main site page and in your sitemaps, define a <link rel=canonical> on your mobile page referencing the equivalent main page, and include a Vary HTTP header in the response.

On your main (desktop-focused) page add a new <link rel=alternate> scoped with a media query specifying the minimum and maximum target widths of your mobile site(s).

In your sitemap files add the same markup with an xHTML namespace + prefix definition: xmlns:xhtml="http://www.w3.org/1999/xhtml" + <xhtml:link>

Adding a canonical link to your mobile page helps collapse references to the same content across your different URLs; the link references for your mobile and desktop versions of the same page can be combined, helping your pages appear more relevant when competing with other content for a high result placement.

Summary

Google crawls the web with many different search agents including Googlebot and Googlebot-Mobile. Make sure your server is configured to properly speak to both, encourage follow-up visits from more task-specific crawlers, and rank higher in search results by better describing your page, its content, and the relationship between pages with proper HTTP headers, sitemaps, and page markup.

LinkedIn engineering’s client-side template evaluation

LinkedIn shares their evaluation process for choosing a client-side templating solution from 18 different options across 15 formal metrics. They ultimately chose dust.js to replace their Java Servlets and JSP.

[W]e found that for any non-trivial view, none of the templating options worked well across client and server unless the server could also execute JavaScript.

A useful read when evaluating dynamic HTML templates.

Map input autocomplete types in Chrome 15+

Chrome 15 and above supports mapping input fields to specific types of data to improve the accuracy of autofill tools. Typically an autofill tool, either bundled with the browser or a third-party add-on, scans the page’s <input>s and attempts to derive some meaning from the field’s name attribute and new HTML5 input type attribute values such as email or tel. The new WHATWG autocompletetype attribute proposal from Ilya Sherman of Google proposes 36 mapped tokens and two sections for autofill agents entering name, address, contact, credit card, business, or birthday data in a web browser.

<input type="text" x-autocompletetype="name-full">Name
<input type="email" x-autocompletetype="email">Email
<input type="text" maxlength="16" x-autocompletetype="cc-number">Credit card

Google Chrome 15+ (November 2011 stable channel and later) parses an “x-autocompletetype” attribute from an <input> and attempts to match the proposed standard tokens with a list of Chrome autofill types stored locally (and possibly on Google’s autofill servers). If the current user has entered their name, email, and credit card number into their browser’s autofill storage your webpage might receive very accurate pre-populated fields.

I added x-autocompletetype attributes to this post’s comment fields if you would like to try it out.

Open Graph protocol 1.1

Open Graph protocol logo

Facebook completed its rollout of Timeline profiles and Open Graph activity aggregation last week, completing a set of changes announced at their f8 developer conference in September. Facebook also switched over to a new version of Open Graph protocol, the metadata language used to connect web pages in the public Internet with the sharing activity happening inside Facebook’s walls. In this post I will highlight some of the major features of Open Graph protocol 1.1 affecting how your web pages display and rank inside Facebook news feeds, Google+ streams, Mixi social streams, and LinkedIn shared stories.

  1. What is Open Graph protocol
    1. Semantics
  2. Populating a basic story template
    1. Images
    2. Title, site name
    3. Type
    4. URL
  3. Multimedia
    1. Video
    2. Audio
  4. Special type attributes
  5. Generate markup, validate
    1. PHP generator
    2. Validator
    3. Official tools
  6. Summary

What is Open Graph protocol?

When someone shares a URL on a social networking site such as Facebook the site tries to create a summary of the page: title, description, thumbnail image, metadata, and more. Open Graph protocol defines <meta> elements placed in the <head> of a web page’s HTML markup summarizing the contents of the page. Fallbacks to HTML standard elements sometimes exist; Open Graph protocol is an explicit definition of those elements and more. Open Graph protocol markup informs Facebook shared stories, Google +Snippets, mixi check, and other social sites using explicit sharing markup and content classification. I will reference Facebook consumption of Open Graph protocol for the rest of this post as they are the main proponent of the specification and typically the main target of web page publishers including Open Graph protocol markup on their pages.

Open Graph protocol markup affects pages shared with the “Like Button” social plugin, messages sent between Facebook users, links posted to a profile or news feed, and possibly search results returned by Facebook. The new Timeline activity groupings are based on Open Graph protocol defined web content when available.

Facebook shared story without Open Graph protocol markup

A link shared without Open Graph protocol markup relies on HTML fallbacks to generate a shared story summary. The content receives the most generic content classification of “website and may be de-emphasized in Multifeed rankings in favor of a more diverse set of stories.

Facebook shared story with Open Graph protocol video markup

A link shared with additional metadata provided by Open Graph protocol markup generates a full story summary with a preview image, embedded video, special categorization, and more behind-the-scenes data used to search and rank shared content.

Semantics

Open Graph protocol 1.1 is based on RDFa Core 1.1 markup. The examples below use compact URI expressions (CURIEs) based on scoped prefixes first defined by a parent element such as <head>.

<head prefix="og: http://ogp.me/ns#">
<meta property="og:title" content="Hello world">
</head>

Populating a basic story template

When a Facebook user pastes a link into their status update Facebook requests the document, parses the result, and displays a story preview in the status update composition box. The webpage title, description, and thumbnail images are displayed immediately in this preview template. The fully published story may include additional metadata and viewing actions depending on the rendering context: profile, news ticker, or social news feed.

Images

An image thumbnail displayed next to a shared story boosts engagement in the social news feed. It’s possible to explicitly define image thumbnails you would like to appear next to your shared links on Facebook by including an og:image Open Graph protocol property. If Facebook encounters a page without Open Graph protocol image markup it might select all <img> elements on the page and choose its own thumbnail image ranging from the largest image on the page to the tiny “powered by” badges in your site footer. Multiple image definitions are allowed, such as highlighting an image specific to the page followed by a site logo as a fallback.

<meta property="og:image" content="http://ogp.me/logo.png">
<meta property="og:image:secure_url" content="https://ogp.me/logo.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="300">
<meta property="og:image:height" content="300">

The markup above points to an image representative of the current page and includes additional structured metadata describing the image width, height, and Internet media type. Facebook supports images formatted as JPEG, PNG, or GIF with a minimum width of 50 pixels and a minimum height of 50 pixels and a width no larger than three times the image height. Specifying “og:image” is enough to generate a thumbnail; adding extra structured properties helps filter out content that might not be the best fit for the intended display area.

Facebook shared story choose thumbnail control

You may specify multiple images using this markup. The first image matching minimum requirements is the default selection. A Facebook user authoring a status update might select a different thumbnail based on your explicitly-defined images. A hotel might include multiple photos of the property as Open Graph protocol images, allowing the person sharing the story to share a view of the pool or a view of the restaurant.

The “secure_url” property is used to display the same resource from a page accessed using HTTPS. Facebook proxies its images through Haystack to normalize images and protect users, minimizing the impact of this property for images in the Facebook news feed. The property is more useful for audio and video, covered later.

Title, Site name

A typical HTML <title> element value might include both the title of the page and the site name. Open Graph protocol separates the document title and the parent website into unique properties: title and site_name.

<title>Hello world - Example site</title>
<meta property="og:title" content="Hello world">
<meta property="og:site_name" content="Example site">

The “site_name” property provides an extra branding line in some shared story views. When a shared link is aggregated, such as a Timeline box showing shared articles of the month, the title of the page can be separated from the site to better highlight unique content and its source.

Type

An Open Graph protocol type definition classifies your shared content into globally-defined buckets or a bucket specific to your site.

Globally-defined Open Graph protocol content types currently include:

  • Website (default)
  • Book
  • Article
  • Profile (person)
  • Music album
  • Music playlist
  • Radio station
  • Song
  • Video
  • Movie
  • TV show
  • TV episode

Content that does not fit into one of the global types might be defined as a special type scoped to your Facebook application. If you plan to later aggregate this content in a Timeline profile box custom types can be a good idea; otherwise you are better off choosing a type understood by a wider array of parsers and available for aggregation in more contexts.

Open Graph protocol 1.0 defined 39 object types; Open Graph protocol 1.1 defines only 12. If you were previously a “band” or a “musician” you are now a “profile” and should update your markup.

URL

Facebook creates a unique identifier for each URL shared. A page specifying an og:url property can collapse multiple URLs referencing the same content into a single URL to properly represent the popularity of your content across Facebook. Similar to <link rel="canonical"> used by major search engines but in a special Facebook flavor. Visitors arriving at your web page via a URL with special query parameters appended for tracking purposes should be collapsed into a single URL reference with og:url.

Multimedia

Shared stories can include inline audio and video playback with appropriate Open Graph protocol markup.

Video

Defining a Flash video file associated with the page places a play button over your thumbnail image (now essentially a poster frame) and loads your linked video file on a user click or tap. It’s possible to specify multiple video formats with an array of structured video properties: Flash, MP4, and WebM for example. Facebook currently supports Flash and HTML video links, roughly correlated to <object> and <iframe> content includes on your own web pages. Everything in one URL means you will have to move your FlashVars into query parameters except; width and height FlashVars are passed by Facebook at runtime.

<meta property="og:video" content="http://example.com/movie.swf?id=1">
<meta property="og:video:secure_url" content="https://example.com/movie.swf?id=1">
<meta property="og:video:type" content="application/x-shockwave-flash">
<meta property="og:video:width" content="400">
<meta property="og:video:height" content="300">

The “secure_url” property is required to play inline video for users browsing Facebook with HTTPS enabled. Facebook does not currently support direct MP4 or WebM videos but may add support in the future through a Facebook video playback wrapper. Publishers need to account for framed content with AllowScriptAccess set to “none.”

Audio

Facebook supports inline audio playback of MP3 files wrapped in a Facebook player.

<meta property="og:audio" content="http://example.com/song.mp3">
<meta property="og:audio:secure_url" content="https://example.com/song.mp3">
<meta property="og:audio:type" content="audio/mpeg">

The “secure_url” property is required to play inline audio for users browsing Facebook with HTTPS enabled. Your server’s Content-Type should look like an audio file, preferably with a Content-Length HTTP header for progressive downloads.

Special type attributes

The eleven global special types of Open Graph protocol 1.1 include extra properties specific to that type for aggregation among all shared actions. This blog post is an Open Graph protocol article with a publication date, category, author, and tags. A Facebook Timeline aggregation could filter on these properties, exposing favorite authors on a site and note any changes to the article since publication.

<head prefix="og:http://ogp.me/ns# article: http://ogp.me/ns/article#">
<meta property="article:published_time" content="2012-01-243T19:00:00Z">
<meta property="article:author" content="https://www.niallkennedy.com/about/">
<meta property="article:section" content="Facebook">
<meta property="article:tag" content="Open Graph protocol">

In the past Facebook’s Multifeed rankings have favored content with extra metadata. Properly classifying content and adding extra information helps a URL stand out from default “website” classifications and graduate from news ticker (all stories) into social news feeds (selected stories).

Generate markup, validate

PHP generator

PHP developers might find my open-graph-protocol-tools project on GitHub helpful when generating Open Graph protocol markup for their web pages. It’s a PHP object-oriented approach to building Open Graph protocol markup with input validation to keep your outputted markup aligned with the Open Graph protocol specification.

Validator

Interested in testing out your page’s compliance with Open Graph protocol 1.1? I wrote a social sharing object parser based on the Open Graph protocol specification with HTML fallbacks and Facebook and Google+ linked accounts. In the future this tool may include schema.org microdata extraction to better represent a page parsed by Google +Snippets.

Official tools

Facebook’s URL debugger is an official view inside Facebook’s Open Graph protocol parser including links to URLs stored inside the Facebook Graph API.

Google prefers Schema.org microdata markup, ignoring Open Graph protocol data if Schema.org microdata appears in your page markup. Google rich snippets testing tool parses Open Graph protocol 1.0 markup from your pages for possible use in Google rich snippets search results.

Summary

Open Graph protocol 1.1 changes the way your web pages are indexed and ranked by Facebook and other social sharing sites. Publishers should add or update special markup in their pages to better control how their content appears when shared inside social networks. Omission of this special markup on pages may demote content ranking in the social network news feeds and lead to seemingly random content selected from your page as a thumbnail. Including the special content opens up more content filtering opportunities within the social network news stream, inline playback of multimedia content, and improved interactions with end users inside growing social networks.

Google searches smartphone web as an iPhone

Google’s mobile search engine crawler now uses an updated User-Agent string designed to trigger iPhone-specific renderings of web pages. The Googlebot-Mobile crawler is building a smartphone web index based on iOS 4.1 responses including redirects. Webmasters with smartphone-specific content may finally have a reason to generate mobile sitemaps. Googlebot will skew your iOS usage numbers if not properly treated as a robot.

Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_1 like Mac OS X; en-us) AppleWebKit/532.9 (KHTML, like Gecko) Version/4.0.5 Mobile/8B117 Safari/6531.22.7 (compatible; Googlebot-Mobile/2.1; +http://www.google.com/bot.html)

Google mobile search acts like an iPhone, not an Android.

Windows 8, plugin-free browsing, and UA spoofing

Internet Explorer 10 metro view

Microsoft released a developer preview of Windows 8 at this week’s BUILD conference including a preview release of the next version of Internet Explorer. Windows 8 will include a “Metro style browser,” a simplified appliance-like view based on Windows Phone tiles. The Metro interface is powered by Internet Explorer (Trident, Chakra) behind-the-scenes in a special “immersive” full-screen runtime without support for browser plugins such as Adobe Flash Player. Microsoft is bundling a special compatibility view list with a uaStringImmersive attribute to spoof an iPhone, iPad, or even Firefox User-Agent to trigger special views on websites designed for a plugin-free or full-screen experience.

<iecompatlistdescription>
<domain featureSwitch="createElementWithMarkup:false">youtube.com</domain>
<domain uaStringImmersive="Firefox 5">tv.slashgear.com</domain>
<domain uaStringImmersive="iPad">mashable.com</domain>
</iecompatlistdescription>

Sites using feature detection at runtime helps avoid assuming the same features for desktop Internet Explorer and Metro’s “immersive” Internet Explorer. The application/x-shockwave-flash handlers present in one version of the browser may not be present in the next. Assuming Internet Explorer cannot handle XMLHttpRequest or display H.264 video with AAC audio inside a <video> could land your hostname in the Compatibility View penalty box.

The Internet Explorer 9 compatibility view list is available online in XML format including existing featureSwitch handlers.

Feature detect at runtime or update your content negotiation User-Agent matchers for Internet Explorer 10 before Microsoft decides to spoof its User-Agent for iPad treatment.