Búsqueda con marcado web en Xamarin.iOS

Artículo
07/13/2023

En el caso de las aplicaciones que proporcionan acceso a su contenido a través de un sitio web (no solo desde dentro de la aplicación), el contenido web se puede marcar con vínculos especiales que Apple rastreará y proporcionará una vinculación profunda a la aplicación en el dispositivo iOS 9 del usuario.

Si la aplicación de iOS ya admite vínculos profundos móviles y el sitio web presentó vínculos profundos al contenido dentro de la aplicación, el rastreador web applebot de Apple indexará este contenido y lo agregará automáticamente a su índice en la nube:

Apple mostrará estos resultados en Los resultados de Spotlight Search y Safari Search. Si el usuario pulsa en uno de estos resultados (y tiene la aplicación instalada), se le llevará al contenido de la aplicación:

Habilitación de la indexación de contenido web

Hay cuatro pasos necesarios para hacer que el contenido de la aplicación se pueda buscar mediante marcado web:

Asegúrese de que Apple pueda detectar e indexar el sitio web de la aplicación definiendolo como sitio web de soporte técnico o marketing en iTunes Conectar.
Asegúrese de que el sitio web de la aplicación contiene el marcado necesario para implementar la vinculación profunda móvil. Consulte las siguientes secciones para obtener más detalles.
Habilite el control de vínculos profundos en la aplicación de iOS.
Agregue marcado para los datos estructurados que expone el sitio web de la aplicación para proporcionar un resultado enriquecido y atractivo al usuario final. Aunque este paso no es estrictamente necesario, apple recomienda encarecidamente.

En las secciones siguientes se describen estos pasos con detalle.

Hacer que el sitio web de la aplicación sea reconocible

La manera más fácil de hacer que Apple encuentre el sitio web de la aplicación es usarlo como sitio web de soporte técnico o marketing cuando envíes tu aplicación a Apple a través de iTunes Conectar.

Uso de banners de aplicaciones inteligentes

Proporcione un banner de aplicación inteligente en su sitio web para presentar un vínculo claro a la aplicación. Si la aplicación aún no está instalada, Safari pedirá automáticamente al usuario que instale la aplicación. De lo contrario, el uso puede pulsar el vínculo de vista para iniciar la aplicación desde el sitio web. Por ejemplo, para crear un banner de aplicación inteligente, puede usar el código siguiente:

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

Para obtener más información, consulte la documentación de Promoción de aplicaciones de Apple con banners de aplicaciones inteligentes.

Uso de vínculos universales

Nuevos en iOS 9, los vínculos universales proporcionan una mejor alternativa a los banners de aplicaciones inteligentes o a los esquemas de direcciones URL personalizados existentes proporcionando lo siguiente:

Único : no se puede reclamar la misma dirección URL por más de un sitio web.
Seguro : se requiere un certificado firmado para el sitio web que garantiza que el sitio web es propiedad de usted y está vinculado de forma válida a la aplicación.
Flexible : el usuario final puede controlar si la dirección URL inicia el sitio web o la aplicación.
Universal : la misma dirección URL se puede usar para definir tanto el contenido de su sitio web como el de la aplicación.

Uso de tarjetas de Twitter

Puedes proporcionar vínculos profundos al contenido de la aplicación mediante una tarjeta de Twitter. Por ejemplo:

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

Para obtener más información, consulte la documentación del protocolo de tarjeta de Twitter de Twitter.

Uso de vínculos de aplicación de Facebook

Puedes proporcionar vínculos profundos al contenido de la aplicación mediante un vínculo de aplicación de Facebook. Por ejemplo:

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

Para obtener más información, consulte la documentación de Vínculos de aplicaciones de Facebook.

Abrir vínculos profundos

Debe agregar compatibilidad para abrir y mostrar vínculos profundos en la aplicación de Xamarin.iOS. Edite el archivo AppDelegate.cs e invalide el OpenURL método para controlar el formato de dirección URL personalizado. Por ejemplo:

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;
}

En el código anterior, buscamos una dirección URL que contenga /appname y pase el valor de query (123 en este ejemplo) a un controlador de vista personalizado en nuestra aplicación para mostrar el contenido solicitado al usuario.

Proporcionar resultados enriquecidos con datos estructurados

Al incluir el marcado de datos estructurados, puede proporcionar resultados de búsqueda enriquecidos al usuario final que van más allá de un título y una descripción. Incluya imágenes, datos específicos de la aplicación (como clasificaciones) y acciones para los resultados mediante el marcado de datos estructurados.

Los resultados enriquecidos son más atractivos y pueden ayudar a mejorar la clasificación en el Índice de búsqueda basado en la nube al atraer a más usuarios para interactuar con ellos.

Una opción para proporcionar el marcado de datos estructurados es mediante Open Graph. Por ejemplo:

<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">

Para obtener más información, consulte el sitio web de Open Graph .

Otro formato común para el marcado de datos estructurados es el formato microdatos de schema.org. Por ejemplo:

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

La misma información se puede representar en formato JSON-LD de schema.org:

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

A continuación se muestra un ejemplo de metadatos del sitio web que proporciona resultados de búsqueda enriquecidos al usuario final:

Apple admite actualmente los siguientes tipos de esquema de schema.org:

AggregateRating
ImageObject
InteractionCount
Ofertas
Organización
PriceRange
Receta
SearchAction

Para obtener más información sobre estos tipos de esquema, consulte schema.org.

Proporcionar acciones con datos estructurados

Los tipos específicos de datos estructurados permitirán que el usuario final pueda accionar un resultado de búsqueda. Actualmente se admiten las siguientes acciones:

Marcar un número de teléfono.
Obtener la dirección del mapa a una dirección determinada.
Reproducción de un archivo de audio o vídeo.

Por ejemplo, definir una acción para marcar un número de teléfono podría ser similar a la siguiente:

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

Cuando se presenta este resultado de búsqueda al usuario final, se mostrará un icono de teléfono pequeño en el resultado. Si el usuario pulsa el icono, se llamará al número especificado.

El código HTML siguiente agregaría una acción para reproducir un archivo de audio a partir del resultado de la búsqueda:

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

Por último, el código HTML siguiente agregaría una acción para obtener instrucciones del resultado de la búsqueda:

<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**

Para obtener más información, consulte el sitio para desarrolladores de Búsqueda de aplicaciones de Apple.