Nesta página, você vai aprender a personalizar a aparência da caixa e dos resultados da pesquisa. Se quiser implementar o design do seu mecanismo de pesquisa usando o arquivo de contexto, consulte a página "Como criar a aparência com XML".
- Visão geral
- Como criar componentes individuais da interface de pesquisa
- Hospedagem dos resultados usando o elemento de pesquisa
- Como definir o layout do elemento de pesquisa
- Como criar a caixa de pesquisa
- Como criar os resultados
- Implementar o design no seu site
Visão geral
Você pode mudar a caixa de pesquisa e os resultados do Mecanismo de Pesquisa Programável no painel de controle ou no arquivo de contexto XML. Se você tiver alguns mecanismos de pesquisa, será fácil gerenciá-los e personalizá-los com o painel de controle. Basta navegar até a página Aparência, selecionar um estilo, criar os componentes, clicar em Salvar e pronto. Esta página mostra como fazer tudo isso. No entanto, se você estiver criando e gerenciando um grande número de mecanismos de pesquisa, mesmo esse procedimento simples, quando repetido em vários mecanismos, se torna cansativo. Nesses casos, trabalhar com XML seria melhor. Se você decidir usar XML, leia esta página primeiro para ter uma ideia de como as coisas geralmente funcionam. Depois, leia a página Como criar a aparência com XML para saber mais sobre os elementos e atributos XML.
Se você não tiver certeza se deve usar apenas o painel de controle ou o formato XML, consulte a página Noções básicas, que discute os benefícios e desafios de cada formato.
Observação:antes de começar a criar a aparência do seu mecanismo de pesquisa personalizado, leia as Diretrizes para implementar o Mecanismo de Pesquisa Programável . É um documento curto que explica como lidar com a marca e a atribuição do Google.
Hospedagem dos resultados usando o elemento de pesquisa
Um elemento de pesquisa é um objeto que pode ser incorporado à sua página da Web e permite personalização extensa. Ele pode mostrar a caixa de pesquisa e os resultados juntos na mesma página da Web que o leitor está visualizando ou em páginas diferentes.
Observação:quando combinado com um layout compacto, o elemento de pesquisa funciona bem em dispositivos móveis.
Você também pode aproveitar a API Programmable Search Element Control para personalizar ainda mais a interface de pesquisa. Muitas personalizações são compatíveis com atributos HTML. Por exemplo, você pode escolher entre seis layouts para a página de resultados ou definir o número de resultados da pesquisa a serem retornados.
O Mecanismo de Pesquisa Programável não oferece mais suporte à opção de hospedagem de iframe. Recomendamos os layouts "Duas páginas" ou "Somente resultados" no elemento de pesquisa como as novas opções. Confira nossa postagem do blog para mais informações.
Como criar componentes individuais da interface de pesquisa
Os componentes personalizáveis
Os componentes que podem ser personalizados dependem do layout do elemento selecionado do mecanismo de pesquisa. Por exemplo, o painel de controle permite adicionar um logotipo apenas para mecanismos de pesquisa hospedados pelo Google. Não é possível adicionar um logotipo a mecanismos de pesquisa que usam outras opções de hospedagem.
É possível definir os seguintes componentes usando o painel de controle:
- O layout do elemento de pesquisa
- A caixa de pesquisa
- Os resultados da pesquisa
- As guias de refinamento
- As promoções
- O logotipo (somente hospedado pelo Google)
Como definir o layout do elemento de pesquisa
Você pode personalizar o layout da interface de pesquisa na página da Web. Você pode colocar a caixa de pesquisa e a seção de resultados na mesma coluna ou mostrar em colunas separadas, com a caixa de pesquisa em uma coluna e a seção de resultados em outra ou até mesmo em outra página.
Estas são as opções de layout (clique nos links para ver demonstrações):
| Opção | Descrição |
|---|---|
| OverLay | Mostre os resultados da pesquisa em uma sobreposição. |
|
Duas páginas
Simples Várias caixas de pesquisa/seções de resultados |
A caixa de pesquisa e a seção de resultados da pesquisa são colocadas em duas páginas da Web diferentes.
Observação: a seção de resultados da pesquisa também contém uma caixa de pesquisa. Os usuários podem enviar consultas diretamente na página de resultados da pesquisa. |
| Largura total | A caixa de pesquisa e a seção de resultados ocupam toda a largura da página ou da coluna em que você inseriu o elemento de pesquisa. |
| Duas colunas | A caixa de pesquisa e a seção de resultados da pesquisa estão em colunas ou seções diferentes da sua página da Web. Para fechar a seção de resultados da pesquisa, o usuário clica no ícone "X" ao lado da caixa de pesquisa. |
| Compacta |
Assim como a opção de largura total, ela ocupa toda a largura da página ou coluna, mas
a seção de resultados mostra menos resultados, ocupando menos espaço vertical quando
é expandida na página da Web.
Dica:essa opção é otimizada para smartphones e dispositivos móveis. |
|
Somente resultados
Pesquisar por URL Pesquisar usando a caixa de pesquisa |
Os resultados da pesquisa são colocados em uma das suas páginas da Web, e a página de resultados não tem uma caixa de pesquisa. Use sua própria caixa de pesquisa para enviar a consulta.
Observação: um Mecanismo de Pesquisa Programável que não mostra anúncios não tem a opção de desativar a marca. |
|
Hospedado pelo Google
Janela atual Nova janela |
A caixa de pesquisa é colocada em uma das suas páginas da Web. Os resultados da pesquisa são mostrados em uma página da Web hospedada pelo Google, que pode ser aberta na mesma janela ou em uma nova. |
Como criar a caixa de pesquisa
Você pode inserir a caixa de pesquisa em qualquer lugar no corpo HTML da sua página da Web, embora, por convenção, as caixas de pesquisa sejam colocadas na parte superior (ou perto da parte superior) das páginas da Web, como no exemplo a seguir:
Figura 1:página da Web com a caixa de pesquisa na parte de cima.
Ativar o preenchimento automático
O preenchimento automático oferece opções de consulta aos usuários enquanto eles digitam as consultas na caixa de pesquisa. É semelhante às consultas opcionais que aparecem na Pesquisa Google.
Figura 2:digitar apenas alguns caracteres na caixa de pesquisa abre uma lista suspensa com opções para diferentes consultas de pesquisa.
O Mecanismo de Pesquisa Programável personaliza o preenchimento automático especificamente para seu mecanismo de pesquisa. Ele usa um algoritmo diferente que extrai informações de várias fontes, incluindo consultas ao seu mecanismo de pesquisa, bem como palavras-chave e frases extraídas do conteúdo de sites que seu mecanismo de pesquisa abrange.
O recurso de preenchimento automático está localizado na seção Preenchimento automático da página "Recursos de pesquisa".
Para ativar o preenchimento automático, faça o seguinte:
- Acesse a seção Autocompletar da página "Recursos da Pesquisa".
-
Ative o controle Ativar preenchimento automático.
Observação:como as consultas de preenchimento automático são geradas para cada mecanismo de pesquisa, leva algumas horas para que elas comecem a aparecer no seu mecanismo.
- Se você estiver ativando o preenchimento automático em um mecanismo de pesquisa pela primeira vez, remova o snippet de código da caixa de pesquisa que você inseriu na sua página da Web. Substitua pelo novo gerado na guia "Receber código". Para instruções mais detalhadas, consulte a seção Implementar o design no seu site.
Como criar os resultados
É possível mudar os seguintes componentes da página de resultados:
- Os resultados individuais
- O tipo da fonte
- As cores do texto
- As guias de refinamento
- As promoções
- O logotipo (somente hospedado pelo Google)
Os resultados individuais
Se você quiser delinear visualmente resultados individuais ou destacar os que estão sendo selecionados pelos usuários, defina as bordas e o plano de fundo para cada resultado.
Figura 3:resultados com resultados individuais delineados e resultado individual destacado ao passar o cursor do mouse.
As guias de refinamento
Se você criou marcadores de refinamento no seu mecanismo de pesquisa, eles vão aparecer como guias no elemento de pesquisa. Use o painel de controle para mudar as cores das guias de refinamento.
Promoções
Se você criou promoções no mecanismo de pesquisa, é possível mudar a aparência delas. As promoções são um tipo especial de resultados da pesquisa que você cria.
O logotipo (somente hospedado pelo Google)
Se você permitir que o Google hospede sua página de resultados, poderá incluir um logotipo ou uma imagem pequena ao lado da caixa de pesquisa na página de resultados. A imagem precisa ser um arquivo .jpg, .png ou .gif hospedado em um site (seu ou de um site sem restrições de direitos autorais). Você pode associar um URL à imagem, transformando-a em uma imagem clicável.
Confira abaixo um exemplo de página de resultados com um logotipo.
Figura 4:caixa de pesquisa com uma imagem
Implementar o design no seu site
Depois de criar a aparência do seu mecanismo de pesquisa, você pode implementá-lo na página da Web fazendo o seguinte:
- Clique em Salvar nas seções modificadas na página Aparência.
- Clique em Receber código na seção "Layout" da página Aparência.
-
Copie o snippet de código gerado no pop-up Código.
Se você selecionou o layout de duas colunas, copie dois snippets de código: um para a caixa de pesquisa e outro para os resultados.
Se você selecionou o layout de duas páginas, insira o URL da página da Web que vai mostrar os resultados para seu mecanismo de pesquisa. Insira o nome do parâmetro de consulta incorporado ao URL, que é analisado pela página de resultados da pesquisa. Por fim, copie os dois snippets de código.
O snippet de código para o layout somente resultados é para o caso em que os resultados da pesquisa são mostrados em uma nova página. Insira o nome do parâmetro de consulta incorporado ao URL, que é analisado pela página de resultados da pesquisa. Por fim, copie o snippet de código dos resultados da pesquisa.
-
Insira o código em todas as páginas em que você quer que uma caixa do Mecanismo de Pesquisa Programável apareça. Você pode colar o
código em qualquer lugar na tag
<body></body>da sua página da Web.Observação:para maior compatibilidade entre navegadores, é recomendado que suas páginas HTML usem um tipo de documento com suporte, como
<!DOCTYPE html>.Se você estiver usando efeitos para quando o usuário passa o cursor sobre seu elemento de pesquisa, a página HTML precisa usar um tipo de documento com suporte para isso, como
<!DOCTYPE html>.
Se você selecionou o layout de duas colunas, insira o código da caixa de pesquisa em uma coluna e o código dos resultados em outra.
Se você selecionou o layout de duas páginas, insira o código da caixa de pesquisa na página da Web em que ela vai aparecer e o código dos resultados na página da Web em que eles vão aparecer.
Se você selecionou o layout somente resultados, insira o snippet de código na página da Web em que os resultados da pesquisa vão aparecer.