Easily Build Your Own Search Engine Using A JavaScript API

serpstack javascript demo

What is serpstack, and What Makes it Powerful?

serpstack is an API service built to deliver real-time SERP data from all major search engines worldwide, including Google, Yahoo, Bing, Baidu & Yandex. You can use the serpstack API to scrape SERP data at scale using options like location, browser, device, and more. Minimal implementation takes just a few seconds using the simple HTTP GET URL structure, and results are returned in JSON.

The serpstack API is a product built and maintained by apilayer, an Austrian technology company aiming to build a variety of reliable programming interfaces (APIs) and make them affordable for developers and startups. Browse all available products here.

serpstack was built out of an internal need to keep track of search engine positions in an automated fashion. Today, the product has grown to become one of the most trusted SERP APIs available on the market.

 

Why use a SERP API?

Regularly gathering SERP data for your products and websites and keeping track of it over time is essential to a healthy SEO strategy. Rankings fluctuate significantly and search keywords become more or less applicable and valuable over time — the only way of staying on top of these changes is to use a pre-built Software-as-a-Service solution or implement SERP data directly into your applications or websites using a SERP API like serpstack.

The serpstack API is used to scrape SERP data at scale by thousands of SEO agencies, marketing professionals, and companies of any size around the world.

 

What SERP Endpoints are Available via the API?

In total, the serpstack API is offering 18 API endpoints, each with different powerful functionalities. Here are their short summaries:

  1. Ad Results: If Google returns any sponsored ads for your search query, the API response will come with an ads object, which contains all ads in the order they are shown in the search result.
  2. Organic Results: Organic search results are the main search results provided by Google and are determined by a series of factors, such as web traffic, backlinks, social media presence, and much more.
  3. Image Results: Image search results provided by Google. There are two options images can be returned by the API: Inline Images and Image Search.
  4. Video Results: Video search results provided by Google. There are two options videos can be returned by the API: Inline Videos and Video Search.
  5. News Results: News results are returned as a news_results array only when the type parameter is set to the news.
  6. Shopping Results: Shopping search results provided by Google. There are two options shopping results can be returned by the API: Inline Shopping and Shopping Search.
  7. Local Results: For many searches, Google returns both a local map and a series of local results. These items are returned together in almost 100% of all cases. The API will return local map details as local_map and local results as local_results.
  8. Answer Box: Google is capable of providing a large variety of direct answers to questions, from simple questions all the way to solutions of complicated mathematical formulas.
  9. Weather Box: If your Google search query is related to the weather in a specific location, Google will return weather information as an object called weather_box.
  10. Events: If there are any events relevant to your search query, Google will show a rich snippet containing event results. These results are returned by the serpstack API as an events array.
  11. Top Carousel: For some search queries, Google shows a horizontal list of results with images and descriptions at the top of the page. This list is returned by the API as a top_carousel array.
  12. Top Stories: If there are any trending news stories relevant to your search query, Google will return those in a section called “Top Stories”. This section is returned by the API as a top_stories array.
  13. Knowledge Graph: A Knowledge Graph is returned by Google whenever there is enough information about the search query from Google directly or from informational sources, such as Wikipedia. Knowledge Graphs will be returned in a knowledge_graph object by the API.
  14. Inline Tweets: If there are any Tweets relevant to your search query, Google will include them in your search result. The serpstack API will return inline Tweet results as an inline_tweets array.
  15. Related Searches: At the bottom of each search result, Google usually suggests other search queries related to the current query. These suggestions are returned by the API as a related_searches array.
  16. Related Questions: For many search queries Google provides an additional set of frequently asked questions related to the search term. These related questions are returned by the API as a related_questions array.
  17. Related Places: If there are any places (e.g. restaurants) relevant to your search query, Google will return those as part of a “Discover more places” section. This section is returned by the API as a related_places array.
  18. Pagination: The API does not stop at page 1 of Google, the upcoming nine pages are listed along with URLs in the API’s pagination response object.

 

How can I Access serpstack API?

First, get your API Credentials here, and set up your subscription plan:

And you can monitor your usage via this dashboard.

API Access Key & Authentication

Next, to check if everything is working properly, just simply run this URL in your favorite web browser:

You will get this API response inside your browser:

Here is another example, for “rest api” query:

You will get this API response inside your browser:

Here are all available HTTP GET request parameters:

Object Description
access_key [Required] Your API access key, available in your account dashboard.
query [Required] Specify any query to search for. (Advanced operators like intext: are supported)
engine [optional] Specify which search engine to use: google (default)
type [optional] Specify which Google category to search: web (default) for standard web search, images, videos, news, or shopping
device [optional] Specify which device to use: desktop (default), mobile, or tablet
location [optional] Specify a geographic location for your query to be processed from, either using free-text or by making a request to the Locations API endpoint and using the canonical_name response object.
auto_location [optional] Set this parameter to 1 (on, default) or 0 (off) depending on whether or not you want the API to auto-set the parameters google_domain, gl, and hl based on the specified location.
google_domain [optional] Specify a Google domain to use for your query. (Default: google.com) Download a list of supported domains: resource.google.domains.csv
gl [optional] Specify a country code to use for your query. (Default: us for the United States) Download a list of supported 2-letter country codes: resource.google.countries.csv
hl [optional] Specify a language to use for your query. (Default: en for English) Download a list of all supported languages: resource.google.languages.csv
safe [optional] Set this parameter to 1 (on) or 0 (off, default) depending on whether or not you want SafeSearch to be enabled for your API request.
period [optional] Use this parameter to filter search results based on a specific time period. Possible values: last_hour, last_day, last_week, last_month, last_year or custom.
period_start [optional] If the period parameter is set to custom, you can use this parameter to specify a start date for your custom time period. (Format: YYYY-MM-DD)
period_end [optional] If the period parameter is set to custom, you can use this parameter to specify an end date for your custom time period. (Format: YYYY-MM-DD)
news_type [optional] When searching Google news, set this parameter to blogs to filter your results to blog-related results only. (Default: all)
exclude_autocorrected_results [optional] Set this parameter to 1 (on) or 0 (off, default) depending on whether or not to exclude autocorrected search results in your API result.
images_page [optional] When searching Google images, set this parameter to an integer of your choice to limit the number of image results. (Example: 5)
images_color [optional] When searching Google images, use this parameter to filter image results by color. Possible values: any (default), black_and_white, transparent, red, orange, yellow, green, teal, blue, purple, pink, white, gray, black, or brown
images_size [optional] When searching Google images, use this parameter to filter image results by image size. Possible values: large, medium, or icon
images_type [optional] When searching Google images, use this parameter to filter image results by image type. Possible values: clipart, line_drawing, or gif
images_usage [optional] When searching Google images, use this parameter to filter image results by reuse policy. Possible values: reuse_with_modification, reuse, non_commercial_reuse_with_modification or non_commercial_reuse
sort [optional] If the period parameter is set to any period, you can use this parameter to sort your search results. Possible values: relevance or date.
page [optional] Specify which page of results to show. (Default: 1 for the first page)
num [optional] Specify the number of results to show per page. (Default: 10 – shows 10 organic results)
output [optional] Specify which API response format to return: json (default) or csv.
csv_fields [optional] If the output is set to csv, you can use this parameter to specify which response objects should be included in your CSV file. Simply set csv_fields to one or multiple comma-separated field identifiers like search_parameters.query or organic_results.title to limit your CSV file to these fields.

And the following are the Basic Response Objects:

Object Description
request > success Returns true if your API request has succeeded.
request > processed_timestamp Returns the exact UNIX timestamp for when your API request was processed by the API.
request > search_url Returns the exact search URL used for your API request.
request > total_time_taken Returns the total processing time of your API request.
search_parameters > engine Returns the name of the search engine used for your API request. (Default: google)
search_parameters > query Returns the requested search query.
search_parameters > type Returns the type of Google search used for your API request. Possible values: web (default), images, videos, news, shopping
search_parameters > device Returns the name of the device type used for your API request.
search_parameters > google_domain Returns the Google domain used for your API request.
search_parameters > hl Returns the content of the hl parameter sent along with your API request.
search_parameters > gl Returns the content of the gl parameter sent along with your API request.
search_parameters > page Returns the current page number as an integer.
search_parameters > num Returns the specified numbers of results per page as an integer. (Default: 10)
search_parameters > location Returns the location sent along with your API request.
search_parameters > output Returns the output requested along with your API request. (Default: json)
search_information > total_results Returns the total number of results found for your search query.
search_information > time_taken_displayed Returns the total processing time displayed by the search engine.
search_information > did_you_mean Returns a “did you mean” search term suggestion if Google detects a typo, misspelling, or error in your query.
search_information > showing_results_for Returns the actual search term Google is showing results for. (Only applicable if Google detects a typo, misspelling or error in the query you sent and knows better)
search_information > query_displayed Returns the query displayed by the search engine.
search_information > detected_location Returns the location name Google is displaying in the search results page footer. This response object offers a good way of making sure that your specified location is detected by Google.
search_information > no_results_for_original_query Returns true or false depending on whether or not Google is showing results for a different search term than sent in your query. Example: If your query is mcdonalds, Google would detect a typo and instead show results for mcdonalds. In this case, the no_results_for_original_query would return true.

And common API errors:

Code Type Info
404 404_not_found The user requested a resource that does not exist.
101 missing_access_key User did not provide an access key.
101 invalid_access_key User provided an invalid access key.
102 inactive_user User account is inactive or blocked.
103 invalid_api_function User requested a non-existent API function.
104 usage_limit_reached User has reached his subscription’s monthly request allowance.
105 function_access_restricted The user’s current subscription does not support this API function.
105 https_access_restricted The user’s current subscription plan does not support HTTPS.
210 missing_location_query User has not provided a valid location value inside the query parameter. For details, please refer to the Locations API section of this documentation.
311 invalid_engine User has provided an invalid value inside the query parameter.
312 invalid_output_type User has provided an invalid value inside the output parameter.
313 empty_field_list User has not provided a valid value inside the csv_list parameter.
314 invalid_search_type User has not provided a valid value inside the type parameter.
315 invalid_google_domain User has not provided a valid Google domain inside the google_domain parameter.
316 invalid_time_period User has not provided a valid value inside the period parameter.
317 missing_start_date User has not provided a valid date inside the period_start parameter.
318 missing_end_date User has not provided a valid date inside the period_end parameter.
319 invalid_start_date User has provided an invalid date inside the period_start parameter.
320 invalid_end_date User has provided an invalid date inside the period_end parameter.
321 invalid_sort_type User has provided an invalid value inside the sort parameter.
322 invalid_images_page User has provided an invalid value inside the images_page parameter.
323 invalid_images_color User has provided an invalid value inside the images_color parameter.
324 invalid_images_size User has provided an invalid value inside the images_size parameter.
325 invalid_images_type User has provided an invalid value inside the images_type parameter.
326 invalid_images_usage User has provided an invalid value inside the images_usage parameter.
327 request_failed API request failed due to an unknown error. Please contact customer support and report the error.

 

How can I Build My Own Search Engine using HTML, JavaScript, and serpstack API?

Use the following code to make an API request using JavaScript, and save the file into index.js file:

For the Front-End, create an index.html file, which contains the following code:

Here, we are creating a form for inputting our search query. For the neat form template, we can import the necessary Bootstrap CDNs. The BootstrapCDN is available from their official website bootstrapcdn.com. To implement them, you can copy the code from their page and paste it to the head section, and include the custom javascript file under the closing tag of <body>.

Open the “index.html” file in your browser, and search the keyword “apilayer”, you will get this output:

Awesome, right? Let’s try for keyword “rest api”:

Or “api” keyword:

If we click on one of the links, a new tab will show you the site contents.

 

Bonus: API Request using other Platforms

How can I Make an API Request using Postman?

If this is your first time using Postman, you can get the installer, and follow the installation instructions.

Choose the GET method, and send the request to the following URL:

Here is another example, for “rest api” query search:

 

How can I Make an API Request using RAD Studio REST Debugger?

First, download Delphi REST Debugger here.

Choose the GET method, and send the request to the following URL:

Here is another example, for “rest api” query search:

After getting the API responses you need, and you want to create Desktop apps based on it using Delphi, please refer to this article to get started:

https://blogs.embarcadero.com/using-apilayer-rest-apis-from-delphi/

 

Are You Ready to Build Your Own Search Engine Apps?

Interesting examples, right? As you can see, there are many SERP endpoints provided by serpstack REST API which can be connected to any platform and any programming language you work with. In this article, we show you the basic demo of how you can use the serpstack REST API for cloning Google Search using HTML and JavaScript. 

Take advantage of the free tier on serpstack and we strongly recommend you to upgrade your subscription plan if you need more powerful features (CSV Output, No Rate Limit, HTTPS Encryption, and many more) or contact us for a custom solution. We can’t wait to see what you build with our REST API!

 

Head over and sign up for free to start integrating scalable SERP power to your apps today!