How to add a Google or Yahoo Search Box to search of your website

Date added: 16 May 2010
Last Mod: 31 July 2010
© 2010 Steve Campisi

Website Administrator Know How Articles

How to Add Search Engine Search Box to your Website

The Basic Code needed to add a search engine box to search your own website right now.

Yahoo and Google aim at keeping your visitor on your site by giving the visitor further similar search terms of what should be similar valid words that are specific to your site. Moreover, if you want to optimize your site, you can use these similar searches as a hint to help you decide what you should have somewhere on your page or web site.

You can get an idea of how each search engine will perform on your website by visiting our search link at the top right-hand corner of this page, it will open in a new window and you can test drive these three search engines to see which is better suited to your needs. As you are searching this site, I would suggest search terms like "free" or "website" or "flash".

Yahoo, Google or Bing

Definitely Yahoo or Google! And they are the best in the business at the moment and have far deeper reach and many more pages available for hard to get at information.

Bing has been a little disappointing to say the least. They are meant to have a great different search engine and I honestly thought they would be more on top of their game. I say this as when this site was just over two months old, and even though we had a few PR3+ links into this site, they had yet to find and index any pages here (same applies to askjeeves). So I caved at that time and submitted the url to these sites and waited to see how long it would take them to index any pages. (2 days after submitting the url, [Ask]jeeves swiftly indexed some pages, and bing?... no bing.)

So, after a month or so of no indexing, and out of frustration I signed up to bing's webmaster tools and listed this site. Soon after that they did index this site (index page only). And a couple of other pages a month or so after that. And still the websiteadministrator.com.au site has near to nonexistent traffic from bing according to my traffic stats (which logs search engine traffic).

Various simple search phrases which return first page serps on yahoo and google, are no where near as effective or do not show up at all when using the exact same phrase in bing. Even if i preference my own country for the search! So I am pretty sure I must be being denied access to many informative sites that must also be being skipped over by the bing algorithm. Probably yours too. So, if you favour enlightenment, I do not recommend bing as your website's search engine at this point in time.

And this strengthens any argument to favor Yahoo or Google for your search page. Yahoo do seem to index and list new pages a day or two ahead of google. If yahoo stops using meta tags to aid search results, the door will open for another major search engine to join the ranks by using this method.

So, without further ado, let us dive right into what is needed to put say, a Yahoo search box on your website that will search your website for any words from pages they have indexed in their database for your website. Yahoo's my-site-search features are excellent, as are Google's.

Your copy and paste code:

What parameters do i modify to get the above html code to search my site?

After you have placed the above code into your page, there is just one parameter that needs to be changed to personalize it to your site. And though you will instantly note that this layout does not appear the same as on our own search page. Worry not, this is simply because we have modified the finished code with some css to pretty it all up. And we will get to that and yes, we also have the code for you to have google as the search engine to search your site, or you can have both (like ours currently does) if you so desire. But for now, we will use YaHoo as they deliver a great all-round my-site-search facility as we have already seen.

Modifying the form parameters for the search box

action="http://search.yahoo.com/search"
(Our search engine url - we leave this alone.)

fieldset
(This is needed for strict validation in xhtml, html4 etc.)

input type="text" name="p" size="35" maxlength="255" value=""
(size="35" can be changed to modify the 'width' of the search box. "51" is our size.)
(maxlength="255" is not needed but useful to cap the amount of data entered.)

type="submit" value="Search this site with YaHoo"
(value="Search this site with YaHoo!" You can replace Search this site with YaHoo! with whatever you like. The button will auto re-size.)

input type="hidden" name="vs" value="www.websiteadministrator.com.au"
(type="hidden" keeps this 'value' url from displaying in the form)
(name="vs" is needed by our target site)
(value="www.websiteadministrator.com.au" needs to be changed to the base url of your site)

That's it!. We can leave the rest as is. And now you have just created a form that will search your site with YaHoo. We haven't bothered with a radio button to search the web. Most people already have a search engine book-marked, and as they will have the option to search the whole web anyway from whichever search engine you put in, we have decided to skip that extra code as cute, but not necessary to our purpose of having a search engine to specifically search our very own site.

Why does your search page link open in a new window?

Because we only want the search engine to search our site, we begin by making an assumption that the reason any visitor would choose to use a searchbox on our website is that they would actually prefer to find further data that is solely on our website, and that is the reason why they have selected the search button on our website.

So this is a cautionary measure in case the search engine and our visitor end up off on a tangent and warp into a different part of the cyber universe. So this helps our visitor come swiftly home in the case he/she forgets what he/she was doing in the first place.

For very large sites, you probably wouldn't need this step, but for smaller sites, or until your site becomes quite large in content, it is recommended.

Why not use target="_blank" or target="_new" in the form field?

We could also easily replace the very first line of code with the above line of code and have target="_blank" (or even target="_new") in our search form code and make our search results open in a new window. This is fine if you are coding in a 'transitional' doctype, but not if are using a strict doctype encoding. We would use this second option for strict html or xhtml coding.

So, if you want to have these results open in a new window anyway, why not just have the search page open in a new window in the first place and let any search take the page to hell or beyond and give your visitor the power to bring you back with one easy 'close window' click.

input error on strict validation

If your code is missing the "fieldset" tags, You are going to wind up with a W3C error like this...

document type does not allow element "input" here; missing one of "p", "h1", "h2", "h3", "h4", "h5", "h6", "div", "pre", "address", "fieldset", "ins", "del" start-tag <input type="exexexex" name="exex" size="exex" maxlength="exexex" value="" /> The mentioned element is not allowed to appear in the context in which you've placed it; the other mentioned elements are the only ones that are both allowed there and can contain the element mentioned. This might mean that you need a containing element, or possibly that you've forgotten to close a previous element. One possible cause for this message is that you have attempted to put a block-level element (such as "<p>" or "<table>") inside an inline element (such as "<a>", "<span>", or "<font>").

The solution to this of course is to put (or leave) the <fieldset> tags in like we have in the first copy and paste code above.

Copy and paste code for a Google Searchbox on your website.

Modify any of the following code exactly as described above. You will edit the exact same lines of code.

To pretty it all up, you can throw a div container around the whole thing and put in a solid background color or even background image, (as we have, but in a table cell) or you can put a Div around the 'inputs', which is just after the 'fieldset' tag (and close it just before the fieldset tag closes of course) and place a border around it (as we have) or use other CSS commands to change fonts, colors etc.

And there you have it. A pretty search box on your page that will faithfully service your needs.

Fin.