Google Custom Search in WordPress-Blog integrieren

Google bietet eine «benutzerdefinierte Suche» an: Per Mausklick kann man sich eine auf die eigenen Bedürfnisse zugeschnittene Suchmaschine zusammenklicken. Diese Custom Search Engine, kurz CSE, lässt sich so konfigurieren, dass sie erstens natürlich auf dem eigenen Blog verwendet werden kann und zweitens nur die eigenen Webseiten durchsucht.

Die in WordPress standardmässig eingebaute Suche ist praktisch und muss nicht manuell angepasst werden. Sie ist aber nicht sooo leistungsfähig und bei grossen Blogs kann es immer schwieriger werden, gezielt Inhalte zu finden.

Lesen Sie hier, wie man die WordPress-eigene Suche durch die leistungsstärkere Suche von Google ersetzt.

Google stellt für die benutzerdefinierte Suche unter www.google.com/cse eigens eine Website mit allen nötigen Konfigurationsmöglichkeiten zur Verfügung.

1. Schritt: Festlegen der Grunddaten

Nach der Erstellung der ersten eigenen Suchmaschine sind auf der ersten Maske alle Konfigurationsparameter wie Suchverhalten der Suchmaschine, Look & Feel, etc. zugänglich.

Auf der ersten Seite nennt man die eigene Suchmaschine beim Namen und stellt u.a. ein, ob die Suchmaschine das ganze Web oder nur die eigene Website durchsuchen soll und das mit oder ohne Bilder zu berücksichtigen.

Ebenfalls steht auf dieser Seite die eindeutige ID der Suchmaschine. Diese kann wichtig werden, wenn man Support beim Einrichten braucht. Aber davon mehr später: Wir Männer gehen ja erst mal davon aus, dass wir das ganz alleine schaffen…

2. Schritt: Welche Seiten soll die Suchmaschine durchsuchen?

Die Suchmaschine kann man anweisen, was sie indizieren soll. In meinem Fall
e-byz.ch/*
Damit werden alle Files meines Blogs indiziert und über die eigene Suche auffindbar gemacht.

Da ich den Reiseblog travelmemo.com auf Englisch und reisememo.ch auf Deutsch publiziere, oft aber nicht mehr weiss, welche Destination auf welchem Blog ist, macht hier eine seitenübergreifende Suche viel Sinn!

Beachtet den Stern am Schluss: Dadurch werden alle Daten gefunden. Gibt man den Stern nicht an, kann es sein, dass nur die Homepage, nicht aber darunterliegende Seiten gefunden werden. Ihr ahnt schon, dass ich das eine oder andere aus den Hilfeforen bereits kenne…

Hier auch noch ein Beispiel für die viel bessere Performance der Google-Suche gegenüber der WordPress-Suche: Für den Suchbegriff «Giardino Mountain» findet WordPress gerade mal zwei Einträge.

Google Custom Search dagegen findet nicht nur passende Destinationsseiten sondern auch eine passende Seite auf dem deutschen Reiseblog.

3. Schritt: Indizierung der eigenen Seiten

Indizieren bedeutet, dass Google meine Seiten finden, lesen und sie in ein Google-eigenes Verzeichnis ablegen soll, damit sie schneller gefunden werden können (Google-Index).

Am einfachsten geht dies, indem man Google Webmaster Tools einsetzt (sollte man sowieso schon einsetzen, da sehr praktisch). Dadurch kann man die eigene Sitemap angeben und Google beginnt mit der Indizierung des Blogs oder der Website.

4. Schritt: Verfeinerungen (oder besser Refinements)

«Verfeinerungen» ist jetzt nicht grad die optimale Ãœbersetzung des Navigationsfachbegriffs «Refinements». Hierbei geht es darum, dem Benutzer eine Navigationshilfe zu bieten, indem grosse Themengebiete per Filter oder Kategorien direkt durchsucht werden können.

Für noch nicht sooo grosse Blogs ist das eine Luxusoption. Lassen wir das (zumal ich es nicht geschafft habe, die Filter zu einer Resultatliste zu bewegen…).

5. Schritt: Bevorzugte Suchergebnisse

Mit dieser Funktion lassen sich Inhalte bevorzugt behandeln. Auf meinem Blog könnte dies z.B. die Anleitungen sein für die Erstellung eines Blogs, wenn jemand nach «WordPress» sucht.

Ein Content-Highlighting könnte dann folgendermassen aussehen:

Aber auch dies ist eine Luxusoption, die man bei den ersten Schritten getrost weglassen kann.

Auch die weiteren Optionen «Synonyme» (unter welchem andern Begriff soll etwas auch noch gefunden werden können?) und «Autovervollständigung» (automatisches Ergänzen von angefangenen Suchanfragen) lassen wir vorerst auf der langen Bank.

6. Schritt: Einbinden von Auswertungen in Google Analytics

Damit man auch verfolgen kann, was die Website-Besucher denn so suchen, kann man das eigene Google Analytics Konto einbinden. Die Erkenntnisse aus dem Suchverhalten der Benutzer kann wichtige Hinweise dafür geben, welche Inhalte man anbieten oder besser auffindbar sein sollten.

Damit die Suchmaschine und Google Analytics identifizieren können, dass eine Suche abgesetzt wurde, muss ein sogenannter Suchparameter mitgegeben werden. Dies könnte irgendetwas sein wie z.B. «Suche» oder «Query». Da Software-Entwickler es aber schön kurz mögen, verwendet man für Google standardmässig «q». Die WordPress-Suche verwendet «s».

Für meinen Blog sieht dann eine typische Suche nach «WordPress» so aus:
http://e-byz.ch/suche?q=Wordpress
Die ursprüngliche Suche per WordPress-eigene Search Engine ist
http://e-byz.ch/?s=Wordpress
und liefert ziemlich unbrauchbare Resultate…

Interessanterweise weiss der Google-Browser «Chrome», dass WordPress mit «s=» sucht und bietet dies entsprechend an, wenn man in der Adresszeile eine URL einzugeben beginnt. Per Tab wird die URL übernommen und dann direkt eine WordPress-Suche abgesetzt.

7. Schritt: Aussehen und Verhalten festlegen

So!

Bis hierher ging es um ein paar mehr oder weniger wichtige Konfigurationen. Aber im 7. Schritt geht es ans Eingemachte: Wie sieht die Suchtrefferliste aus und wie verhält sie sich?

Wie obiges Schema veranschaulicht, kann der Suchschlitz und die entsprechende Trefferliste der Suchresultate unterschiedlich angeordnet werden.

In mehreren Blogs und Foren wird die Variante empfohlen mit Suchschlitz auf einer Seite und der Trefferliste auf einer separaten Seite. Dies ist in WordPress einigermassen einfach umzusetzen (wenn man weiss wie). Aber jetzt wissen wir es ja… ;-)

Das grafische Aussehen der einzelnen Komponenten der Suchmaschine können per RGB-Werte oder per Auswahl von Farben in Vorschaufenstern festgelegt werden.

Diese Einstellungen lassen sich speichern und daraus der Code generieren lassen.

Bevor man beginnt, den Code auf der eigenen Website/Blog einzubetten, empfiehlt sich die Vorschau-Funktion: Damit lässt sich die Suche simulieren und man sieht sofort, ob die gewünschten Resultate erscheinen und wie sie aussehen.

Hat man im Menu-Punkt «Verdienen Sie Geld» ein Google AdSense-Konto hinterlegt, so kann man für die Google-Trefferliste Google-Anzeigen ausblenden. Ansonsten blendet Google immer noch eigene Anzeigen von andern Kunden ein, um etwas mitzuverdienen.

In meinem Fall erscheint zuoberst also das zuvor eingestellte bevorzugte Resultat für «WordPress» und danach die weiteren von Google gefundenen Resultate. Diese sind viel treffender als die die von der WordPress-Suche vorgeschlagenen Resultate!

Sieht die Trefferliste also aus wie erwünscht, hat man schon vieles richtig gemacht und kann nun den Code aufrufen, einmal für den Suchschlitz und einmal für die Trefferliste.

Hier gibt man die URL ein der eigenen Suche. Dies kann irgendeine Seite sein, die wir anschliessend in WordPress erstellen werden und unsere Google-Trefferliste enthalten wird. Auch der vorher erwähnte Suchparameter wird hier angegeben, damit der Google-Suchschlitz weiss, wie er die Suche aufrufen soll.

Diese Seite lassen wir vorerst stehen und begeben uns zu WordPress ins CMS.

8. Schritt: Erstellen der Suchtrefferseite in WordPress

Im Menupunkt «Pages» erstellt man eine neue Seite, auf der die Trefferliste erscheinen soll.

Hier gilt es zu beachten, dass die URL der neuen Seite so heisst, wie man das vorher in den Einstellungen der Google Custom Search eingestellt hat.

Die Seite selber bleibt leer, weil der Google-Code über das Template eingebettet wird.

Ãœbrigens: Möchte man nicht, dass diese neue Seite in der Blog-Navigation erscheint, entweder weil die Seite noch nicht fertig ist oder weil es reicht, einen Suchschlitz zu haben und man die Suche nicht auch noch in der Navigation anbieten will, so kann man sie ausblenden, indem man im Aufruf der Navigation (je nach Template im File sidebar.php) die entsprechende ID ausblendet:
<?php wp_list_pages('exclude=3995,4016&title_li='); ?>

Die IDs von Seiten findet man im CMS in deren Adresszeilen als «post=3995». Bei mir sollen z.B. die Seiten mit den IDs 3995 und 4016 nicht in der Navigation erscheinen.

Als nächstes muss diese neue Seite das neue Template «Google-Suche» oder so ähnlich anziehen, in das wir den Google-Code einbetten werden.

Dafür kopiert man am besten ein bestehendes Template-File, z.B. search.php und benennt es um in z.B. googlesuche.php.
Dies geht am einfachsten, indem man das File per FTP-Client (z.B. Filezilla) direkt auf dem Webserver kopiert. Die Template-Files befinden sich meist im Unterordner
/wp-content/themes/der-name-ihres-themes/

Hat man das neue php-File auf dem Server kopiert, so steht es auch in WordPress zur Verfügung unter «Appearance / Editor» und man benötigt den FTP-Client nicht mehr.

Nicht alle WordPress-Themes (Layout-Vorlagen) unterstützen von sich aus Template-Vorlagen für verschiedene Seiten. In so einem Fall muss man in der neu erstellten Datei «googlesuche.php» zuoberst den Templatenamen eingeben, dann wird dies von WordPress als solches erkannt.

<?php /* Template Name: Google Suche */ ?>

Dieses Template passt man jetzt so an, dass es den eigenen Layout-Wünschen entspricht für Titel und Seitennavigation und fügt den von Google generierten Code für die Trefferliste hier ein.
Darunter setzt man noch den gewünschten Footer.

Jetzt geht man zurück zu der vorher erstellten «leeren» Suchseite und gibt ihr die Suche als Template-Vorlage vor. Ansonsten bleibt die Seite leer.

Damit ist die eigene Suchtrefferliste fertig und man kann sie per «Preview» kontrollieren und allenfalls weitere Layoutanpassungen vornehmen. Diese sind am einfachsten auf der Google-Seite zu erfassen, anschliessend kopiert man den generierten Google-Code wieder in die Template-Seite und kann die Neuerungen weiter testen.

9. Schritt: Einfügen des Google Suchschlitzes

Den Suchschlitz kann man im Header (header.php) oder auf der Seite in einem der Widgets einfügen.

Layout-mässig ist zu beachten, dass die Breite des Suchschlitzes von Google auf 100% des verfügbaren Platzes eingestellt ist. Das funktioniert für den Einbau in einer Spalte gut, für den Einbau im breiteren Header oder Footer wird man den Code wahrscheinlich von «width:100%» auf eine fixe Breite von ca. «width:270px» 270 Pixel einstellen wollen.

10. Schritt: Ãœberprüfen der Suchresultate

Such-Software ist ein komplexes Produkt mit sehr vielen Funktionalitäten. Entsprechend kann da das eine oder andere angezeigt werden, das für den User keinen Sinn macht. Deshalb sollte man ein paar typische Suchbegriffe eingeben und die Resultatliste plausibilisieren.

Ich habe beispielsweise nachträglich ein paar URLs aus der Suche ausgeschlossen.

Weitere Anpassungen

Möchte man, dass die Suchresultate nicht in einem neuen Fenster, sondern im gleichen erscheinen, muss man im File googlesuche.php folgende Code-Stelle finden

customSearchControl.setResultSetSize(google.search.Search.FILTERED_CSE_RESULTSET);

und darunter folgende Zeile hinzufügen:

customSearchControl.setLinkTarget(google.search.Search.LINK_TARGET_SELF);

Support

Erstaunlicherweise habe ich online lange nur sehr alte Dokumentationen gefunden, um meine Schwierigkeiten zu umgehen. Den besten und aktuellsten Support fand ich schliesslich bei Google selber in deren Forum für die Google Custom Search.

https://twitter.com/#!/WalterSchaerer/status/171268896010141698