Nachdem Sie die Programmable Search Engine erstellt haben, können Sie Ihrer Website das Programmable Search Element hinzufügen. Dazu müssen Sie 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 Suchmaschine, die Sie verwenden möchten.
- Klicken Sie auf der Seite Übersicht im Abschnitt Grundlagen 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 <div class="gcse-search"></div>-Element ist ein Platzhalter. Hier wird das Suchelement (sowohl das Suchfeld als auch die Suchergebnisse) gerendert.
<div class="gcse-search"></div>
Verschiedene Layouts ausprobieren
In vielen Fällen ist es sinnvoll, ein Suchfeld unabhängig von den Suchergebnissen anzeigen zu lassen. Mit einem zweispaltigen Layout können Sie ein Suchfeld in einem Bereich Ihrer Seite darstellen (z. B. in der Seitenleiste) und die Ergebnisse in einem anderen Bereich (z. B. im Hauptbereich der Seite) anzeigen.
Um das Layout Ihrer Suchmaschine zu ändern, gehen Sie im Steuerfeld auf der Seite Design zum Abschnitt Layout. 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 zweiseitige Option. Damit können Sie Ihr eigenes Suchfeld auf einer Seite implementieren und die Standardsuchergebnisse auf einer anderen Seite mithilfe von Parametern in der Adressleiste darstellen.
Wählen und speichern Sie das zweiseitige Layout im Steuerfeld. Implementieren Sie auf einer Seite ein eigenständiges Suchfeld und ändern Sie das resultsUrl-Attribut 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>
Fügen Sie das Ergebnis-Code-Snippet in Ihre Ergebnisseite ein, um eine eigenständige Suchergebnisseite zu implementieren:
<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 ein "q"-Argument in der URL übergeben:
https://my-results-page-url.com/?q=myQuery
Beachten Sie den Parameter q=myQuery in der Adressleiste. So weiß das Element <div class="gcse-searchresults-only"></div>, welche Abfrageergebnisse angezeigt werden sollen.
Weitere Informationen…
Fahren Sie mit Automatische Vervollständigung aktivieren fort.