Websites should offer the best possible user experience for visitors. In this case, the website should allow visitors to find what they're looking for without frustration. The easiest way to frustrate visitor who is using site search is not to serve the relevant results or to serve relevant results lower in the search results page. Visitors will need to browse the long list of irrelevant results and try to find relevant results themselves. It's actually OK to show as many results as possible, but the most relevant results must be on top!

This is not easy because computers are not human beings and they can't guess what visitor is looking for just like that. For example, if somebody is trying to find template for Kindergarten on our site, it would be easy because our site contains only one page that contains the keyword "kindergarten". But, if somebody's trying to find how to change template on existing Joomla site populated with content, that wouldn't be so easy. No matter what keyword or keywords s/he enters, the list of results will be long because so many pages are using words like "joomla", "existing", "site", and so on. This is where artificial intelligence starts and this is where it's really hard to guess what the visitor is really searching for.

Having an in-site search is recommended for all webmasters who are trying to increase the user experience of their websites. However, both Joomla nor WordPress don't have such strong search algorithms. And it's not the case just with these CMS platforms... How many times did you fail to try to find a great App from Apple Store using their search system with commonly used keywords? There are many other examples.

The company that has the strongest top-secret search algorithm is, you guess, Google! This search algorithm converted a small company to a global scale giant. It sounds weird, but Google will search your website better than you, or than CMS you are using. It will (almost) always put the most relevant search results on the top of the search page. Amazingly, Google (almost) always can "guess" what your visitors are searching for. Therefore, using Google for searching in-site is the best possible way to get relevant search results.

Joomla's and WordPress's core search algorithms will never beat Google in the relevance of search results. However, we can integrate Google's search engine into our Joomla or WordPress sites and use Google's search algorithm rather than using our CMS's search component. However, it has a price. Google will show search results that lead only to your site's pages, but besides that, it will also show ads that could lead to other websites. If you have an AdSense account, you can gain some money when somebody clicks these links. But you could also lose potential customers if you are running an e-commerce site! The ads can't be disabled! Google allows disabling of these ads only for non-profit organizations. However, the ads are not always between search results mostly because some keywords are not interesting to advertisers.

Create Google Custom Search For Your Site

The first step is to visit Google Custom Search and create a new search engine. You can add your entire site by entering "*". After that, you would see the option to get the code, as well as a new link to your site's search engine the engine's control panel where you can change settings. Click the "Get The Code" button and you will get a code snippet. You can integrate this code, but it will show the search form and the results in the same place, actually in the same DIV container. Therefore, if you publish this into a Joomla module position or a WordPress widget position, you'll have problems with the layout.

google search create new search engine
google search create new search engine done

Therefore, we suggest you go to Edit Search Engine > Look and Feel in order to tweak your search engine a little bit. On this page, there are several options for your search engine's layout. One is very interesting for CMS - Overlay. This option allows you to publish the search form anywhere (including module and widget positions), but to show search results in a pop-up overlay window, which is responsive by the way. So, the search form (search field and button) will go anywhere you like, but when someone types the keyword and click the Search button, the results will be shown in the overlay pane. You just need to select Overlay and click Save and Get Code button.

tweak google in-site search engine
get the code for in-site search

Integrate Google Search With Joomla

First, you should disable HTML filtering is Joomla. If you don't do that, the code snippet from Google could be filtered out by Joomla's editor. Also, it's recommended to disable the WYSIWYG editor from the Global Configuration of Joomla.

Now, go to Extensions > Module Manager and click New. Select "Custom HTML" for module type to create a new HTML module. Select the appropriate module position for the search form according to the module positions chart of your Joomla template. You can decide for yourself whether will you publish the module name or not and what pages the search module will be published on (it's recommended to publish it on all pages). Finally, paste the code from Google that you got in the previous step. Save the module and you are done! It's also possible to paste the code inside the article's content. This will publish the search form in the article's body.

Integrate Google Search With WordPress

If you paste the code that you got from Google into the post's or the page's body, the search form will be published as a part of your post or page. You should use the Text tab (not the Visual tab) of your editor when you paste code for search. However, it's probably not what you needed. On most occasions, you need to publish the search form as an integral part of your WordPress site which is present on all pages. In this case, you can use widgets. Go to Appearance > Widgets and select the widget position where you will put the search form, according to the widget positions chart of your theme. Open this widget position and drop the Text widget (from the tab of "Available Widgets") in it. Now, open the Text widget and paste the code from Google into it. You can enter Title, but this is optional.

Styling The Search Form And Testing

It's possible to style the search form. You can use Google Chrome Inspector or Firebug to inspect the search form that appears on your site now. You will see that all form elements contain classes. You can add your own styling for these classes in your template's CSS file. It's possible to define the element's size, colors, font, etc.

Let's test this! With Google Search on our site, when someone submits "change existing", the page that explains how to change the template of the existing site appears at the top of search results. Very smart! However, when we enter the same keywords in the Joomla Search component, the most relevant page will not be even between the first 20. Very odd! Luckily, integration of Google search is not though, as you could see.

testing google in-site search