7

Recentemente eu fui acessar o site do SOpt pelo Google Chrome e me deparei com um recurso interessante que é o "Tab to Search" (Omnibox).

Em resumo, ao digitar o endereço de um site e apertar a tecla Tab você realiza a busca diretamente em um site específico sem a necessidade de alterar o mecanismo de busca e outras soluções.

A imagem abaixo ilustra melhor o que estou dizendo:

inserir a descrição da imagem aqui

Seguindo exemplo do SOpt, ao pressionar Tab e realizar uma busca, o browser me redireciona para a página de busca do site, nesse caso https://pt.stackoverflow.com/search?q=termo%20pesquisado.

Diante disse, tenho três perguntas que estão interligadas, que são:

  • Qual recurso é esse?
  • Como adicionar ao meu site?
  • Somente o Google Chrome possui esse suporte?
3
  • 1
    stackoverflow.com/questions/7630144/…
    – durtto
    Commented 28/12/2016 às 13:35
  • 1
    @durtto Obrigado pelo link. Já li ele e outros. Queria apenas trazer para cá pois não encontrei nada parecido aqui. xD
    – Randrade
    Commented 28/12/2016 às 13:38
  • Quanto tempo já existe isso? Vi isso pela primeira vez hoje!!! Que loucura!
    – LCarvalho
    Commented 26/10/2017 às 20:50

1 Resposta 1

3

Provavelmente se refere ao application/opensearchdescription+xml, é um formato de XML que adiciona busca personalizada para o seu site, deve ficar algo assim:

<link rel="search" type="application/opensearchdescription+xml" title="Titulo" href="busca.xml">

E o busca.xml:

<?xml version="1.0" encoding="UTF-8"?>
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/"
                   xmlns:moz="http://www.mozilla.org/2006/browser/search/">
    <ShortName>Nome do buscador</ShortName>
    <Description>Descrição</Description>
    <Tags>asp.net programar core</Tags>
    <Contact>email de contato</Contact>
    <InputEncoding>UTF-8</InputEncoding> <!-- altere para o seu charset padrão usado na página nos inputs -->
    <OutputEncoding>UTF-8</OutputEncoding> <!-- altere para o seu charset padrão usado na página na saida -->
    <Image width="16" height="16" type="image/x-icon">{endereço do icone}</Image>

    <Url type="text/html" method="get" template="http://www.meusite.com.br/busca?q={searchTerms}" />
    <Url type="application/opensearchdescription+xml"
        rel="self"
        template="http://www.meusite.com.br/busca.xml" />
    <Language>pt-BR</Language> <!-- idioma da página -->
    <AdultContent>false</AdultContent>
    <Attribution>Atribuição do proprietário/empresa</Attribution>
</OpenSearchDescription>

A maior parte das tags é opcional, vou pesquisar um pouco mais e adicionar o detalhamento sobre cada uma, tem mais configurações possíveis porém faz algum tempo que não trabalho com isto.

Note que cada página dentro de um mesmo site pode ter o seu próprio XML de pesquisa.

Para ajustar o envio da requisição ajuste o metodo, sendo POST ou GET com o atributo method="" e o template= contendo a url, o {searchTerms} será obtido pelo que o usuário editou, isto tudo deve ser feito na tag Url:

<Url type="text/html" method="get" template="http://www.meusite.com.br/busca?q={searchTerms}"></Url>

Lista de sugestões pré-definidas:

É possível usar a tag com a URL de um json com sugestões pré-definidas:

 <Url type="application/x-suggestions+json" template="URL do json" />

Exemplo:

[
   "sea",
   [
      "sears",
      "search engines",
      "search engine",
      "search",
      "sears.com",
      "seattle times"
   ],
   [
      "7,390,000 results",
      "17,900,000 results",
      "25,700,000 results",
      "1,220,000,000 results",
      "1 result",
      "17,600,000 results"
   ],
   [
      "http://meusite.com.br?q=sears",
      "http://meusite.com.br?q=search+engines",
      "http://meusite.com.br?q=search+engine",
      "http://meusite.com.br?q=search",
      "http://meusite.com.br?q=sears.com",
      "http://meusite.com.br?q=seattle+times"
   ]
]

O formato do array:

  • No primeiro item do array temos a palavra que irá buscar as sugestões
  • No segundo temos 6 sugestões de palavas
  • No terceiro temos o resultado para cada sugestão
  • No quarto temos as urls que podem ser modificadas para cada palavra, podendo facilitar o uso com urls amigáveis.

Suporte:

Navegadores como Google Chrome e Firefox suportam bem o opensearchdescription, mas outros navegadores não tem tanto ou nenhum suporte para isto, de qualquer forma deixar o <link type="search" ...> não vai afeta-los negativamente.

3
  • Mas no Firefox existe alguma opção para buscar direto no site sem precisar alternar o "Mecanismo de Busca"?
    – Randrade
    Commented 28/12/2016 às 14:58
  • 2
    @Randrade o Firefox tentou implementar a propria versão do Omibox, mas removeram (lembro-me de ter usado), hoje eles funcionam semelhante, mas não em todos aspectos, no caso do opensearch somente clicano no sinal de "mais" no buscador e adicionando. É algo proprio do navegador, somente o Chrome e alguns outros baseados no chrome fazem toda interação com algo semelhante ao Omibox, é uma característica do navegador (admito que acho bem mais prático, a Google entende dos UX :D)
    – Syzoth
    Commented 28/12/2016 às 15:02
  • 2
    A Google sendo a Google. kkk
    – Randrade
    Commented 28/12/2016 às 15:19

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .