Here are three methods of adding a Google search engine to your website. Two versions are homemade and one version uses a Google script. One is a general web search and two are site searches, which will allow users to search your website.

Simple Google Search (Homemade)

Google does a search by using a search URL that looks like this:

https://www.google.com/search?q=cars

When you do a search for, let’s say cars, you might see the resulting URL that is much longer with a string of characters, which I have no idea what they mean.  The good news is, you can delete everything except what is shown above.  Try it yourself. Do the same search with the shorter URL and you will see the same results.

To break this down, Google uses the first part of the URL to go to its own search engine (https://www.google.com/search). Next the “?” tells Google a search is coming next. Lastly, the “q=cars” means the query term is cars. We can leverage these facts to create our own Google search form.

Start by adding a form element to your page. The form will have at minimum the following two attributes, although you can also add other attributes such as target or class as you wish.
⇒ action=”https://www.google.com/search”
⇒ method=”get”

Within your form also add two inputs. One will accept the search term and the other will act as the button. Add attributes as follows.
1^st input: name=”q”, type=”text”
2^nd input: type=”submit” value=”Search”

Your HTML will look like this:

<form action="https://www.google.com/search" method="get">
     <input name="q" type="text" />
     <input type="submit" value="Search" />
</form>

Your results will look something like this:

Simple Google Site Search (Homemade)

Here is another simple form that allows users to do a Google search of your website. The details are almost the same, so I won’t elaborate much. One added input tells Google it is a “sitesearch” with a “value” of your (or any) website domain name. This element is also hidden from end users. Again, you can add classes and other attributes as desired. For this one I added a “placeholder” which shows where the search is going.

Here is the HTML:

<form action="https://www.google.com/search" method="get">
<input name="sitesearch" type="hidden" value="krobbins.com" />
<input name="q" placeholder="Search in krobbins.com" type="text" />
<input type="submit" value="Search" />
</form>

Results:

Google Site Search – Google Script

Here is a method of using Google’s Custom Search Engine. You will need to login with a Google account to use this service. You will then be able to create multiple CSE’s and save them. A great way to add a quick search engine without writing a lot of code. One drawback is difficulty in adding your own style classes. But Google CSE does include some color customization.

1. Go to: https://cse.google.com/cse/
2. Login with a Google account or create a new one.
3. Click New search engine in the upper left corner.
4. Add the website URL and give the CSE a name.
5. Click Create.

Once your CSE is created, its name will appear on the left menu with any others you have created. Below the CSE name, click on Look and feel and then click on the Customize tab in the main pane.  Here you can customize several items like fonts and colors. When finished customizing, click Save & Get Code. Copy the JavaScript from the window and paste it into your HTML where ever you want the CSE to appear.

If you are using WordPress, one consideration is that WordPress already has a great site search function and is a little more complicated to incorporate into the PHP. But, if you want to replace it or add a Google CSE, you can. Here is one of many articles on that subject from www.wpbeginner.com.

Another drawback is that even though the search is for your own website, the first result is a paid AD. All Google searches have that going for them.  That’s why they make the big bucks.

Here’s a Google CSE I made that links to a regular HTML page outside of WordPress. If it does not find results from the target site, it will return a few paid results. The results open in a modal window that remains until you close it.

My Google CSE

Thanks for reading my blog.  Please leave a comment here or on the main website.