Web Markup For Your Mobile App

 

Web Markup is a component of app discovery used to enable mobile platforms to bridge the divide between Native and Web. Search engines and browsers want to give the user the best experience possible and if that is in a native app, they want to provide the user with that experience. There are many tags you can add to your website to help mobile platforms and other platforms such as Facebook and Twitter know what your content is about and provide a rich and easy link between the two.

Smart Banners

Smart Banners have been around since iOS 6 and when you go to a website on your iOS6+ device you may be prompted to download the app from the app store as seen below.

SmartBannerExample

You can do this for your app by adding the following html in between your <head> tag on your website.

<meta name="apple-itunes-app" content="app-id=myAppStoreID">

Read Apple’s Promoting Apps with Smart Banners documentation for more attributes you can have and information on how to jump to a specific page in your app once it has been installed from the Smart Banner.

 

Structured Data

Search engines of all kinds, Bing, Google, App Store Search are all data hungry, they normally accept much more data than most websites provide. You can include different tags on your various web sites to give these search engines far more information and in return possibly provide you with higher rankings and a much better looking listing in their results.

Facebook originally created the Open Graph Protocol many years ago as a way to get more information on the web and many other search engines just came along for the ride. The Open Graph Protocol website has all the information you need. As an example you can give an image to a page by adding in the following to your <head> tag on your webpage. You might do this on a page on your website explaining your app.

<meta property="og:image" content="http://company.com/appImage.jpg">

Schema

Schema is another markup started by Google, Microsoft and a few others. The premise here is mainly MicroData, where you can tell search engines about data on your website. If you have a list of people reviewing something on your website you may want to look at the Review section. Below is a brief example of Schema markup in your webpage.

<div itemprop="aggregateRating" itemscope itemtype="http://schema.org/AggregateRating">
 <span itemprop="ratingValue">4</span> stars -
 <span itemprop="reviewCount">3077</span> reviews
</div>

How might this help your app? Indirectly it helps by getting better search visibility to your webpage that is linked to a specific page on your app. Helping search engines understand indirectly what is in your app through your webpage.

GoogleSearchResult

Apologies the structured data and schema is vague in its specific results. Search engine algorithms are highly protected secrets, not even one Google engineer knows the entire algorithm for Google Search. As such, we take the recommendations from these search companies saying this will result in a better search engine listing.

There are many articles on Structured Data and Schema as these relate highly to SEO. I would recommend searching more on these for a much more in-depth view and tests that devise each actions effectiveness.

Twitter Cards

When someone links to a webpage that is directly related to your app on Twitter, Twitter can see if any of the following tags exist in the link provided. Below is an example taken from the Twitter Documentation.

<meta name="twitter:app:country" content="US">
<meta name="twitter:app:name:iphone" content="Cannonball">
<meta name="twitter:app:id:iphone" content="929750075">
<meta name="twitter:app:url:iphone" content="cannonball://poem/5149e249222f9e600a7540ef">

 

If they do, Twitter can provide a special card linking directly to your app download.

TwitterCard

Note: While the documentation shows this, I never managed to get it to work, even viewing the example tweet they showed. I suspect they might have disabled this feature. That is why I have a snapshot of their documentation image, I could not replicate this on Android or iOS.

However I did manage to find another reference to an Install button but it was on a Promoted Tweet. I think Twitter might have dropped support for the Download or Install for everyone and just left it available for Promoted Tweets. As you can see in Setting up App Cards.

PromotedInstall

For more information on all the tags you can provide have a look at Cards for Mobile Developers.

Facebook App Links

With all of these “App Link” based methods I thought it was good to highlight Facebook’s AppLinks to show yet another method of creating meta data to link to your app from Facebook. I’m not even sure how active it is anymore with the last Tweet on their account over 1 year ago.

Adding these tags allows you to link your website directly to the app store.

<meta property="al:ios:url" content="applinks://docs" /> 
<meta property="al:ios:app_store_id" content="12345" /> 
<meta property="al:ios:app_name" content="App Links" /> 
<meta property="al:android:url" content="applinks://docs" /> 
<meta property="al:android:app_name" content="App Links" /> 
<meta property="al:android:package" content="org.applinks" />

For the sake of a few more tags on your page it may help discoverability a bit but I personally wouldn’t be too concerned with this method, I think it has a high chance of fading silently into the night.

Universal Links (iOS) & App Links (Android)

Take Yelp as an example and you arrive at their website for a specific restaurant. Instead of reading through the reviews and performing actions on the website, if you have the Yelp app installed, the Yelp app can open directly to that restaurant page.

The user then has gone to a website url but ended up at the right spot inside your app. This is how Universal Links and App Links works. This topic is quite large and will be covered in an upcoming section.

Microsoft MVP | Xamarin Certified Developer |
Exrin Creator | Xamarin Forms Developer | Melbourne, Australia

Related Posts

Leave A Comment?