In Komponenten der Benutzeroberfläche suchen

Auf dieser Seite wird erläutert, wie Sie das Erscheinungsbild Ihres Suchfelds und Ihrer Suchergebnisse anpassen können. Wenn Sie das Design Ihrer Suchmaschine mithilfe der Kontextdatei implementieren möchten, lesen Sie den Hilfeartikel Design mit XML.

1. Übersicht
2. Einzelne Komponenten der Such-UI gestalten
3. Ergebnisse mit dem Suchelement hosten
4. Layout des Suchelements festlegen
5. Suchfeld gestalten
6. Ergebnisse gestalten
7. Design auf Ihrer Website implementieren

Übersicht

Sie können sowohl das Suchfeld als auch die Suchergebnisse Ihrer Programmable Search Engine entweder im Steuerfeld oder in der XML-Kontextdatei ändern. Wenn Sie nur wenige Suchmaschinen haben, ist die Verwaltung und Anpassung über das Steuerfeld relativ einfach. Rufen Sie einfach die Seite Erscheinungsbild auf, wählen Sie einen Stil aus, gestalten Sie die Komponenten, klicken Sie auf Speichern und schon sind Sie fertig. Auf dieser Seite erfahren Sie, wie Sie das alles machen. Wenn Sie jedoch eine große Anzahl von Suchmaschinen erstellen und verwalten, wird selbst dieses einfache Verfahren, wenn es für mehrere Suchmaschinen wiederholt wird, mühsam. In solchen Fällen ist es besser, mit XML zu arbeiten. Wenn Sie sich für XML entscheiden, sollten Sie zuerst diese Seite lesen, um sich einen Überblick über die Funktionsweise zu verschaffen. Anschließend können Sie auf der Seite Look and Feel mit XML gestalten mehr über die XML-Elemente und ‑Attribute erfahren.

Wenn Sie sich nicht sicher sind, ob Sie nur das Steuerfeld oder das XML-Format verwenden sollten, lesen Sie die Seite Grundlagen. Dort werden die Vorteile und Nachteile der einzelnen Formate erläutert.

Hinweis:Bevor Sie mit der Gestaltung Ihrer benutzerdefinierten Suchmaschine beginnen, lesen Sie die Richtlinien für die Implementierung der Programmable Search Engine . Es ist ein kurzes Dokument, in dem beschrieben wird, wie Sie mit dem Google-Branding und der Quellenangabe umgehen sollten.

Nach oben

Ergebnisse mit dem Suchelement hosten

Ein Suchelement ist ein Objekt, das Sie in Ihre Webseite einbetten können und das sich umfassend anpassen lässt. Das Suchfeld und die Suchergebnisse können entweder zusammen auf derselben Webseite, die der Leser gerade aufruft, oder auf verschiedenen Webseiten angezeigt werden.

Hinweis:Das Suchelement in Kombination mit einem kompakten Layout funktioniert gut auf Mobilgeräten.

Sie können auch die Programmable Search Element Control API verwenden, um die Such-UI weiter anzupassen. Viele Anpassungen werden über HTML-Attribute unterstützt. Sie können beispielsweise aus sechs Layouts für die Ergebnisseite auswählen oder die Anzahl der zurückzugebenden Suchergebnisse festlegen.

Die Programmable Search Engine unterstützt die Iframe-Hostingoption nicht mehr. Wir empfehlen die neuen Layouts „Zwei Seiten“ oder „Nur Ergebnisse“ für das Suchelement. Weitere Informationen finden Sie in unserem Blogpost.

Nach oben

Einzelne Komponenten der Such-UI gestalten

Anpassbare Komponenten

Welche Komponenten Sie anpassen können, hängt vom ausgewählten Elementlayout Ihrer Suchmaschine ab. So können Sie beispielsweise über das Steuerfeld nur für von Google gehostete Suchmaschinen ein Logo hinzufügen. Bei Suchmaschinen mit anderen Hostingoptionen ist das nicht möglich.

Über das Steuerfeld können Sie die folgenden Komponenten definieren:

• Layout des Suchelements
• Das Suchfeld
• Die Suchergebnisse
• Die Tabs für die Verfeinerung
• Die Angebote
• Das Logo (nur von Google gehostet)

Layout des Suchelements festlegen

Sie können anpassen, wie die Suchoberfläche auf der Webseite angeordnet wird. Sie können das Suchfeld und den Ergebnisbereich in derselben Spalte platzieren oder in separaten Spalten anzeigen lassen. Das Suchfeld kann in einer Spalte und der Ergebnisbereich in einer anderen Spalte oder sogar auf einer anderen Seite angezeigt werden.

Das sind die Optionen (klicken Sie auf die Links, um Demos zu sehen):

Option	Beschreibung
OverLay	Suchergebnisse werden in einem Overlay angezeigt.
Zwei Seiten Einfach Mehrere Suchfelder/Ergebnisbereiche	Das Suchfeld und der Bereich mit den Suchergebnissen befinden sich auf zwei verschiedenen Webseiten. Hinweis: Der Bereich mit den Suchergebnissen enthält auch ein Suchfeld. Nutzer können Anfragen direkt auf der Suchergebnisseite eingeben.
Über die volle Breite	Das Suchfeld und der Bereich mit den Suchergebnissen nehmen die gesamte Breite der Seite oder der Spalte ein, in die Sie das Suchelement eingefügt haben.
Zwei Spalten	Das Suchfeld und der Bereich mit den Suchergebnissen befinden sich in verschiedenen Spalten oder Abschnitten Ihrer Webseite. Wenn der Nutzer den Bereich mit den Suchergebnissen schließen möchte, klickt er neben dem Suchfeld auf das X-Symbol.
Kompakt	Wie bei der Option „Breite“ wird die gesamte Breite der Seite oder Spalte genutzt. Im Ergebnisbereich werden jedoch weniger Ergebnisse angezeigt, sodass weniger vertikaler Platz benötigt wird, wenn er auf der Webseite maximiert wird. Tipp:Diese Option ist für Smartphones und Mobilgeräte optimiert.
Nur Ergebnisse Suche über URL Suche über das Suchfeld	Die Suchergebnisse werden auf einer Ihrer Webseiten platziert und die Suchergebnisseite enthält kein Suchfeld. Verwenden Sie Ihr eigenes Suchfeld, um die Suchanfrage zu senden. Hinweis: Bei einer Programmable Search Engine, in der keine Anzeigen ausgeliefert werden, gibt es keine Option zum Deaktivieren des Brandings. Demo: Branding-Optionen anpassen
Von Google gehostet Aktuelles Fenster Neues Fenster	Das Suchfeld befindet sich auf einer Ihrer Webseiten. Die Suchergebnisse werden auf einer von Google gehosteten Webseite angezeigt, die entweder im selben oder in einem neuen Fenster geöffnet werden kann.

Nach oben

Suchfeld gestalten

Sie können das Suchfeld an einer beliebigen Stelle im HTML-Body Ihrer Webseite einfügen. Üblicherweise werden Suchfelder jedoch oben oder in der Nähe des oberen Rands von Webseiten platziert, wie im folgenden Beispiel:

Abbildung 1:Webseite mit dem Suchfeld oben.

Automatische Vervollständigung aktivieren

Die automatische Vervollständigung bietet Ihren Nutzern Suchanfrageoptionen, während sie ihre Suchanfragen in Ihr Suchfeld eingeben. Sie ähneln den optionalen Suchanfragen, die in der Google Suche angezeigt werden.

Abbildung 2:Wenn Sie nur wenige Zeichen in das Suchfeld eingeben, wird eine Drop-down-Liste mit Optionen für verschiedene Suchanfragen angezeigt.

Bei der Programmable Search Engine wird die automatische Vervollständigung speziell auf Ihre Suchmaschine zugeschnitten. Dabei wird ein anderer Algorithmus verwendet, der auf mehreren Quellen basiert, darunter Anfragen an Ihre Suchmaschine sowie Keywords und Wortgruppen, die aus den Inhalten von Websites extrahiert werden, die von Ihrer Suchmaschine abgedeckt werden.

Die Funktion für die automatische Vervollständigung befindet sich auf der Seite „Suchfunktionen“ im Bereich Automatische Vervollständigung.

So aktivieren Sie die automatische Vervollständigung:

1. Rufen Sie auf der Seite „Suchfunktionen“ den Abschnitt Automatische Vervollständigung auf.
2. Aktivieren Sie das Steuerelement Automatische Vervollständigung aktivieren.

   Hinweis:Da die automatisch vervollständigten Suchanfragen für jede Suchmaschine generiert werden, dauert es einige Stunden, bis die automatische Vervollständigung in Ihrer Suchmaschine angezeigt wird.

3. Wenn Sie die automatische Vervollständigung in einer bestehenden Suchmaschine zum ersten Mal aktivieren, müssen Sie das Code-Snippet für das Suchfeld entfernen, das Sie auf Ihrer Webseite eingefügt haben. Ersetzen Sie ihn durch den neuen, der auf dem Tab „Code abrufen“ generiert wurde. Eine ausführlichere Anleitung finden Sie im Abschnitt Design auf Ihrer Website implementieren.

Nach oben

Ergebnisse gestalten

Sie können die folgenden Komponenten der Ergebnisseite ändern:

• Die einzelnen Ergebnisse
• Die Schriftart
• Die Textfarben
• Die Tabs für die Verfeinerung
• Die Angebote
• Das Logo (nur von Google gehostet)

Die individuellen Ergebnisse

Wenn Sie einzelne Ergebnisse visuell abgrenzen oder von Nutzern ausgewählte Ergebnisse hervorheben möchten, können Sie die Rahmen und den Hintergrund für einzelne Ergebnisse definieren.

Abbildung 3:Ergebnisse mit abgegrenzten einzelnen Ergebnissen und einem einzelnen Ergebnis, das beim Bewegen des Mauszeigers hervorgehoben wird.

Nach oben

Die Tabs für die Präzisierung

Wenn Sie in Ihrer Suchmaschine Suchfilter-Labels erstellt haben, werden die Labels als Tabs im Suchelement angezeigt. Über die Steuerleiste können Sie die Farben der Tabs für die Verfeinerung ändern.

Werbung

Wenn Sie in Ihrer Suchmaschine Angebote erstellt haben, können Sie deren Design ändern. Bevorzugte Suchergebnisse sind eine spezielle Art von Suchergebnissen, die Sie erstellen.

Das Logo (nur von Google gehostet)

Wenn Sie die Ergebnisseite von Google hosten lassen, können Sie ein Logo oder ein kleines Bild direkt neben dem Suchfeld auf der Suchergebnisseite einfügen. Das Bild muss eine JPG-, PNG- oder GIF-Datei sein, die auf einer Website gehostet wird (Ihrer eigenen oder einer Website ohne Urheberrechtsbeschränkungen). Sie können dem Bild eine URL zuweisen, um es in ein anklickbares Bild zu verwandeln.

Hier ein Beispiel für eine Ergebnisseite mit einem Logo.

Abbildung 4:Suchfeld mit einem Bild

Nach oben

Design auf Ihrer Website implementieren

Nachdem Sie das Erscheinungsbild Ihrer Suchmaschine gestaltet haben, können Sie sie folgendermaßen in Ihre Webseite einbinden:

1. Klicken Sie auf der Seite Darstellung und Design in den geänderten Abschnitten auf Speichern.
2. Klicken Sie auf der Seite Aussehen und Verhalten im Abschnitt „Layout“ auf Code abrufen.
3. Kopieren Sie das im Pop-up-Fenster Code generierte Code-Snippet.

   Wenn Sie das Layout mit zwei Spalten ausgewählt haben, kopieren Sie zwei Code-Snippets: eines für das Suchfeld und das andere für die Ergebnisse.
   Wenn Sie das zweiseitige Layout ausgewählt haben, geben Sie die URL der Webseite ein, auf der die Ergebnisse für Ihre Suchmaschine angezeigt werden sollen. Geben Sie den Namen des Suchparameters ein, der in die URL eingebettet ist, die auf der Suchergebnisseite geparst wird. Kopieren Sie schließlich die beiden Code-Snippets.
   Das Code-Snippet für das Layout „Nur Ergebnisse“ ist für den Fall vorgesehen, dass Suchergebnisse auf einer neuen Seite angezeigt werden. Geben Sie den Namen des Suchparameters ein, der in die URL eingebettet ist, die auf der Suchergebnisseite geparst wird. Kopieren Sie zum Schluss das Code-Snippet für die Suchergebnisse.
   

4. Fügen Sie den Code auf jeder Seite ein, auf der ein Programmable Search Engine-Feld angezeigt werden soll. Sie können den Code an einer beliebigen Stelle innerhalb des <body></body>-Tags Ihrer Webseite einfügen.

   Hinweis:Für optimale Kompatibilität mit verschiedenen Browsern sollten Sie für Ihre HTML-Seiten einen unterstützten Dokumenttyp wie <!DOCTYPE html> verwenden.

   Wenn Sie Hover-Effekte für Ihr Suchelement verwenden, müssen Sie für Ihre HTML-Seite einen unterstützten Dokumenttyp wie <!DOCTYPE html> verwenden.
   Wenn Sie das Layout mit zwei Spalten ausgewählt haben, fügen Sie den Code für das Suchfeld in eine Spalte und den Code für die Ergebnisse in eine andere Spalte ein.
   Wenn Sie das zweiseitige Layout ausgewählt haben, fügen Sie den Code für das Suchfeld auf der Webseite ein, auf der das Suchfeld angezeigt werden soll, und den Code für die Ergebnisse auf der Webseite, auf der die Suchergebnisse angezeigt werden sollen.
   Wenn Sie das Layout „Nur Ergebnisse“ ausgewählt haben, fügen Sie das Code-Snippet auf der Webseite ein, auf der die Suchergebnisse angezeigt werden sollen.