Nachdem Sie Ihre Programmable Search Engine erstellt haben, können Sie Ihrer Website das Programmable Search Element hinzufügen. Dazu müssen Sie einen Code kopieren und an der Stelle in den HTML-Code Ihrer Website einfügen, an der Ihre Suchmaschine angezeigt werden soll.
- Klicken Sie im Steuerfeld auf die gewünschte Suchmaschine.
- Klicken Sie auf der Seite Übersicht im Abschnitt Einfach auf Code abrufen. Kopieren Sie den Code und fügen Sie ihn dort in den HTML-Quellcode Ihrer Seite ein, wo das Programmable Search Element angezeigt werden soll.
Das Element <div class="gcse-search"></div> ist ein Platzhalter. Hier wird das Suchelement (sowohl das Suchfeld als auch die Suchergebnisse) gerendert.
<div class="gcse-search"></div>
Verschiedene Layouts ausprobieren
Häufig ist es sinnvoll, ein Suchfeld unabhängig von den Suchergebnissen zu verwenden. Mit dem zweispaltigen Layout können Sie ein Suchfeld in einem Bereich Ihrer Seite (z. B. in der Seitenleiste) rendern und Ergebnisse in einem anderen Bereich anzeigen (z. B. im Hauptbereich der Seite).
Um das Layout Ihrer Suchmaschine zu ändern, wechseln Sie zum Abschnitt Layout auf der Seite Design im Steuerfeld. Nachdem Sie das zweispaltige Layout im Steuerfeld ausgewählt und gespeichert haben, müssen Sie auch den HTML-Code für das Suchelement ändern.
<div style="border: 1px solid blue;">
Area 1 (for example a sidebar)
<div class="gcse-searchbox"></div>
</div>
<div style="border: 1px solid red;">
Area 2 (for example main area of the page)
<div class="gcse-searchresults"></div>
</div>
Ein weiteres interessantes Layout ist die Option mit zwei Seiten. Damit können Sie ein eigenes Suchfeld auf einer Seite implementieren und die Standardsuchergebnisse auf einer anderen Seite mithilfe von Parametern in der Adressleiste rendern.
Wählen Sie das zweiseitige Layout im Steuerfeld aus und speichern Sie es. Implementieren Sie auf einer Seite ein eigenständiges Suchfeld und ändern Sie das Attribut resultsUrl so, dass es auf die URL verweist, auf der die Ergebnisse angezeigt werden sollen.
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchbox-only" data-resultsUrl="YOUR_RESULTS_PAGE_URL"></div>
Um eine eigenständige Suchergebnisseite zu implementieren, fügen Sie das Ergebnis-Code-Snippet in Ihre Ergebnisseite ein:
<script async src="https://cse.google.com/cse.js?cx=YOUR_ENGINE_ID"></script>
<div class="gcse-searchresults-only"></div>
Jetzt können Sie Suchergebnisse auf dieser Seite auslösen, indem Sie in der URL das Argument „q“ übergeben:
https://my-results-page-url.com/?q=myQuery
Beachten Sie den Parameter q=myQuery in der Adressleiste. Dadurch weiß das Element <div class="gcse-searchresults-only"></div>, welche Abfrageergebnisse angezeigt werden sollen.
Weitere Informationen…
Weiter mit Automatische Vervollständigung aktivieren