Inhaltsverzeichnis
In diesem Tutorial werfen wir einen genaueren Blick auf Google Custom Search Engine als Möglichkeit, eine Suchfunktion auf Ihrer statischen Website zu implementieren.
Zu diesem Zweck habe ich eine einfache WordPress-Website erstellt, die auf der Demo von Simply Static Pro basiert.
Simply Static wird automatisch vorinstalliert und für Sie konfiguriert, sodass Sie die nächsten Schritte nahtlos nachvollziehen können.
Was ist Google CSE?
Google bietet einen Dienst namens Google Custom Search Engine an, der eine anpassbare Suche auf Ihrer Website ermöglicht und dabei auf bei Google indexierten Ergebnissen basiert.
Die Nutzung der Suche ist kostenlos, solange Sie die Anzeige von Google-Ads-Ergebnissen nicht deaktivieren möchten. Wenn Sie nur Ergebnisse von Ihrer eigenen Website ohne Werbung anzeigen möchten, müssen Sie 5 $ pro 1.000 Anfragen bezahlen.
Wie richtet man Google CSE ein?
Besuchen Sie die Google-CSE-Startseite hier und melden Sie sich mit Ihrem Google-Konto an. Sie gelangen zu Ihrem CSE-Dashboard, in dem Sie eine neue Suchmaschine erstellen können.
Sie müssen einen Namen vergeben, der nur intern verwendet wird. Außerdem müssen Sie die Quelle festlegen (dies sollte die URL Ihrer statischen Website sein, nicht die Ihrer WordPress-Website). Lösen Sie das reCAPTCHA und klicken Sie auf Create.
Sie werden zur Projektübersicht weitergeleitet. Hier können Sie zahlreiche Details konfigurieren, worauf wir gleich noch eingehen werden. Kopieren und speichern Sie zunächst die Search Engine ID, da wir sie im nächsten Schritt benötigen.
Google CSE in WordPress
Die Grundlagen im Google-CSE-Dashboard sind erledigt. Bereiten wir nun die Suche in WordPress vor. Es gibt ein hervorragendes kostenloses Plugin namens WP Google Search, das Sie direkt aus Ihrer WordPress-Installation heraus installieren können.
Gehen Sie nach der Installation zu Settings -> WP Google Search und fügen Sie Ihre Search Engine ID hinzu:
Ich empfehle außerdem, die Option Support Overlay Display zu aktivieren, da dadurch verhindert wird, dass Benutzer zur Suchergebnisseite in WordPress (und nicht auf der statischen Website) weitergeleitet werden.
Ich habe v3 CSS (Use default corrections CSS v3) verwendet, da es am besten zum Stil meines Themes passte, aber das bleibt ganz Ihnen überlassen.
Das war es schon mit der Konfiguration des Plugins. Nun können wir das Suchfeld zu unserer Website hinzufügen.
Das Suchfeld in WordPress anzeigen
Um das Google-CSE-Suchfeld auf Ihrer Website auszugeben, müssen Sie den Shortcode [wp_google_searchbox] in die gewünschte Seite bzw. den gewünschten Beitrag einfügen. Anschließend wird das Suchfeld für Sie dargestellt:
WordPress in eine statische Website umwandeln
Nun können wir das kostenlose Simply-Static-Plugin verwenden, um eine statisch umgewandelte Version unserer WordPress-Website als ZIP-Datei zu erhalten.
Unter Simply Static -> Settings -> Deployment habe ich Folgendes konfiguriert:
Wechseln Sie anschließend zu Simply Static -> Generate und klicken Sie auf die Schaltfläche „Generate Static Files“. Sobald der Vorgang abgeschlossen ist, können Sie die ZIP-Datei über den bereitgestellten Link herunterladen:
Die statische Website bereitstellen
Bei der Bereitstellung Ihrer statischen Website stehen Ihnen zahlreiche verschiedene Optionen zur Verfügung. Um die Sache einfach zu halten, habe ich den Drag & Drop uploader von Netlify verwendet, um meine Website schnell bereitzustellen:
Wir sind jetzt online! Großartig – allerdings werden Sie feststellen, dass das Suchfeld bei einer neuen Website nicht sofort Ergebnisse liefert:
Das liegt daran, dass unsere Test-Website derzeit nicht indexiert ist. Wenn es sich um eine bereits bestehende Website handelt, wird es problemlos funktionieren. Wenn du deine statische Website jedoch gerade zum ersten Mal bereitgestellt hast, wird es ein paar Tage dauern, bis Google deine Website indexiert und die Ergebnisse hier anzeigt.
Zusammenfassung
Wie du gesehen hast, ist das Hinzufügen einer Suchfunktion mit Google CSE zu deiner statischen Website ziemlich unkompliziert, bringt aber einige Nachteile mit sich:
- Du wirst Anzeigen sehen, solange du nicht den Premium-API-Tarif verwendest
- Das Suchfeld lässt sich im Vergleich zu anderen Lösungen nicht besonders gut anpassen
- Du möchtest diese Daten möglicherweise nicht mit Google teilen
Wenn du nach anderen Suchintegrationen suchst, sieh dir bitte meinen Überblicksleitfaden an.
Erwähnenswert ist außerdem, dass Simply Static Pro auch eine sofort einsatzbereite Implementierung von Fuse.js und Algolia bereitstellt, um die Suche auf deiner statischen Website zu ermöglichen.