web-dev-qa-db-ja.com

google chrome omnibox-searchサポートをサイトに追加するには？

Google Chrome omniboxにURLの一部を入力すると、「TABを押して$ URLで検索」というメッセージが表示されます。たとえば、ロシアのサイトhabrahabr.ruまたはyandex.ruがあります。 Tabキーを押すと、検索エンジンではなく、そのサイトで検索できるようになります。

htmlgoogle-chromebrowseropensearch
138
Abzac

通常、Chromeはユーザー設定でこれを処理します。 （経由chrome://settings/searchEngines）

ただし、これをユーザー向けに特別に実装する場合は、OSD（Open Search Description）をサイトに追加する必要があります。

Google ChromeのOmniBox [TAB]機能を個人のWebサイト用に使用していますか？

次に、このXMLファイルをサイトのルートに追加し、<head> 鬼ごっこ：

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

これで、ページへの訪問者は、サイトの検索情報をchrome://settings/searchEngines。

OpenSearchDescription XML形式の例

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

重要な部分は<url>アイテム。 {searchTerms}は、ユーザーがオムニバーで検索するものに置き換えられます。

詳細は OpenSearch へのリンクをご覧ください。

188
element119

検索候補を使用したアドレスバーのサポートの実装

@ element119による答えは完璧に機能しますが、ここでは検索の提案とMozillaのサポートをサポートするために少し調整したコードを示します。

以下の手順に従って、サイトにオムニボックスサポートを実装してください。

  1. 次のコードを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. search.xmlをサイトのルートにアップロードします。

  2. 次のメタタグをサイトの<head> 鬼ごっこ

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

ドメインのURLを必ずドメインに置き換えてください。

26
Shan Eapen Koshy