Using Google Custom Search Engine on personal site is something you also should thing about. It not just gives you the power of Google search algorithm but you can also increase your earnings by showing ads in search results. Google shares 51% of the revenue generated from ads on search result with the publisher. So it may and does increase earnings of the publisher.
Here you will learn how to create and use Google Custom Search on websites.
Basic Search Engine
Step 1. Go to Google Custom Search and click Create a Custom Search Engine.
Step 2. It will ask you to login. After you are logged-in you will see this page. Configure it as the image below.
Step 3. Once you click the next button you can have a live preview of your search engine. Test it and customize it and click next.
Step 4. After that you will see the following page with your Custom Search element code. You can either copy-paste this code on your desire web page or for more options click Look and Feel.
You can just copy and paste the Custom Search element code in any HTML page and Google will display a search box to search. If any search query is entered into the box then it will show the results within itself. It doesn’t matter where you uploaded the HTML page, it may be in a domain that is not in the list of Sites to Search (no 2 in list below) or on your localhost but it will work and fetch the results from Google for the sites you listed in Sites to Search in step 2.
Advance features of Google Custom Search
If you proceed further you will see the following page with lots of advance options. Continue to explore.
On the left hand side you will see these following options.
- Basics: Here you can edit the search engine name, add description and keywords. Keywords are used by Google to know your content or subject. I still didn’t find any different result with or without keyword on my single site search.Here you can also change your search engine’s language, translation and encoding.
- Sites: Allows you to modify sites you want to search using this engine.
- Indexing: Here you will see how many pages of site has been indexed by Google. You may add your site’s sitemap or an individual page (limit 100) if it is not indexed yet.
- Refinements: This is really a great feature to sort your results by Labels or better to say by Sites. How this works?Say you have listed 3 sites in the search engine and each of those site are focused to different niche. 1st one is for softwares download, 2nd one for tutorials and 3rd one is for latest news. So if a user searches for photoshop and results comes from all three sites then this feature will come into play.If you have labelled your sites accordingly like Download for 1st, Tutorial for 2nd and News for 3rd, then the user will see 3 different tabs(one for each) on the top + one tab for all results. This way the user have sorted results by sites and if the user want photoshop tutorials then he can easily use the Tutorial tab and ignore others.
- Promotions: As the name suggests this is promoting some url for a special keyword. Select your keywords that will trigger the option and url you want to promote.
- Synonyms: You can expand your users’ search queries by using synonyms, which are variants of a search term. For example, you can specify that searches for cars will return results for both cars and autos – by Google.
- Autocompletions: The same feature that Google search offers. Type and Google will give suggestions. This requires code updates frequently as Google updates the autocompletaions for your engine.
- Google Analytics New!: Link your Google Analytics account to know what people in your site are searching.
- Look and feel: This is where you define how your search engine should work.
- Full-Width: If you want the search box and the search result to display on the same page use the first option. The result will show just immediately after the search box. Create a HTML page like search.html with the code you will get after clicking Save & Get Code button and upload to your site.
- Compact : This is the same as above but requires less place. Best for using search engine in places like sidebars.
- Two column: This option allows you to place the search bar and the result in two different places in a single page. Like place the search bar in the sidebar and the search result in the main content area.This option is great for better user experience as the user will get the result within the page where he is. This feature is a life saver for user with low bandwidth speed.To use this feature select the Two Column option and customize then click Save & Get Code. Place the first snippet in the sidebar or header and then place the second code in the place where you want the result to appear. Remember this is a one page installation. Both of these codes must exist in a single page.
- Two Page: Place your search box anywhere but the search result will be displayed on predefined page. Use this feature if you want to use urls like yoursiteurl/?s=query.To use it select Two Page mode and click Save & Get Code, Google will ask you to provide the url where want the result to appear and the query parameter that will trigger the result script.For example you want the result to appear in yoursiteurl/?q= then put yoursiteurl in the Specify the url in your site where you want the search results to appear: field and q in the Specify the query parameter name embedded in the url: field.
Now copy the first code and put it where-ever you want. It can be even a different domain which is or is not in Site to Search (2 in the list) list.
Paste the second snippet of the code where you want the result to appear i.e. yoursiteurl. Now whenever any query is made using the search box you just installed, it will come to yoursiteurl to show the result.
Now you must be thinking how I can use this to my site’s homepage if I have to show the search results on my homepage? If I have to put search result on homepage then where I will put my content? Don’t worry there is a trick to achieve it. You can show both of your content and search result on you home page just by using if else function. To know how to do this click here.
- Result Only: This is the same as above except only one thing that is you can use your own search box.To install this first create a search box with action parameter as same as you give in the Specify the query parameter name embedded in the url: field. Now install the script where you want the result to show. Whenever a query is made on the page (where you installed the second script) using the parameter you given above, it will trigger the script and the result will be fetched from Google.
- Google-hosted: The easiest way to install Google Custom Search. Just copy the code and paste it anywhere you want. On click of the search button it will go to a Google page for displaying the result. You can choose either to open a new window/tab for the result or the result will be displayed in the same window/tab.
- Get code: Get the latest updated code for your search engine here.
- Make money: Monetize with AdSense account and earn more.
- Business settings: This tab is not for you and me as we prefer to earn money by showing ads on search results rather than pay $100 for 20,000 queries per year. You may get it free if your sites belong to a non-profit organization. Click on it to see the details.
- Advanced: In short download or upload Search Engine settings from here. More info.
- Admin accounts: Add additional users to control your search engines.
- Audit Log: History of edits.
- Preview: live instant preview of your custom search engine.
- Statistics: View the statics of your search engine. What people are searching for and more.