Administration
This page
Other pages
Account
Use the MIT Google Custom Search Engine (CSE) to embed search on your site
 | Google Search Appliance discontinued Google has discontinued their enterprise Google Search Appliance (GSA) product and will not be renewing MIT’s license for our on-campus appliance. As of the end of June 2018, the Google Search Appliance will no longer be available to MIT web site owners for custom search. In its place, we recommend web site owners use the MIT Search Box (search.mit.edu) for basic MIT-branded search, or a Google Custom Search Engine (CSE) if a more integrated experience is needed. |
Overview
IS&T maintains a Google Custom Search Engine (CSE) that is configured to index all public *.mit.edu sites. You can embed this search engine on your site using standard Google CSE tags, and you can limit the returned results to results from a single server or web site if you choose.
The advantage of this approach over using [the MIT Search Box] is that you can embed the results on a page on your own web site, and style them as you would like to with CSS and surrounding page content.
The advantage of this approach over using your own Google CSE is that you will not need to set up and administer your own search engine.
How to embed the MIT CSE on your web pages
Summary
- Add the embedding Javascript to the head section of each of your web pages; if you use a content management system such as Wordpress or PHP, you can usually add it to a template or find a CSE plugin that will do this for you.
- Create a search results page on you site that will be used to display search results.
- Add or update a search box on your site pages, either as an HTML form or by adding the CSE gcse:searchbox-only or gcse:search tag.
- Embed the search results on your search results page by adding the CSE gcse:searchresults-only or gcse:search tag to your page.
- Add any custom CSS you need to style the search box and the search results to match your site.
Detailed steps
1. Add the embedding Javascript
You should add the following piece of Javascript code, including the surrounding <script> tags, to each of the pages on your site which will include a search box or search results. If you use a templating or content management system such as PHP or Wordpress, it is easiest to add this script to the global template that carries through all of your pages. We recommend you place this script inside the <head> element of your web pages.
2. Create a search results page on your site
This page will be used to display search results, and can have your headers, footers, and styling surrounding the space where the Google CSE results will be embedded. In the examples below, we are using the page search.html as the results page.
3. Add or update a search box on your site pages
There are several different ways you can add a search box to your pages. We will be focusing on embedding a simple HTML form, or using the CSE gcse:searchbox-only tag.
Common: your site has a search box on every page, and a page for search results
If your site has a search box on many pages, you will still need to have one page on your site that is used as the search results page. This will be the search.html page we created in Step 2, above.
a. Using a simple HTML form
On all pages where you want a search box to appear, you can create a simple HTML form that submits to your search page as its "action". The important parameters that need to be set are the q parameter containing the query terms, and the as_sitesearch parameter limiting results to your site. An example form might look like this:
b. Using Google's CSE gcse:searchbox-only tag
You can have Google render the search box for you using the Google CSE tag gcse:searchbox-only. On all pages, where you want the search box to appear, include the following code in your HTML:
Common notes
In the above examples, replace the URL http://web.mit.edu/mysite/search.html with the correct URL that leads to your search results page, and modify the as_sitesearch value to be the server name and path to your site. Do not include a trailing slash. This tag limits the search results to your site. You can eliminate the as_sitesearch key and value if you would like the search box to search all public MIT sites.
Styling your search box will be a little more difficult if you use Google's gcse:searchbox-only embed code. You will need to look at the field IDs and names rendered by Google's code. However, the Google-rendered search box will have some features a simple HTML form will not, such as auto-completion.
Uncommon: Does your site have a single search page with a search box and results?
If your site uses a single page for searching and for search results, you can place the gcse:search tag on that page and it will render both a search box, and the resulting search results on your search page. This model is not that common anymore, with most sites including the search box on most or all pages, and then sending the user to the results page once the search box is submitted. However, if you have a single search page on your site that users go to, you will want to include the below code on that page:
Modify the as_sitesearch value to be the server name and path to your site. Do not include a trailing slash. This tag limits the search results to your site. You can eliminate the as_sitesearch key and value if you would like the search box to search all public MIT sites.
4. Embed the search results on your search results page
On your search results page, the page search.html in our example, include the following code in your HTML where you want the search results to appear:
Note that you will also need to include a search box on this page if you want your visitors to be able to run another search from the results page.Otherwise you will only see the results, and your visitors will have to click the back button to get to a page with a search box.
5. Add custom CSS if needed
Add any custom CSS to style the search box or search results as desired. Note that this will take some work and fine-tuning if you want to precisely control the styling of the results. You will need to examine the page source and look at field IDs and names as rendered by Google to target with your CSS.
