Como incluir o Google Custom Search Engine (CSE) no site WordPress sem plug-in (duas abordagens diferentes)

Publicados: 2016-03-16

Pesquisa personalizada do Google para site WordPress

Importância da funcionalidade de pesquisa e por que devemos usar a Pesquisa personalizada do Google no WordPress?

Google ou Bing? Nenhuma dúvida sobre isso. O Google é o melhor mecanismo de pesquisa e pioneiro da pesquisa no mundo. Não há motivo para você não usar a Pesquisa personalizada do Google em seu blog WordPress. Ele também dará a melhor experiência de pesquisa para os leitores do seu blog. Neste tutorial, vamos passar por etapas simples para ter a Pesquisa personalizada disponível para o seu site WordPress.

Sob o guarda-chuva do alfabeto ( https://abc.xyz ) o Google é uma empresa de pesquisa independente. Então, o que isso significa para todos os consumidores? Bem, acredito que não vai mudar nada para nós, exceto que a estrutura de relatórios mudou e definitivamente o nome das ações da NYSE.

Por que precisamos do CSE (Custom Search Engine)?

É muito importante fornecer uma melhor funcionalidade de pesquisa no site. Normalmente, a página principal contém menos de 10 postagens, mas na maioria dos casos os usuários do seu blog podem obter os melhores artigos relacionados apenas na Pesquisa.

Além disso, um resultado de pesquisa muito mais rápido do que o padrão do WordPress Search + Bom para o SEO do seu site, pois o Google conhece essa lista de resultados da consulta de pesquisa e não a adiciona à lista de conteúdo duplicada.

Há two ways configurar a Pesquisa personalizada do Google:

  1. Do Google Adsense Console (no Crunchify estamos usando this approach )
  2. Do painel de pesquisa personalizada do Google

Configuration Approach-1. Do console do Google Adsense

Passo 1

  • Ir para Adsense
  • Clique na guia My ads
  • Clique em Search -> Custom search engines
  • Clique em New Custom Search engine

Criar novo mecanismo de pesquisa personalizado - Google Adsense

Passo 2

  • Forneça Name . É texto de forma livre
  • Selecione Only sites I select
  • Especifique o nome do seu site

Google Adsense - CSE - Configuração básica

Etapa 3

Modifique as opções abaixo conforme você precisa

  • Canal personalizado
  • Estilo da caixa de pesquisa
  • Estilo CSS do anúncio

Passo 4

Na opção Resultados da pesquisa, verifique se as configurações abaixo estão corretas

  • Resultados da pesquisa: on my website
  • URL onde os resultados da pesquisa serão exibidos: a search page do seu blog

Dicas do Crunchify sobre como configurar o Mecanismo de pesquisa personalizado do Google

Passo-5

Clique em salvar e obtenha os dois códigos

  • Box Code pesquisa
  • Result Code pesquisa

Resultado de pesquisa do Adsense e código da caixa de pesquisa

Passo-6

Vá para o seu site e crie /search

WordPress Criar página de pesquisa

Passo-7

Na seção HTML , cole o search result code e clique em salvar.

Passo-8

Vá para Appearance -> seção Widgets e cole search box code e clique em salvar. Modifique o CSS da caixa de pesquisa conforme sua necessidade. Aqui está um CSS personalizado que estou usando no Crunchify.

style.css
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
. crunchify - search {
     width : 76 % ! important ;
     padding : 9px 6px 7px 6px ! important ;
     max - width : 275px ;
     margin : 10px 0px 0px 0px ! important ;
}
 
input [ type = "submit" ] {
     background - color : #dd7127;
     border : none ;
     box - shadow : none ;
     color : #fff;
     cursor : pointer ;
     font - family : 'Oswald' , sans - serif ;
     font - size : 14px ;
     font - weight : 400 ;
     letter - spacing : 1px ;
     padding : 6px 10px ;
     width : auto ;
    - webkit - font - smoothing : antialiased ;
     border - radius : 3px ;
}

E você está tudo pronto. Tente pesquisar palavras-chave e você deverá ver o resultado da pesquisa do Google na página /search .

Configuration Approach-2 . Do painel de pesquisa personalizada do Google

Passo 1

  • Acesse https://cse.google.com/cse/all
  • Clique em Add mecanismo de pesquisa

Adicionar-Pesquisa-Personalizada-Crunchify-Dicas

Passo 2

  • Forneça o URL do seu site
  • Clique em Adicionar

Crunchify-Google-Custom-Search-Engine-Setup

Etapa 3

  • Clique em seu mecanismo de pesquisa recém-criado
  • Vá para a seção Look and feel
  • Vá para a guia Layout
  • Selecione Two Page
  • Clique Save and Get Code

Passo 4

  • Obter código para caixa de pesquisa
    • Coloque na barra lateral
  • Obter código para o resultado da pesquisa
    • Criar página http://<seublog.com>/search
    • Coloque o código nesta página

Passo-5

Tente pesquisar por palavras-chave como o Google Apps e você verá um resultado como este.

Google-Custom-Search-Result-Crunchify

Painel de resultados:

Google-CSE-Search-Result-Crunchify

Passo-6

Algum tempo atrás no Crunchify , modificamos o resultado com o CSS personalizado abaixo:

Stylish Google Custom Search - Custom CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
/* Change Search Button Code  */
input . gsc - search - button {
     padding : 10px ! important ;
     height : 35px ! important ;
     border - color : #c12129 !important;
     background - color : #c12129 !important;
     color : #fff !important;
}
 
/* Change Search Button Hover Color */
input . gsc - search - button : hover {
     border - color : #444 !important;
     background - color : #444 !important;
}
 
/* Change Bottom Margin after each result */
. gsc - control - cse . gsc - table - result {
     margin - bottom : 10px ! important ;
}
 
/* Hide URL from search result */
. gsc - url - top , . gsc - url - bottom {
     display : none ! important ;
}
 
/* Change input field look and feel */
input . gsc - input {
     padding : 10px ! important ;
     margin - left : 0px ;
     background - position : right center ! important ;
     background - repeat : no - repeat ! important ;
}
 
/* Hide number of result count */
. gsc - result - info {
     display : none ;
}
. gs - webResult : hover {
     background - color : #eee;
}
 
/* Change mouse hover result background change */
. gsc - cursor - page {
     font - size : 1.1em ;
     padding : 3px 7px ;
     border : 2px solid #eee;
     background - color : #eee !important;
}
 
/* Change search result heading font size change */
. gsc - result . gs - title {
     height : 2.0em ! important ;
     font - size : 16px ! important ;
}
 
. gs - result . gs - snippet {
     line - height : 19px ! important ;
}
 
/* Remove Clear cross image and CSS adjustment - below 3 CSS prop changes */
div . gsc - clear - button {
     display : none ! important ;
}
td . gsc - clear - button {
     width : 0px ! important ;
}
td . gsc - input {
     padding - right : 1px ! important ;
}

Agora vamos dar uma olhada nas duas consultas:

Approach-1 :

  • https://crunchify.com/ search/?cx= partner-pub-xxxxxxxxxxxxxxxxx%3A9846869911&cof=FORID%3A10&ie=UTF-8&q=Crunchify&sa=Search……

Approach-2 :

  • https://crunchify.com/ search/?q =Google%20Apps (Isso não funcionará, pois temos a regra .htaccess em vigor)

Como você vê acima – ambas as abordagens têm different query parameters .

Qual o proximo?

Certifique-se de atualizar o URL JSON-LD Schema da caixa de pesquisa de sitelinks do Google.

Validar URL de marcação JSON-LD Schema.org da caixa de pesquisa de sitelinks do WordPress