First things first, your mobile app is available on an app store, do you also need to have a website? The answer is ‘Yes’ and here is why:

  1. During pre-launch, you can’t have much initial traction if you don’t have a website.
  2. Same goes for your potential smart traction, which is not possible without inserting your website on BetaList or Product Hunt.
  3. Without a website, you can’t implement successful retargeting campaigns either.
  4. In addition, creating lead ads for app stores to drive downloads is way more expensive and more restrictive as well.

1 Smart Banners

 

Smart App Banners provide a unified method of promoting apps when viewed in mobile Safari.

Presented as a fairly unobtrusive banner at the top of webpages, they show details of the app, its icon, ratings and price information. If the app is already installed on the device, the ‘View’ button says ‘Open’ and clicking on the banner launches the app.

If the app isn’t installed, clicking the banner launches the app store, taking the user to the app download page.

Apple’s iOS Smart App Banner

In iOS 6, Apple released a fully integrated smart app banner into Safari. Its look and feel has evolved since then, into what you see below, but still functions the same way.

This banner has two different outcomes when clicked. If the app is installed, the banner will open it up by calling its URI scheme with accompanying deep link parameters. If the app is not installed, the banner will take the user to its App Store page.

Apple’s banner fearures some unique characteristics that other 3rd party smart banners cannot easily replicate:

  1. The call to action “View” will always change to “Open” whenever iOS detects that the app is installed
  2. While downloading the app, the smart banner will show a progress bar

It also comes with some significant limitations:

  1. It only works on iOS Safari
  2. The layout, color, and content cannot change
  3. No click or download tracking
  4. Deep linking (taking users to specific content) only works if the app is already installed

How can you implement that on iOS?

To add a Smart App Banner to your website, include the following meta tag in the head of each page where you’d like the banner to appear:

<meta name=”apple-iTunes-app” content=”app-id=myAppStoreID, affiliate-data=myAffiliateData, app-argument=myURL”>

You can include three comma-separated parameters in the content attribute:

  • app-id: (Required.) Your app’s unique identifier. To find your app ID from the iTunes Link Maker, type the name of your app in the Search field, and select the appropriate country and media type. In the results, find your app and select ‘iPhone App Link’ in the column on the right. Your app ID is the nine-digit number in between id and ?mt.
  • affiliate-data: (Optional.) Your iTunes affiliate string, if you are an iTunes affiliate. If you are not, find out more about becoming an iTunes affiliate at http://www.apple.com/itunes/affiliates/.
  • app-argument: (Optional.) A URL that provides context to your native app. If you include this, and the user has your app installed as well, they can jump from your website to the corresponding position in your iOS app. Typically, it is beneficial to retain navigational context because:
    • If the user is deep within the navigational hierarchy of your website, you can pass the document’s entire URL, and then parse it in your app to reroute them to the correct location in your app.
    • If the user performs a search on your website, you can pass the query string so that they can seamlessly continue the search in your app without having to retype their query.
    • If the user is in the midst of creating content, you can pass the session ID to download the web session state in your app so they can nondestructively resume their work.

Smart App Banner for Android?

Due to the fragmentation of the Android ecosystem and browser choice, Google has never released an Android smart banner. All Android developers have had to roll their own or adapt to a pre-existing solution. This is a major hassle if you are a mobile developer who has built for both Android and iOS and desire consistent behavior and attribution measurement.

This is an example of a smart app banner implementation without the need of jquery you can use for free https://github.com/kudago/smart-app-banner

Alternatively, many apps use Branch’s (branch.io) iOS or Android smart app banners on a daily basis to link to their app, using both dynamically generated links from the native iOS/Android SDKs and marketing links, manually created on the Branch dashboard. These links work on every operating system and browser to deliver users to your app or to the App Store, depending on the situation.

2 Send To mobile Via SMS (Smart Routing)

Nowadays, channels are getting merged, thus more often than not, users will land on a desktop for a mobile app. You need to be able to redirect them to your mobile version. Therefore, the only way is sending an SMS or a message on a mobile messenger (which can also land on a desktop i.e. the desktop version of WhatsApp)

In order to do that, you need to develop two components:

  1. A widget for your site to send an SMS to the users –

When a banner is tapped and the app is currently installed, it will open the app. If the app is not installed, it will take the user to the appropriate App Store page.

Example 1

 

Example 2

2.  A page (in most of the cases it should be called /get) in order to send it via SMS without knowing the device brand of the user. The main task of this page is to select (when on mobile) the brand and redirect you on the proper page.

The code of the /get page can be found here. Just put this page into your main site:

<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

<html >

<head>

<title> [App Name] | [App Title]!</title>

<meta name=”viewport”

content=”width=device-width, initial-scale=0.5, minimum-scale=0.5, maximum-scale=0.5″ />

<script>

(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){

(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),

m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)

})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);

ga(‘create’, ‘UA-[App GA Code]’, ‘auto’);

ga(‘send’, ‘pageview’);

</script>

<script type=”text/javascript”>

function init(){

 

var isIphone = isAndroid = isKindle = false;

isIphone = 0;

isAndroid = 0;

isKindle = ”;

 

utm_params = ”;

 

var app_token  = ‘[App Name]’;

var app_tokens = JSON.parse(‘{“[App Name]”:{“domain”:”[App website]”,”name”:”[App Name]”,”lang”:”en”,”iOS_market”:”https:\/\/itunes.apple.com\/us\/app\/[App apple ID]\/”,”Android_market”:”https:\/\/play.google.com\/store\/apps\/details?id=com.[app name].android&referrer=”,”Amazon_market”:”http:\/\/www.amazon.com\/gp\/mas\/dl\/android?p=com.[app name].android”,”playback_url”:”https:\/\/play.[app name].com\/”,”logo”:{“mobileColor”:”[color].png”,”mobile”:”[color].png”,”desktop”:”[color].png”},”btn_reply_mobile”:”[Button].png”,”social_facebook”:”https:\/\/www.facebook.com\/[app name]”,”social_twitter”:”https:\/\/twitter.com\/[app name]”,”dir_inv_land_vid”:”https:\/\/[app name]-web.s3.amazonaws.com\/invite\/updated_for_direct.mp4″,”site_ganalytics_id”:”UA-[App GA Code]”,”landings_ganalytics_id”:”UA-[App GA Code]”}}’);

[app ID]

if(isKindle)

window.open(app_tokens[app_token][‘Amazon_market’],”_self”);

else if(isIphone)

window.open(app_tokens[app_token][‘iOS_market’],”_self”);

else if(isAndroid)

window.open(app_tokens[app_token][‘Android_market’] + encodeURIComponent(utm_params),”_self”);

else

window.open(app_tokens[app_token][‘domain’] + “/#gettheapp-link?”+utm_params,”_self”);

 

 

 

}

</script>

</head>

<body onload=”init()” >

</body>

</html>

All you have to do is replace:

[App Name] with your app name

[App Title] with your app title

[App GA Code] with the GA Code for your Application

[App website]

[app Apple ID]

[color] with a color image you wish

[button] with an image you wish

3 On-Site SEO Optimisation

Although App Store Optimisation, or ASO, is important and a big factor for the initiation of many searches, SEO is as important, since people may also search on the web for an app. These are the main topics to cover on an on-site SEO approach:

Keyword Appears in H1 Heading: H1 heading is like a second-page title. Along with your title tag, Google uses your H1 tag as a secondary relevancy signal.

Keyword Appears in Meta description: Google doesn’t use the meta description tag as a direct ranking signal. However, your description tag can impact click-through-rate, which is a key ranking factor.

Page Title Starts With a keyword: Let’s face it, a page title that starts with a keyword tends to perform better than title tags with the keyword towards the end of the tag.

Length of Content: The more the words in your content, the more preferable it is for the algorithm.

Domain Authority: The popularity and trustworthiness of a domain are, of course, two of the most important ranking factors.

Page Loading Speed: Both Google and Bing use page loading speed as a ranking factor. Search engine spiders can estimate your site speed fairly accurately, based on your page’s HTML code.

Backlink Profile & Backlinks’ Quality: Lots of links from unknown sources or commonly used by Black Hat SEOs may be harmful to your site. Also, sites need to get backlinks from sites with high relevance. Otherwise, those backlinks are almost useless.

Sitemaps: Submitting a sitemap to Webmaster Tools helps search engines index your pages easier and more thoroughly, thus improving visibility.

Robots.txt: Before a search engine crawls your site, it will look through your robots.txt file for instructions as to where they are allowed to crawl (visit) and index (save) the potential search engine results. This can be useful in case you want search engines to ignore any duplicate pages on your website.

The best way would be to start from a keyword research to see what people are looking for and then add those keywords that will rank better for you.

4 Lengthier Description

App Store descriptions are mainly based on images and videos. A web page is giving you more room to describe your product, put some testimonials or use some fomo apps to drive leads.

A typical landing page of a mobile app consists of the following sections:

  • A main Slider with a description
  • A detailed description of the mobile app
  • A list of Testimonials
  • A list of integration options (if any)

This is pretty straightforward and easy to implement.

5 Instant Articles, AMP & Other High-Ranking Elements

There are some elements (technologies) that will help your landing page rank higher on Google, such as Instant Articles and Accelerated Mobile Pages.

Instant articles

Instant Articles is a mobile publishing format that enables everyone to distribute articles to Facebook’s app that load and display as much as 10 times faster than the standard mobile web.

Catchpoint Systems made some tests and found out that the average load time for Instant Articles was between 0 and 300 milliseconds, compared with 3.66 seconds for similar articles on news publishers’ websites.

Thanks to the faster load times, users might engage more with Instant Articles, and this might, in turn, increase their visibility in users’ feeds.

If you want to learn more about Instant Articles, you can click here.

Accelerated Mobile Pages

Accelerated Mobile Pages, or AMP, is a Google-backed project. It’s designed as an open standard for any publisher to have pages load quickly on mobile devices. It uses HTML, JS, and cache libraries that accelerate the load time of a web page.

Even if you have a 3000 words article with all the images and videos, the page will load under 3 second completely. For more information on how to implement AMP for your website visit the official website: https://www.ampproject.org/

By implementing AMP on mobile you can reduce load times and improve user experience – both of which will impact your rankings. Accelerated Mobile Page enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.

Why is AMP vital for your landing page?

The more it takes for a webpage to load, the higher are the chances of users bouncing off. You can’t afford to let your website load forever. Amazon calculated that a page load slowdown of just one second could cost them $1.6 billion in sales each year. Google has calculated that by slowing its search results by just four-tenths of a second they could lose 8 million searches per day – meaning they’d serve up many millions of fewer online adverts.

This underlines the importance of page load time. AMP is a great way to increase your page speed time and never lose customers due to slow loading times. AMP improves the overall mobile experience thus increasing the chances of conversions.

It decreases the bounce rate in a very effective way. When a website implements AMP, the website data is saved in Google’s cache, so every time you visit the website the URL will look like this:

 

 

“Mobile first” doesn’t mean “Don’t give a damn about your website”.

Mobile first means designing an online experience for mobile before designing it for the desktop Web – or any other device.

You should aim for the maximum synergy between your mobile app and your website. Optimise your landing page for mobile devices and help your app grow.

 

Theodore has a 15-year experience in running successful and profitable software products. During his free time, he coaches and consults startups. His career includes managerial posts for companies both in Greece and abroad and he has significant skills on intrapreneurship and entrepreneurship.