Como personalizar resultados de pesquisa
Mantenha tudo organizado com as coleções
Salve e categorize o conteúdo com base nas suas preferências.
De maneira semelhante à personalização da caixa de pesquisa, você pode adicionar outras opções ao elemento dos resultados da pesquisa.
Por exemplo, para mudar nosso mecanismo de pesquisa de
com base em imagem, podemos usar o atributo defaultToImageSearch.
Primeiro, você precisa ativar a pesquisa por imagens no painel de controle do seu mecanismo de pesquisa. Na seção Configuração, na guia Noções básicas, clique na opção Pesquisa de imagens para ativar. posição Depois disso, adicione o atributo defaultToImageSearch ao elemento <div class="gcse-searchresults"></div> no seu site.
<!-- Insira seu próprio ID do Mecanismo de Pesquisa Programável aqui -->
<script async src="https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga"></script>
<!-- Tente alterar o valor do atributo para "true" ou "falso" -->
<div class="gcse-searchbox"></div>
<div class="gcse-searchresults" data-defaultToImageSearch="true"></div>
Agora, quando você fizer uma pesquisa, a guia de pesquisa de imagens vai aparecer por padrão.
Há muitas outras opções disponíveis. Saiba mais sobre outras opções de personalização de resultados da pesquisa na seção API Programmable Search Element Control.
Próxima etapa...
Prossiga para as Próximas etapas.
Exceto em caso de indicação contrária, o conteúdo desta página é licenciado de acordo com a Licença de atribuição 4.0 do Creative Commons, e as amostras de código são licenciadas de acordo com a Licença Apache 2.0. Para mais detalhes, consulte as políticas do site do Google Developers. Java é uma marca registrada da Oracle e/ou afiliadas.
Última atualização 2025-07-25 UTC.
[null,null,["Última atualização 2025-07-25 UTC."],[[["\u003cp\u003eThe search results element can be customized with additional options, such as switching to image-based results using the \u003ccode\u003edefaultToImageSearch\u003c/code\u003e attribute.\u003c/p\u003e\n"],["\u003cp\u003eTo enable image search, you need to activate it in the Control Panel for your search engine and then add the \u003ccode\u003edefaultToImageSearch\u003c/code\u003e attribute to the search results div element.\u003c/p\u003e\n"],["\u003cp\u003eThe \u003ccode\u003edefaultToImageSearch\u003c/code\u003e attribute, when set to "true", makes the image search tab the default view for search results.\u003c/p\u003e\n"],["\u003cp\u003eFurther customization options for search results can be found in the Programmable Search Element Control API documentation.\u003c/p\u003e\n"]]],[],null,["# Customizing Search Results\n\nIn a similar way to customizing search box, you can add additional options to the search results element.\n\nFor example, in order to change our search engine from webresults-based\nto image-based, we can utilize the `defaultToImageSearch` attribute.\n\nFirst of all, you need to enable Image Search in the [Control Panel](https://programmablesearchengine.google.com) for your search engine. In the **Setup** section, in **Basics** tab, click the **Image search** option into the \"on\" position. After that, add the `defaultToImageSearch` attribute to the `\u003cdiv class=\"gcse-searchresults\"\u003e\u003c/div\u003e` element on your website. \n\\\u003c!-- Insert your own Programmable Search Engine ID here --\\\u003e \\\u003cscript async src=\"https://cse.google.com/cse.js?cx=017643444788069204610:4gvhea_mvga\"\\\u003e\\\u003c/script\\\u003e \\\u003c!-- Try switching the attribute value to \"true\" or \"false\" --\\\u003e \n\n \u003cdiv class=\"gcse-searchbox\"\u003e\u003c/div\u003e\n \u003cdiv class=\"gcse-searchresults\" data-defaultToImageSearch=\"true\"\u003e\u003c/div\u003e\n\nNow, when you search for something, the image search tab is showing as a default.\n\nThere are many more options available. You can read about other search results customization options in [Programmable Search Element Control API](/custom-search/docs/element#supported_attributes) section.\n\nNext...\n-------\n\nContinue to [Next steps](/custom-search/docs/tutorial/nextsteps)."]]
