Partager via

Rechercher avec le balisage web dans Xamarin.iOS

  • Article

Pour les applications qui fournissent l’accès à leur contenu via un site web (non seulement à partir de l’application), le contenu web peut être marqué avec des liens spéciaux qui seront analysés par Apple et fournissent des liens profonds vers votre application sur l’appareil iOS 9 de l’utilisateur.

Si votre application iOS prend déjà en charge la liaison approfondie mobile et que votre site web présente des liens profonds vers du contenu au sein de votre application, l’analyseur web Applebot indexe ce contenu et l’ajoute automatiquement à son index cloud :

Vue d’ensemble de Cloud Index

Apple fera apparaître ces résultats dans les résultats de la recherche Spotlight et de la recherche Safari. Si l’utilisateur appuie sur l’un de ces résultats (et qu’il a installé votre application), il est dirigé vers le contenu de votre application :

Liaison approfondie à partir d’un site web dans les résultats de recherche

Activation de l’indexation de contenu web

Il existe quatre étapes requises pour rendre le contenu de votre application pouvant faire l’objet d’une recherche à l’aide du balisage web :

  1. Assurez-vous qu’Apple peut découvrir et indexer le site web de votre application en le définissant comme site web support ou marketing dans iTunes Connecter.
  2. Vérifiez que le site web de votre application contient le balisage requis pour implémenter la liaison approfondie mobile. Pour plus d’informations, consultez les sections ci-dessous.
  3. Activez la gestion des liens profonds dans votre application iOS.
  4. Ajoutez le balisage pour les données structurées exposées par le site web de votre application pour fournir un résultat riche et attrayant à l’utilisateur final. Bien que cette étape ne soit pas strictement requise, il est fortement recommandé par Apple.

Les sections suivantes passent en détail à ces étapes.

Rendre le site web de votre application détectable

Le moyen le plus simple pour qu’Apple trouve le site web de votre application consiste à l’utiliser comme support ou site web marketing lorsque vous envoyez votre application à Apple via iTunes Connecter.

Utilisation de bannières d’application intelligente

Fournissez une bannière d’application intelligente sur votre site web pour présenter un lien clair dans votre application. Si l’application n’est pas déjà installée, Safari invite automatiquement l’utilisateur à installer votre application. Sinon, l’utilisation peut appuyer sur le lien d’affichage pour lancer votre application à partir du site web. Par exemple, pour créer une bannière d’application intelligente, vous pouvez utiliser le code suivant :

<meta name="AppName" content="app-id=123456, app-argument=http://company.com/AppName">

Pour plus d’informations, consultez la documentation sur la promotion des applications Apple avec des bannières d’application intelligente.

Nouveautés d’iOS 9, les liens universels offrent une meilleure alternative aux bannières d’application intelligente ou aux schémas d’URL personnalisés existants en fournissant les éléments suivants :

  • Unique : la même URL ne peut pas être revendiquée par plusieurs sites web.
  • Sécurisé : un certificat signé est requis pour le site web qui garantit que le site web est détenu par vous et lié validement à votre application.
  • Flexible : l’utilisateur final peut contrôler si l’URL lance le site web ou l’application.
  • Universel : la même URL peut être utilisée pour définir le contenu de votre site web et celui de votre application.

Utilisation de cartes Twitter

Vous pouvez fournir des liens profonds vers le contenu de votre application à l’aide d’une carte Twitter. Par exemple :

<meta name="twitter:app:name:iphone" content="AppName">
<meta name="twitter:app:id:iphone" content="AppNameID">
<meta name="twitter:app:url:iphone" content="AppNameURL">

Pour plus d’informations, consultez la documentation twitter card protocol de Twitter.

Vous pouvez fournir des liens profonds vers le contenu de votre application à l’aide d’un lien d’application Facebook. Par exemple :

<meta property="al:ios:app_name" content="AppName">
<meta property="al:ios:app_store_id" content="AppNameID">
<meta property="al:ios:url" content="AppNameURL">

Pour plus d’informations, consultez la documentation des liens d’application de Facebook.

Vous devez ajouter la prise en charge de l’ouverture et de l’affichage des liens profonds dans votre application Xamarin.iOS. Modifiez le fichier AppDelegate.cs et remplacez la OpenURL méthode pour gérer le format d’URL personnalisé. Par exemple :

public override bool OpenUrl (UIApplication application, NSUrl url, string sourceApplication, NSObject annotation)
{

  // Handling a URL in the form http://company.com/appname/?123
  try {
    var components = new NSUrlComponents(url,true);
    var path = components.Path;
    var query = components.Query;

    // Is this a known format?
    if (path == "/appname") {
      // Display the view controller for the content
      // specified in query (123)
      return ContentViewController.LoadContent(query);
    }
  } catch {
    // Ignore issue for now
  }

  return false;
}

Dans le code ci-dessus, nous recherchons une URL contenant /appname et transmettant la valeur (123query dans cet exemple) à un contrôleur de vue personnalisé dans notre application pour afficher le contenu demandé à l’utilisateur.

Fournir des résultats enrichis avec des données structurées

En incluant structured Data Markup, vous pouvez fournir des résultats de recherche enrichis à l’utilisateur final qui vont au-delà d’un titre et d’une description. Incluez des images, des données spécifiques à l’application (telles que des évaluations) et des actions pour obtenir des résultats à l’aide du balisage de données structurées.

Les résultats enrichis sont plus attrayants et peuvent aider à améliorer votre classement dans l’index de recherche basé sur le cloud en invitant davantage d’utilisateurs à interagir avec eux.

L’une des options permettant de fournir des marques de données structurées consiste à utiliser Open Graph. Par exemple :

<meta property="og:image" content="http://company.com/appname/icon.jpg">
<meta property="og:audio" content="http://company.com/appname/theme.m4a">
<meta property="og:video" content="http://company.com/appname/tutorial.mp4">

Pour plus d’informations, consultez le site web Open Graph .

Un autre format courant pour structured Data Markup est le format microdata de schema.org. Par exemple :

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

Les mêmes informations peuvent être représentées au format JSON-LD de schema.org :

<script type="application/ld+json">
  "@content":"http://schema.org",
  "@type":"AggregateRating",
  "ratingValue":"4",
  "reviewCount":"255"
</script>

Voici un exemple de métadonnées de votre site web fournissant des résultats de recherche enrichis à l’utilisateur final :

Résultats de recherche enrichis via le balisage de données structurées

Apple prend actuellement en charge les types de schémas suivants à partir de schema.org :

  • Agrégation
  • ImageObject
  • InteractionCount
  • Offres
  • Organization
  • PriceRange
  • Recette
  • SearchAction

Pour plus d’informations sur ces types de schémas, consultez schema.org.

Fourniture d’actions avec des données structurées

Des types spécifiques de données structurées permettent à un résultat de recherche d’être actionnable par l’utilisateur final. Actuellement, les actions suivantes sont prises en charge :

  • Numérotation d’un numéro de téléphone.
  • Obtention du sens de la carte à une adresse donnée.
  • Lecture d’un fichier audio ou vidéo.

Par exemple, la définition d’une action pour composer un numéro de téléphone peut ressembler à ce qui suit :

<div itemscope itemtype="http://schema.org/Organization">
  <span itemprop="telephone">(408) 555-1212**

Lorsque ce résultat de recherche est présenté à l’utilisateur final, une petite icône de téléphone s’affiche dans le résultat. Si l’utilisateur appuie sur l’icône, le nombre spécifié est appelé.

Le code HTML suivant ajoute une action pour lire un fichier audio à partir du résultat de recherche :

<div itemscope itemtype="http://schema.org/AudioObject">
  <span itemprop="contentUrl">http://company.com/appname/greeting.m4a**

Enfin, le code HTML suivant ajoute une action pour obtenir des instructions à partir du résultat de recherche :

<div itemscope itemtype="http://schema.org/PostalAddress">
  <span itemprop="streetAddress">1 Infinite Loop**
  <span itemprop="addressLocality">Cupertino**
  <span itemprop="addressRegion">CA**
  <span itemprop="postalCode">95014**

Pour plus d’informations, consultez le site du développeur Recherche d’applications d’Apple.