web-dev-qa-db-fra.com

Comment ajouter un support google chrome omnibox-search sur votre site?

Lorsque je saisis certaines URL dans Google Chrome omnibox, je vois le message "Appuyez sur la touche de tabulation pour rechercher dans $ URL". Par exemple, il existe des sites russes habrahabr.ru ou yandex.ru Lorsque vous appuyez sur la touche TAB, vous pourrez effectuer une recherche dans ce site et non dans votre moteur de recherche.

htmlgoogle-chromebrowseropensearch
138
Abzac

Chrome gère généralement cela via les préférences de l'utilisateur. (via chrome://settings/searchEngines)

Toutefois, si vous souhaitez implémenter ceci spécifiquement pour vos utilisateurs, vous devez ajouter un OSD (Open Search Description) à votre site.

tilisation de la fonction OmniBox [TAB] de Google Chrome pour/sur un site Web personnel?

Vous ajoutez ensuite ce fichier XML à la racine de votre site et vous y connectez dans votre <head> tag:

<link rel="search" type="application/opensearchdescription+xml" title="Stack Overflow" href="/opensearch.xml" />

Désormais, les visiteurs de votre page verront automatiquement les informations de recherche de votre site figurer dans les paramètres internes de Chrome à l'adresse chrome://settings/searchEngines.

Exemple de format XML OpenSearchDescription

<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
<ShortName>Your website name (shorter = better)</ShortName>
<Description>
Description about your website search here
</Description>
<InputEncoding>UTF-8</InputEncoding>
<Image width="16" height="16" type="image/x-icon">your site favicon</Image>
<Url type="text/html" method="get" template="http://www.yoursite.com/search/?query={searchTerms}"/>
</OpenSearchDescription>

La partie importante est le <url> article. {searchTerms} sera remplacé par ce que l'utilisateur recherche dans l'omnibar.

Voici un lien vers OpenSearch pour plus d'informations.

188
element119

Implémentation du support omnibox avec des suggestions de recherche

La réponse donnée par @ element119 fonctionne parfaitement, mais voici un code légèrement modifié pour prendre en charge les suggestions de recherche ainsi que le support Mozilla.

Suivez les étapes ci-dessous pour implémenter le support Omni Box pour votre site.

  1. Enregistrez le code suivant sous le nom search.xml
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/" xmlns:moz="http://www.mozilla.org/2006/browser/search/">
  <script/>
  <ShortName>Site Name</ShortName>
  <Description>Site Description (eg: Search sitename)</Description>
  <InputEncoding>UTF-8</InputEncoding>
  <Image width="16" height="16" type="image/x-icon">Favicon url</Image>
  <Url type="application/x-suggestions+json" method="GET" template="http://suggestqueries.google.com/complete/search?output=firefox&amp;q={searchTerms}" />
  <Url type="text/html" method="GET" template="http://yoursite.com/?s={searchTerms}" />
  <SearchForm>http://yoursite.com/</SearchForm>
</OpenSearchDescription>

  1. Téléchargez search.xml à la racine de votre site.

  2. Ajoutez la balise Meta suivante à la balise <head> De votre site.

<link rel="search" href="http://www.yoursite.com/search.xml" type="application/opensearchdescription+xml" title="You site name"/>

Assurez-vous de remplacer les URL du domaine par votre domaine.

26
Shan Eapen Koshy