Na tej stronie dowiesz się, jak dostosować wygląd pola wyszukiwania i wyników wyszukiwania. Jeśli chcesz wdrożyć projekt wyszukiwarki za pomocą pliku kontekstu, zapoznaj się ze stroną „Projektowanie wyglądu za pomocą XML”.
- Omówienie
- Projektowanie poszczególnych komponentów interfejsu wyszukiwania
- Hostowanie wyników za pomocą elementu wyszukiwania
- Ustawianie układu elementu wyszukiwania
- Projektowanie pola wyszukiwania
- Projektowanie wyników
- Wdrażanie projektu w witrynie
Przegląd
Zarówno pole wyszukiwania, jak i wyniki wyszukiwania w Wyszukiwarce niestandardowej możesz zmienić w panelu sterowania lub w pliku kontekstu XML. Jeśli masz kilka wyszukiwarek, zarządzanie nimi i dostosowywanie ich za pomocą panelu sterowania jest dość proste. Wystarczy, że przejdziesz na stronę Wygląd, wybierzesz styl, zaprojektujesz komponenty i klikniesz Zapisz. Na tej stronie znajdziesz szczegółowe instrukcje. Jeśli jednak tworzysz i zarządzasz dużą liczbą wyszukiwarek, nawet ta prosta procedura – powtarzana w przypadku wielu wyszukiwarek – staje się uciążliwa. W takich przypadkach lepiej jest pracować z XML-em. Jeśli zdecydujesz się używać XML, najpierw przeczytaj tę stronę, aby poznać ogólne zasady działania. Następnie zapoznaj się ze stroną Projektowanie wyglądu i działania za pomocą XML, aby dowiedzieć się więcej o elementach i atrybutach XML.
Jeśli nie masz pewności, czy używać panelu sterowania, czy formatu XML, zapoznaj się ze stroną Podstawy, na której omawiamy zalety i wady każdego formatu.
Uwaga: zanim zaczniesz projektować wygląd wyszukiwarki niestandardowej, zapoznaj się z wytycznymi dotyczącymi wdrażania Wyszukiwarki niestandardowej . To krótki dokument, który zawiera informacje o tym, jak należy używać marki Google i atrybucji.
Hostowanie wyników za pomocą elementu wyszukiwania
Element wyszukiwania to obiekt, który możesz umieścić na stronie internetowej i który umożliwia szerokie dostosowywanie. Może wyświetlać pole wyszukiwania i wyniki wyszukiwania razem na tej samej stronie internetowej, którą przegląda czytelnik, lub na różnych stronach.
Uwaga: element wyszukiwania w połączeniu z kompaktowym układem dobrze działa na urządzeniach mobilnych.
Możesz też skorzystać z interfejsu Programmable Search Element Control API, aby jeszcze bardziej dostosować interfejs wyszukiwania. Wiele dostosowań jest obsługiwanych przez atrybuty HTML. Możesz na przykład wybrać jeden z 6 układów strony wyników lub ustawić liczbę zwracanych wyników wyszukiwania.
Wyszukiwarka niestandardowa nie obsługuje już opcji hostingu iframe. Zalecamy używanie nowych opcji „Dwie strony” lub „Tylko wyniki” w elemencie wyszukiwania. Więcej informacji znajdziesz w naszym poście na blogu .
Projektowanie poszczególnych komponentów interfejsu wyszukiwania
Komponenty z możliwością dostosowania
Elementy, które możesz dostosować, zależą od wybranego układu elementu wyszukiwarki. Na przykład panel sterowania umożliwia dodanie logo tylko w przypadku wyszukiwarek hostowanych przez Google. Nie możesz dodać logo do wyszukiwarek korzystających z innych opcji hostingu.
Za pomocą panelu sterowania możesz zdefiniować te komponenty:
- Układ elementu wyszukiwania
- Pole wyszukiwania
- Wyniki wyszukiwania
- Karty zawężania
- Promocje
- Logo (tylko na stronach hostowanych przez Google)
Ustawianie układu elementu wyszukiwania
Możesz dostosować układ interfejsu wyszukiwania na stronie. Pole wyszukiwania i sekcję wyników możesz umieścić w tej samej kolumnie lub wyświetlić je w osobnych kolumnach (pole wyszukiwania w jednej, a sekcja wyników w innej) albo nawet na innej stronie.
Dostępne opcje układu (kliknij linki, aby zobaczyć wersje demonstracyjne):
| Opcja | Opis |
|---|---|
| OverLay | Wyświetlaj wyniki wyszukiwania w nakładce. |
|
Dwie strony
Proste Wiele pól wyszukiwania lub sekcji wyników |
Pole wyszukiwania i sekcja wyników wyszukiwania znajdują się na 2 różnych stronach.
Uwaga: sekcja wyników wyszukiwania zawiera też pole wyszukiwania. Użytkownicy mogą przesyłać zapytania bezpośrednio na stronie wyników wyszukiwania. |
| Pełna szerokość | Pole wyszukiwania i sekcja wyników wyszukiwania zajmują całą szerokość strony lub kolumny, w której został umieszczony element Wyszukiwanie. |
| Dwie kolumny | Pole wyszukiwania i sekcja wyników wyszukiwania znajdują się w różnych kolumnach lub sekcjach strony. Aby zamknąć sekcję wyników wyszukiwania, użytkownik klika ikonę X obok pola wyszukiwania. |
| Kompaktowy |
Podobnie jak w przypadku opcji pełnej szerokości, ta opcja zajmuje całą szerokość strony lub kolumny, ale sekcja wyników wyświetla mniej wyników, więc po rozwinięciu na stronie internetowej zajmuje mniej miejsca w pionie.
Wskazówka: ta opcja jest zoptymalizowana pod kątem smartfonów i urządzeń mobilnych. |
|
Tylko wyniki
Wyszukiwanie za pomocą adresu URL Wyszukiwanie za pomocą pola wyszukiwania |
Wyniki wyszukiwania są umieszczane na jednej z Twoich stron internetowych, a strona wyników wyszukiwania nie zawiera pola wyszukiwania. Użyj własnego pola wyszukiwania, aby przesłać zapytanie.
Uwaga: w przypadku Wyszukiwarki niestandardowej, która nie wyświetla reklam, nie ma możliwości wyłączenia brandingu. |
|
Hosting Google
Bieżące okno Nowe okno |
Pole wyszukiwania jest umieszczone na jednej z Twoich stron. Wyniki wyszukiwania są wyświetlane na stronie hostowanej przez Google, którą można otworzyć w tym samym lub nowym oknie. |
Projektowanie pola wyszukiwania
Pole wyszukiwania możesz wstawić w dowolnym miejscu w treści HTML strony, chociaż zwykle umieszcza się je u góry strony (lub blisko góry), jak w tym przykładzie:
Ilustracja 1. Strona internetowa z polem wyszukiwania u góry.
Włączanie autouzupełniania
Autouzupełnianie oferuje użytkownikom opcje zapytań podczas wpisywania wyszukiwanych haseł w polu wyszukiwania. Jest to podobne do opcjonalnych zapytań, które widzisz w wyszukiwarce Google.
Ilustracja 2. Wpisanie w polu wyszukiwania kilku znaków powoduje wyświetlenie listy rozwijanej z opcjami różnych zapytań.
Wyszukiwarka niestandardowa dostosowuje autouzupełnianie do Twojej wyszukiwarki. Korzysta on z innego algorytmu, który czerpie informacje z różnych źródeł, w tym z zapytań do Twojej wyszukiwarki, a także ze słów kluczowych i fraz wyodrębnionych z treści witryn, które obejmuje Twoja wyszukiwarka.
Funkcja autouzupełniania znajduje się w sekcji Autouzupełnianie na stronie Funkcje wyszukiwania.
Aby włączyć automatyczne uzupełnianie:
- Otwórz sekcję Autouzupełnianie na stronie Funkcje wyszukiwania.
-
Włącz opcję Włącz autouzupełnianie.
Uwaga: ponieważ zapytania autouzupełniania są generowane dla każdej wyszukiwarki, zanim zaczną się w niej pojawiać, może minąć kilka godzin.
- Jeśli po raz pierwszy włączasz autouzupełnianie w istniejącej wyszukiwarce, musisz usunąć fragment kodu pola wyszukiwania, który został wstawiony na stronie. Zastąp go nowym kodem wygenerowanym na karcie Uzyskaj kod. Szczegółowe instrukcje znajdziesz w sekcji Wdrażanie projektu w witrynie.
Projektowanie wyników
Możesz zmienić te elementy strony wyników:
- Wyniki poszczególnych osób
- typ czcionki,
- Kolory tekstu
- Karty zawężania
- Promocje
- Logo (tylko na stronach hostowanych przez Google)
Wyniki indywidualne
Jeśli chcesz wizualnie oddzielić poszczególne wyniki lub wyróżnić te, które są wybierane przez użytkowników, możesz zdefiniować obramowania i tło poszczególnych wyników.
Ilustracja 3. Wyniki z wyodrębnionymi poszczególnymi wynikami i wynik podświetlony po najechaniu na niego kursorem myszy.
Karty zawężenia
Jeśli w wyszukiwarce masz utworzone etykiety zawężające, pojawią się one jako karty w elemencie wyszukiwania. Za pomocą panelu sterowania możesz zmieniać kolory kart zawężania.
Promocje
Jeśli w wyszukiwarce masz utworzone promocje, możesz zmienić ich wygląd. Wyniki promowane to specjalny rodzaj wyników wyszukiwania, które możesz utworzyć.
Logo (tylko hostowane przez Google)
Jeśli zezwalasz Google na hostowanie strony wyników, możesz umieścić logo lub mały obraz obok pola wyszukiwania na stronie wyników wyszukiwania. Obraz musi być plikiem JPG, PNG lub GIF hostowanym na stronie internetowej (Twojej lub innej, która nie ma ograniczeń wynikających z praw autorskich). Możesz powiązać adres URL z obrazem, aby przekształcić go w obraz, który można kliknąć.
Poniżej znajdziesz przykład strony wyników z logo.
Rysunek 4. Pole wyszukiwania z obrazem
Wdrażanie projektu w witrynie
Po zaprojektowaniu wyglądu wyszukiwarki możesz zaimplementować ją na stronie, wykonując te czynności:
- W sekcjach, które zostały zmodyfikowane na stronie Wygląd, kliknij Zapisz.
- W sekcji Układ na stronie Wygląd kliknij Pobierz kod.
-
Skopiuj fragment kodu wygenerowany w wyskakującym okienku Kod.
Jeśli wybrano układ dwukolumnowy, skopiuj 2 fragmenty kodu: jeden dla pola wyszukiwania, a drugi dla wyników.
Jeśli wybrano układ dwustronicowy, wpisz adres URL strony, na której będą wyświetlane wyniki wyszukiwarki. Wpisz nazwę parametru zapytania osadzonego w adresie URL, który jest analizowany przez stronę wyników wyszukiwania. Na koniec skopiuj oba fragmenty kodu.
Fragment kodu dla układu tylko z wynikami jest przeznaczony do sytuacji, w której wyniki wyszukiwania są wyświetlane na nowej stronie. Wpisz nazwę parametru zapytania osadzonego w adresie URL, który jest analizowany przez stronę wyników wyszukiwania. Na koniec skopiuj fragment kodu wyników wyszukiwania.
-
Umieść kod na każdej stronie, na której chcesz wyświetlać pole Wyszukiwarki niestandardowej. Kod możesz wkleić w dowolnym miejscu w obrębie tagu
<body></body>na stronie.Uwaga: aby zapewnić jak największą zgodność z przeglądarkami, zalecamy, aby strony HTML używały obsługiwanego typu dokumentu, np.
<!DOCTYPE html>.Jeśli w przypadku elementu wyszukiwania używasz efektów najechania kursorem, strona HTML musi używać obsługiwanego typu dokumentu, np.
<!DOCTYPE html>.
Jeśli wybrano układ dwukolumnowy, wstaw kod pola wyszukiwania w jednej kolumnie, a kod wyników w drugiej.
Jeśli wybrano układ dwustronicowy, wstaw kod pola wyszukiwania na stronę, na której ma się ono wyświetlać, a kod wyników – na stronę, na której mają się one wyświetlać.
Jeśli wybrano układ tylko z wynikami, wstaw fragment kodu na stronie internetowej, w której mają się wyświetlać wyniki wyszukiwania.