Internal website search script

Every website needs a search bar to make a Content searchable present on it. This content can be about the company, documentation, support pages, forums, product descriptions, blogs to locations, etc. Many of the webmasters work to improve their Google/Bing search results ranking, but they overlook their internal website search and its capabilities. How easily users are going to find information on your site? Internal website search is a key factor in user experience, feedback on different content on site, optimizing site organization, etc. Once your site grows in terms of content, visiting users; it becomes trivial to have a good search bar that will not only respond to user queries but also guide them to find what they are looking for. The best internal search for sites is easy to implement and low cost to run and manage.

internal website search script

Importance of Internal website search script:

First of all, what users are going to search on Google/Bing verses on your site are very different. If users are searching on your site it does mean they have spent time on your site, they are interested in your site and maybe for an e-commerce site, it’s the journey to buying products and more importantly what is it they are interested in. This is the importance of having an internal website search.

What is an Internal website search script?

A simple free text search bar on top of your website which can handle user queries and guide them to find content easily what they are looking for. A visible search bar in the top(header) section of your website and search service responding to users queries are the main components of Internal Website Search.

Internal site search solutions:

If your site is based on any Content Management System (CMS), then the search functionality is handled by CMS by default. As most of the CMS support plugins to enhance their functionality, a third party or community-based plugin can be used for the search features. You can still implement a powerful custom site search provided by existing search engines like Google, Bing etc. An internal site search for a static website is also possible and can be implemented easily. Additionally, you can also build search functionality from scratch.

Here are easy steps to create an internal website search script for your website. We will discuss three methods of adding an internal search script to your website.

Internal website search script using expertrec

Before starting out to make an internal website search script using expertrec, make sure that your website is live and not behind a login (If your website is behind a login, follow steps from here (Indexing behind login pages). Have your sitemap URL handy. Also, make sure you have code access to your website. Follow the below steps

  1. Go to https://cse.expertrec.com/?platform=cse.
  2. Login with your Gmail id.
  3. Enter your website URL. (enter your website URL in the format https://www.yourwebsite.som).
  4. Enter your sitemap URL. If you don’t have a sitemap, you can enter it here. If not, you can
  5. Initiate a website crawl. (Now expertrec crawlers will start crawling your website. This could take some time depending on the size and number of pages on your website).
  6. Once the crawl completes, you can make a change to your search engine’s look and feel and also to the search engine’s ranking algorithm by using the control panel. There are more advanced features like search weights, promotions, synonyms, and more.
    1. Search weights are a way to tell which portions of your website should be used to rank the search results. Queries will be looked for in the portions of your site having a higher weight first.
    2. Synonyms Imagine your customers are using a site search engine and people are searching for “open source” and there are no docs matching “open source’. But there are documents that contain terms such as “Linux”, “Drupal” etc. Synonyms solve this issue.
    3. Boost fields The boost fields feature helps you boost certain fields in search results across your website. For example, you might want to boost PDFs across search results.
    4. Ui customization– The UI editor lets you edit the look and feel of your website search engine without coding.
    5. Analytics- Expertrec has its own site search analytics suite that you can use to analyze the search patterns on your website. You can also link Google Analytics and check your search queries within GA.
    6. Script hooks– This is an advanced feature that developers can use to accomplish certain tasks before or after the search loads. For example, using this feature you can increase or decrease the number of search results in the auto-complete.
    7. Go to the code section and add it to your website. You can also email the code to your developer and ask them to add it to their website
      • The code contains two portions ( one within <script></script> and another piece of code <ci-search></ci-search>).
      • The <script></script> is just the JavaScript component and can be added using Google Tag Manager or using the code editor.
      • The <ci-search></ci-search> code adds the search box to your website. The place where you add this code determines the location of the search box.
  7. It is advisable to make the code changes in a test mode or development website before taking live in your live or production site.
  8. As a final step, remove any website cache that you might have.
  9. Now your site search engine is live. You can check out the search analytics after a few days of search engine usage to check out what users are searching for and reorganize your content strategy accordingly.

internal website search script

 

Internal website search script using Google custom search

To create a Programmable Search Engine using Google, 

  1. Sign in to Control Panel using your Google Account (get an account if you don’t have one).
  2. The name of your search engine will be automatically generated based on the URLs you select. You can change this name at any time.
  3. Select the language of your search engine. This defines the language of the buttons and other design elements of your search engine but doesn’t affect the actual search results.
  4. Click Create.

Your basic search engine is ready to use! To see more configuration options, go to the Control Panel. Control Panel also has a preview window that allows you to test and fine-tune your search results.

  1. Go to https://cse.google.co.in/cse/
  2. Sign in to Control Panel using your Google Account (get an account if you don’t have one).
  3. The name of your search engine will be automatically generated based on the URLs you select. You can change this name at any time.
  4. In the Sites to search section, add the pages you want to include in your search engine. You can include any sites you want, not just the sites you own. You can include whole site URLs or individual pages URLs. You can also use URL patterns.

Implementing Google search box

Once you’ve created your Programmable Search Engine, you can add the Programmable Search Element to your site. To do this, you’ll need to copy some code and paste it into your site’s HTML where you want your search engine to appear.

  1. In the Control Panel click the search engine you want to use.
  2. Click Setup in the sidebar, and then click the Basics tab.
  3. In the Details section, click Get code. Copy the code and paste it into your page’s HTML source code where you want the Google search bar to appear. Click on receive codeadd google search to website
  4. Add this code to your website. If you are on Word press, you can use a plugin called Elementor or insert headers and footers plugin that will do this for you. If you want exact placement, you will have to edit your theme file by going to Appearance-> theme editor. If you are on other CMS you can contact your developer and ask him to add it to all the pages where you want this search bar to be shown.add google search to website
  5. Once you add this code to your website, you will be able to see the Google search bar on your website pages.

Editing the look and feel

On many occasions, it makes sense to have a search box appear independently from search results. A two-column layout allows you to render a search box in one area of your page (for instance in the sidebar) and display results in a different one (for instance the main area of the page).

To change the layout of your engine go to the Look and feel section in the Control Panel and click the Layout tab. After selecting and saving the 2-column layout in the Control Panel, you also need to change the HTML code for the Search Element.

Enable Auto complete

Apart from customizing colors, fonts or link style in the Control Panel, it is possible to influence the look and feel and the behavior of the search box via custom HTML attributes.

This allows you to override some of the general settings from the Control Panel. It is especially useful when you want one search box (e.g. one on the homepage) to behave differently than other ones on the site. For example, you can enable or disable auto complete feature using  attribute. By default, it is set to true if auto complete is enabled in the Control Panel. By switching the value to false you can control how the element behaves.

<div class="gcse-searchbox"></div>
<div class="gcse-searchresults" data-defaultToImageSearch="true"></div>

Customizing Search Results

In a similar way to customizing the search box, you can add additional options to the search results element.

For example, in order to change our search engine from webresults-based to image-based, we can utilize the defaultToImageSearch attribute.

First of all, you need to enable Image Search in the Control Panel for your search engine. In the Setup section, in Basics tab, click the Image search option into the “on” position. After that, add the defaultToImageSearch attribute to the <div class="gcse-searchresults"></div> element on your website.

 

Advantages of adding Google custom search

  • Google custom search is free. There are few custom search engines that are
  • If you enable ads inside Google custom search, you can make money from AdSense.

Disadvantages of using google custom search-

  • Ads- You can lose your website visitors to competitors.
  • No control over what is indexed or when
  • No control of search results
  • No support
  • Minimal UI customization options
  • It can be shut down or changed at any time. Google is known for killing products ruthlessly without considering the user base.

A few sample scripts

Search Script for using the custom search provided by Google:
<script>
  (function() {
    var cx = 'google-custom-search-engine-id';
    var gcse = document.createElement('script');
    gcse.type = 'text/javascript';
    gcse.async = true;
    gcse.src = 'https://cse.google.com/cse.js?cx=' + cx;
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(gcse, s);
  })();
</script>
<gcse:search></gcse:search>
Search Script for using custom search provided by Expertrec:
<script>
(function() {
var id = 'Expertrec-custom-search-id';
var ci_search = document.createElement('script');
ci_search.type = 'text/javascript';
ci_search.async = true;
ci_search.src = 'https://cse.expertrec.com/api/js/ci_common.js?id=' + id;
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(ci_search, s);
})();
</script>

<ci-search></ci-search>

Above code should be copied to a <div> element in your site’s <body> section, where you want both of the search box and the search results to render.

After the addition of the JavaScript code to the source HTML code of the web page, it will have a search bar to handle search queries and display them accordingly. More on this is covered in Google custom search, Bing custom search, Expertrec custom search.

In summary, Search functionality is at the center in this digital world. People are going to interact with your site and it should be easy to find what they are looking for in their terms. Internal site search is a must-have feature as content and users of your website grow. There are numerous options as discussed above while adding site searches to the website.

Create Internal Website Search using ExpertRec

Happy Searching…!

 

govind dhonddev

Govind Dhonddev is a Software Engineer at ExpertRec, who loves coding, food and writing blogs.

You may also like