Visitors of a website could land in a 404 page because of a mistyped address, a bad link, a deleted page, etc. These are what you can do to improve your 404 page in a Web Application Development Project.
People who visit your website must be those looking for the contents via a link and expect something from it. Then instead of showing a search form, a warning, or link to the homepage, we should think of a solution that can suggest a page by guessing where the visitor intended to go.
SUGGESTING THE RIGHT PAGE
One way to suggest a suitable page is to do searching and present the result via Google’s Custom Search API.
This is a tool allowing searching within an individual website. It allows you to retrieve the information that is regarded as the most relevant from your website. It does need a search phrase, though. So, to give Google something to search with, we’ll use the path of the URL that the user is currently on.
CAVEAT: LIMITS ABOUND
The free tier for this API has a limit of 100 calls per day. It is advisable to test it before implementing. While someone with a small website might be fine with this limit, paid upgrades are available.
Before using the Custom Search API, we need to let Google know who we are and get some access keys.
SEARCH ENGINE ID
First, register for your website before going to the 100 API request.
- Select “Add.”
- Input your website’s URL (yoursite.com) in “Sites to search.”
- Hit “Create.”
You now need to find your “Search engine ID.” Click “Edit” on the search engine that you created, then the “Search engine ID” button. Take note of that code!
DEVELOPER API ACCESS
If you don’t yet have a project, select the “New Project” option and fill in the form.
Under “APIs,” activate the “Custom Search API” by switching the “Off” button to “On.” Then, select “Credentials,” then “Create New Key,” and choose the “Browser Key” option. Take note of the API key!
Armed with both a search engine ID and an API key, you can now start hitting the API. The code below requires jQuery.
It does some AJAX JSON stuff, so I’d rather lean on the framework to ensure that it works across browsers.
Within our custom search object, we can define methods and variables safely away from the global context. First, let’s set up some variables to use later:
Replace the keys with those we generated earlier.
Initially, we establish a local context by storing this in a variable. We’ll use this to access a show dialog method later.
Trying A Search
First, we’ll add a method that tries a custom search:
This trysearch method takes a phrase and sends it along with your keys as a request to Google’s API. The response is then checked, and the first link that it finds will be logged to the console. You would call it like so:
see something logged in your console.
GETTING THE SEARCH PHRASE
Next, we’ll write some code to get the path from the URL of the page. This path will become the search phrase.
Within the jQuery ready method, we’ll pick up the path name part of the current URL and create a search phrase from it. We’ll decode the URI, replace any forward slashes with spaces, and send the result to the trysearch method.
In the next article in vietnam Web Application Development, we will provide you with more presentation on how to:
- SHOWING THE REDIRECT
- SOME OTHER APPROACH
- FALLBACKS AND OTHER STRATEGIES
Source: Smashing Magazine