Google Custom Search in WordPress-Blog integrieren

5

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.

Startseite für eine eigene Google-Suchmaschine

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.

Konfiguration einer eigenen Google-Suchmaschine per User-Interface

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.

URLs angeben, die von Google CSE durchsucht werden sollen

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.

Wordpress Suche nach Giardino Mountain auf travelmemo.com

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

Suche nach "Giardino Mountain" per Google Custom Search auf travelmemo.com

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:

Bevorzugte Suchergebnisse in Google's Custom Search Engine

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.

Google Analytics für Google Custom Search und den Suchparameter q

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.

Blog durchsuchen durch Eingabe der URL und Tab in Google's Chrome Browser

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?

Anpassbares Verhalten der Google benutzerdefinierten Suche

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.

Aussehen der Google-Suche festlegen

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.

Vorschau der eingestellten Suchparameter

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.

Code der Google Custom-Search für den Suchschlitz und die Trefferliste SERP

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.

In WordPress eine neue Seite erstellen für die Trefferliste der Google Custom Search

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/

Ordnerstruktur im WordPress-Ordner auf dem Webserver

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.

Google Custom-Search Code in WordPress php Template-Vorlage einfügen

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.

Auswahl des Seiten-Templates in WordPress

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.

Web-Adressen, die aus der Google-Suche auszuschliessen sind

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.

 

Share.

About Author

Walter Schärer bloggt über neuste Internet-Trends im Online Marketing, Social Media, Blogs, Web Analytics, SEO, Mobile und so.

5 Kommentare

  1. Das sieht sehr kompliziert aus, aber mit der Anleitung ist es zu schaffen, denke ich!
    Ich werde es am WE ausprobieren, dann gibt es Feddback

  2. Ich habe es zuerst wie beschrieben versucht, jedoch bekam ich es einfach nicht hin. Nun habe ich einfach eine Seite mit den Namen „Blog-Suche“ erstellt und die Code-Schnipsel von Onkel Google dort eingefügt. Zumindest vorerst. Ãœbrigens eine sehr informative Seite habt ihr hier.
    Gruß
    Tino

Leave A Reply