Eigene Google Suche auf der Homepage einbinden

Google ist die größte und bekannteste Suchmaschine im Web und für Webseiten ein absolutes Muss, um mit der Konkurrenz mitzuhalten. Eine eigene Google Custom Search oder CSE ermöglicht es dem Webseiten Administrator nun seine eigene Suche mit Suchbox auf seiner Webseite einzupflegen. So kann nicht nur die Webseite selbst schneller nach Inhalten durchsucht werden, sondern gleichzeitig auch - auf Wunsch - das gesamte Netz.

Im Folgenden erklären wir dir an Hand einer Schritt für Schritt Anleitung, wie du eine eigene Google Suche in deine Webseite einbaust.

1. Erstellung einer eigenen Google Suche (CSE)

Als allererstes musst du dich in dem Google-Control Panel für die CSE anmelden. Dies ist in der Regel mit deinem normalen Google-Konto möglich, dass du auch für die anderen Google-Dienste, wie die Google Webmastertools, Gmail, AdSense etc. verwendest. Da Google die Anmeldungen teilweise etwas versteckt anbietet, findest du hier gleich den passenden Link: https://cse.google.de/cse/

Benutzt du tatsächlich noch keinen dieser Dienste, dann musst du dir einen Account erstellen, denn ohne ein Google-Konto ist die Nutzung der CSE, der eigenen Google Suche für deine Webseite, nicht möglich.

Sobald du im Control Panel angemeldet bist, gehst du im Menü auf "Neue Suchmaschine", stellst die Sprache deiner Google Suche ein und gibst dort die URL bzw. URLs der Seiten an, die von der CSE durchsucht werden sollen. Das kann entweder deine ganze Webseite sein, oder aber bestimmte Unterseiten.

Sogar eine Fremd-URL, wie www.bing.de oder eine ganz andere Seite wie Wikipedia kann benutzt werden. Bei Bedarf kannst Du auf diese Art und Weise auch gleich mehrere CSEs erstellen. Der Name wird an Hand der URL automatisch zugewiesen, kann aber von dir jederzeit geändert werden.

2. Zugriffsmöglichkeiten für die CSE

Es gibt zwei Möglichkeiten auf die CSE zuzugreifen. Zum einen über eine öffentliche URL, welche man in den Browser eingeben muss, um zur Suchmaschine zu gelangen. Die entsprechende URL findet man in den Optionen im Control Panel, wo du auch die CSE angelegt hast. Diese Möglichkeit eignet sich besonders für externe Suchanfragen, oder wenn man die Suche nicht direkt in die eigene Webseite einbauen kann oder will.

Die zweite Möglichkeit ist, die Google Suche durch ein entsprechendes Suchfenster in die eigene Webseite einzubauen. Diese Variante ist die praktischere und die am häufigsten Verwendete. Hier wird über einen HTML Code ein Suchfenster an einer beliebigen Position auf deiner Webseite hinzugefügt und direkt auf der Seite durch die Eingabe von Suchbegriffen gesucht. Wie du diesen Code auf der Webseite einbindest und wo du ihn erhältst, dass zeigen wir Dir im folgenden Abschnitt.

3. CSE Code für Suchbox generieren

Das Anlegen der Suchbox ist relativ einfach. Hierfür musst Du lediglich im Control Panel die entsprechende Suchmaschine auswählen und dann auf Einrichtung -> Grundlagen gehen. Dort findest du einen Button mit dem Namen "Code abrufen".

Ein Klick auf diesen Button generiert den entsprechenden Code, den du benötigst um die Google CSE Suche auf Deiner Webseite anzuzeigen. Diesen müssen wir nun in die Webseite einbinden und schon haben wir unsere Suchbox. Im Menü "Aussehen und Design" können wir noch zwischen verschiedenen Möglichkeiten der Designs wählen. So kannst du entscheiden, ob die Suche nur auf einer Seite angezeigt werden soll oder ob Suchergebnisse in einem neuen Fenster dargestellt werden.

4. Den Code in die Webseite einbinden

Den generierten Code für das entsprechende Design gilt es nun auf deine Webseite zu setzen. Entweder du baust dir deine persönliche Google Suche auf eine bestimmte Seite ein, beispielsweise auf deine von dir definierte Startseite oder du setzt den HTML Schnippsel in eine der Boxen, die bei vielen Designs bereits vorgeben sind.

<script>
  (function() {
    var cx = '014733843224484844763:tlxdtg2wgag';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = (document.location.protocol == 'https:' ? 'https:' : 'http:') +
        '//cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>

Beim Einbau auf einer einzelnen Seite gilt es zu beachten, dass hier der Editor erst noch in den Quell-Code Modus gestellt werden muss, da du sonst auf deiner Seite statt der Google Suche nur die lustigen Codezeichen siehst.

Bei Designs mit Boxen kannst du den Code direkt per Copy&Paste eintragen, da hier direkt der richtige Modus verwendet wird. Jetzt dann einfach speichern und fertig. Schon ist die eigene Google Suche erfolgreich auf deiner Seite eingebaut.

5. Der letzte Schliff

Als letzten Schliff kann man noch entscheiden, ob die automatische Vervollständigung aktiviert sein soll oder nicht. Dies kann man ganz einfach und schnell erledigen, in dem man den Code der Google CSE Box ändert.

Die Option EnableAutoComplete ist hier das Kommando. Standardmäßig auf disable gesetzt ist die Autovervollständigung bei der Suche deaktiviert. Ändert man das Kommando in enable, wird die Autovervollständigung aktiviert. Darüber hinaus kann in dem Code noch geändert werden, wie Suchergebnisse angezeigt werden sollen.

Ein weiteres entsprechendes und sehr ausführliches Tutorial über die eigene Google Suchmaschine CSE und die Einbindung, Erstellung, Anpassung, etc. sollte man eigentlich unter dem folgenden Link: http://developers.google.com/custom-search/docs/tutorial/ finden. Aber leider hat es Google wohl versäumt, mal die eigenen Links auf Fehler zu überprüfen, denn sonst hätte man dort gemerkt, dass hier eine 404 Fehlerseite ausgeliefert wird.

Wer der englischen Sprache mächtig ist, der findet allerdings hier: https://developers.google.com/custom-search/docs/tutorial/creatingcse eine recht ausführliche Anleitung.