Microsoft says iOS and Android support doesn’t mean Windows Phone is dead

Is-Windows-Phone-dead

In an interview with Business Insider, Microsoft’s Joe Belfiore spoke briefly about Microsoft’s recent announcements made at Build such as the Windows 10 Fall Creators Update but also took the time to comfort those worried about the small presence of Windows phones at the event and Microsoft’s growing focus on iOS and Android devices.

“We’re going to continue to support Windows phone,” Belfiore said before adding that, “Windows is a platform that drives the experience on a whole range of devices. We live in a highly diverse world.”

With the significantly higher number of users on iOS and Android compared to Windows 10 Mobile, it’s understandable that Microsoft would want to offer their services and products to those using those ecosystems. This often frustrates Windows phone users though as it can appear that Microsoft favors offering support for other companies’ mobile devices over their own. And for the most part, recently anyway, this has been fairly true.

It’s been a while since Microsoft released their own Windows phone device (they’ve been relying on other companies to manufacture phones) but the Windows 10 Mobile operating system continues to get updates (though admittedly not as big as the Windows 10 updates) as do many Windows phone apps. There’s also a growing number of rumors and statements that suggest that Microsoft could be planning a “Surface Phone” which could radically redefine what a smartphone looks like and is used for.

The Essential Meta Tags for Social Media

These days, almost every website encourages visitors to share its pages on social media. We’ve all seen the ubiquitous Facebook and Twitter icons, among others, just begging to be clicked. This comes as no surprise as sharing via social media, the internet incarnation of word-of-mouth, is one of the most effective ways for businesses and individuals to gain awareness.

When users choose to share these links, it is tasked to the web developer to make sure that the associated web pages are properly prepared, which is what we’ll look at now. Facebook and Twitter are, by far, the most popular social media platforms, so let’s focus on those two.

Sharing on Facebook and Twitter

Facebook offers developers various options on how a shared web page appears in its timeline depending on the website’s content. Unless otherwise specified, every website defaults to the type called, appropriately, “website”, which is the example we’ll use.

Let’s say someone has shared the home page of a fictional travel company – Facebook displays it like this:

facebook-card

Twitter, as well, has multiple ways to format shared web pages that appear in its feed, but we’ll look at the one that’s quite similar to the above example from Facebook, which Twitter calls the “Summary Card with Large Image”:

twitter-card

As we can see, each features multiple attributes of the shared Web page:

  • a prominent image and title
  • a description
  • the domain name

Proprietary <meta> Tags

How do we specify these attributes? With <meta> tags. When a link is shared, both Facebook and Twitter scrape the associated web page and read its <meta> tags to display the appropriate information.

Facebook uses <meta> tags leveraging the Open Graph protocol, a classification system for Web pages that extends beyond those <meta> tags already defined in HTML5. A complete list of <meta> tags available can be found at the Open Graph Web site. There are so many from which to choose that it can be somewhat intimidating, but only four are actually required:

<meta property="og:title" 
      content="European Travel Destinations">
<meta property="og:description" 
      content="Offering tour packages for individuals or groups.">
<meta property="og:image" 
      content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" 
      content="http://euro-travel-example.com/index.htm">

Twitter has its own <meta> tags that are similar to the Open Graph protocol, but uses the “twitter” prefix instead of “og”. As with Facebook, only a few are required. The type of display format we’re requesting from Twitter is also specified:

<meta name="twitter:title" 
      content="European Travel Destinations ">
<meta name="twitter:description" 
      content=" Offering tour packages for individuals or groups.">
<meta name="twitter:image" content=" 
      http://euro-travel-example.com/thumbnail.jpg">
<meta name="twitter:card" 
      content="summary_large_image">

Reconciling <meta> Tags

There’s no harm with having multiple tags that appear redundant. Too much information never hurt anyone except by adding a few extra bytes to the HTML file.

But for our purposes, and for the sake of brevity, we can leverage the fact that Twitter allows us to substitute Open Graph <<meta> tags for its own. In the end, except for the necessity of specifying a display format, none of the custom Twitter <meta> tags are needed. This gives us the following, which could be considered the bare minimum of tags necessary to make a web page amenable for sharing on social media:

<meta property="og:title" 
      content="European Travel Destinations">
<meta property="og:description" 
      content="Offering tour packages for individuals or groups.">
<meta property="og:image" 
      content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" 
      content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" 
      content="summary_large_image">

Reconciling the guidelines for the image is simple: follow Facebook's recommendation of a minimum dimension of 1200x630 pixels and an aspect ratio of 1.91:1, but adhere to Twitter's file size requirement of less than 1MB.

Validating <meta> Tags

If there are any doubts about the legitimacy of paring down to these five tags, we can use the helpful Facebook Sharing Debugger and Twitter Card Validator. Both these tools will scrape any Web page hosted on a public server for relevant <meta> tags and display how it would look when shared. It will also list any errors and provide suggestions. So how did we do with our particular example? Twitter seems fine with things, but Facebook, on the other hand, lists one item as a warning:

facebook-warning

Social Media Analytics

What Facebook is indicating is that if you’re going to use their analytics tool, which they call Domain Insights, you must provide the unique ID number associated with your account. The <meta> tag would then look something like this:

<meta property="fb:app_id" content="your_app_id" />

Twitter has something similar that they call Twitter Card Analytics. To get the most out of this tool, Twitter recommends using the following <meta> tag that contains the Twitter username that you want associated with the shared Web page:

<meta name="twitter:site" content="@website-username">

Keep in mind, though, that if you have no particular interest in using these analytic tools, then omitting the above two <meta> tags has no effect on how a shared Web page appears on a Facebook timeline or Twitter feed.

What else?

Facebook documentation recommends one additional <meta> tag, though it’s not required. A <meta> tag that denotes the name of the Web site in which the shared page resides:

<meta property="og:site_name" content="European Travel, Inc.">

Twitter suggests one other <meta> tag as well that is recommended, but not required:

<meta name="twitter:image:alt" content="Alt text for image">

This provides an alternative image description for those who are visually impaired.

Final Markup

That should do it. To reiterate, when you look at documentation from Facebook and Twitter for sharing Web pages, there are many other <meta> tags available that can be used to specify different types of content. But, in general, the following will suffice:

<!--  Essential META Tags -->
<meta property="og:title" 
      content="European Travel Destinations">
<meta property="og:description" 
      content="Offering tour packages for individuals or groups.">
<meta property="og:image" 
      content="http://euro-travel-example.com/thumbnail.jpg">
<meta property="og:url" 
      content="http://euro-travel-example.com/index.htm">
<meta name="twitter:card" 
      content="summary_large_image">

<!--  Non-Essential, But Recommended -->
<meta property="og:site_name" 
      content="European Travel, Inc.">
<meta name="twitter:image:alt" 
      content="Alt text for image">

<!--  Non-Essential, But Required for Analytics -->
<meta property="fb:app_id" content="your_app_id" />
<meta name="twitter:site" content="@website-username">

Happy coding!

Advertsing

125X125_06

Planet Xamarin

Planet Xamarin

Calendar

<<  September 2017  >>
MonTueWedThuFriSatSun
28293031123
45678910
11121314151617
18192021222324
2526272829301
2345678

View posts in large calendar

Month List