SERP Best Practices, Guidelines and Recommendations
Overview
This guideline, put together by CodeFuel’s operations, outlines best practices for how to build an effective Search Results Page (SERP)
The SERP defines the search experience for your users. Creating a good SERP ensures that your users will be fully engaged.
These best practices are a supplement to your contract with ClientConnect Ltd., d/b/a CodeFuel (the “Agreement”). These best practices are not intended to replace or deviate from any of your obligations in the Agreement,rather, they are intended to provide guidance as to how and what you are allowed to do with CodeFuel Technology pursuant to the Agreement and in accordance with common industry practices.
CodeFuel is entitled to use its discretion when evaluating your application and may replace, edit, or expand the best practices at any time.
Terminology
- Algo/web results: also known as ‘web listings’. These listings do not generate revenue when a user clicks on one of them.
- Auto Suggest or word completion is a feature in which an application predicts the rest of a word a user is typing. An Auto Suggest feature helps users complete queries faster by adding intelligent type-ahead capabilities. In graphical user interfaces, users can typically press the tab key to accept a suggestion or the down arrow key to accept one of several suggestions.
- Bing ads: also referred to as Bing ads paid results, search text ads and sponsored search. ’Bing Ads Paid Results‘ means any result which includes the delivery of an advertisement. Usually displayed on the Mainline or Sidebar,
- Hyper link: a link from a word or image on the screen to another location/URL, typically activated by clicking on a highlighted item.
- Other monetized results: this applies to monetization solutions that you have direct relationships with (i.e. not provided by CodeFuel), but which are approved by CodeFuel’s compliance team to be in used under certain terms.
- Related Searches: this is an operator that allows a user to find search terms similar to the one he specified in the search query.
- Search box:a rectangular field on the screen that accepts typed-in text in order to look up something or launch a search for related information.
- SERP: Search engine results page
- Search Ad Extension – refers to site links, location extensions, call extensions and other extensions. Search Ad extensions can improve the visibility of the ads, which can lead to more clicks and improve ROI. Main examples are as follows:
- Site links are like standard text ads, but with additional content to make the ads more eye-catching and useful. They usually contain an additional/ secondary title that appears after the first title.
- EnhancedSearch Ad Extension is like a standard Site links ads, but with additional content to make the ads more eye-catching and useful. It usually includes up to two lines of descriptive text, in addition to the regular site links.
- Merchant Ratings: an aggregation of experience from past customers. The review is displayed as star ratings and quantity of reviews the advertiser/merchant has received. This additional content makes the ad more appealing to users, while providing other user feedback.
- Local Ad extension: Ads with extended local attributes can be connected to service consumers inside the target area of the business location. Information can include the address and phone number of the business within the ad. This ad extension type is mainly used in mobile view, where location is essential.
Basic Principles: Do’s & Don’t’s
Do
- Think about what makes your SERP unique, valuable, or engaging. Make your SERP stand out from others in your field.
- Aim to give your users the most relevant search results for their queries, and to keep them satisfied when they land on your SERP.
- Make sure SERP Elements/ Section on the page are clearly labeled:
- Each Ad should be labeled separately
- Web /Algo results should be distinguished from Ads (sponsored listings)
- If you use several sources to renders search results, make sure that each source / provider is disclosed (e.g. Bing Ads; Amazon Ads, etc.).
- Always display the user’s search query as originally entered by the user (and allow it to be edited within the Search box).
- Make sure all search results are displayed properly
- Make it easy to click the selected result
- Make sure the SERP loading time doesn’t exceed 2 seconds
- Promoting popular or recommended search terms is allowed – just make sure your technology is approved and your overall keyword blend is diverse
- Try to visually highlight any promoted content, e.g. product ads. One way to do so is to present them on the sidebar; to better highlight it, use a heading like ‘Featured Results’
- When possible, integrate mixed results and not only web/ text results; :
- Video results can be significant, with very high CTR
- Product Ads can also be significant, with very high CTR
- Make sure at least a few results are displayed above the fold to ensure viewability
- If possible, build a different SERP layout for desktop and mobile views.
- Localize your SERP (e.g. headings, footer links) to ensure the best search experience for your non-English speaking users.
- Notify users with a specificmessage when zero results are returned. Try to provide other search alternatives so user can continue searching
- Monitor your SERP on a regular basis and find ways to optimize it
- Keep yourself up-to-date with the latest best practices and SERP recommendations. Read relevant articles on blogs, newsletters, etc. If you need assistant finding good material, please contactyour account manager.
- GDPR – EU users must see the GDPR notification in the most top right corner of the Serp to meet Bing policy. The statement should say: “Ads and search results by Microsoft (Privacy)” and its link should take to https://privacy.microsoft.com/en-us/privacystatement.
Don’ts
- Don’t deceive the user
- Don’t forget GDPR statement – EU users must see the GDPR notification in the most top right corner of the Serp to meet Bing policy.
- Don’t manipulate users with Ads / Web results that have clickable areas:
- Don’t make a ‘hover state’ on text that it is not clickable
- Make sure that only the title and Ad extensions link (e.g. Sub links) are clickable
- Make sure the description is not clickable
- Make sure the space between results is not clickable
- Don’t exceed the number of Ads that are supposed to be shown on a single page. Currently, this limit is set as:
- Desktop: Maximum number of Ads: 4 on top; 4 on bottom; and up to 8 on a side bar
- Mobile device: Maximum number of Ads are: 3 on top; 3 on bottom
- Don’t change the order of the Ads. Always display them in the order that they are returned by the search feed API.
- Don’t use tricks intended to generate non-human Ad clicks
- Don’t create a page with malicious behavior, such as sending automated queries to the search engine
- Don’t load your SERP with a pre-defined Search term within the Search box
- Don’t change search preferences without the user’s informed consent. For example: don’t change the preferred language, default safe search mode, etc.
- Prevent and fight spam queries that may lead to reputation issues and charge-backs or call-backs
- Avoid including low quality content / feeds from non-approved providers that may impact the user’s engagement and overall experience
- Avoid including display ads (banners) that may be considered as intrusive, irrelevant to user’s queries and served without user’s intent
Recommendation for best UI/UX design
- Always choose readable fonts that are clear, easily viewable and are distinguishable from the background color. This applies to font family, font size and font color.
- Your SERP must take both readability and screen resolution into consideration when you’re sizing various features on your page.
- – Make sure your SERP is built as a mobile-friendly format.On mobile devices, make sure your SERP looks professional, both in vertical and landscape views. SERP Elements/Sections
- Publisher’s brand (highly recommended)
- Search provider’s brand (optional)
- Search box (mandatory)
- With/without Auto Suggest (Optional).
Auto Suggest is intended to help users save time by displaying related terms, common misspellings, and popular queries
- With/without Auto Suggest (Optional).
- Vertical links (optional)
- Show the number of results found (optional)
- Search Ads, also known as sponsored links (mandatory)
- Algo results (text, images, videos, etc.) (mandatory)
- Related Searches (optional)
- Other monetized results
- Pagination (mandatory)
- Footer links (mandatory)
- About
- Terms of Use
- Privacy Policy
- Contact
Publisher’s Brand
- Your brand could appear in any of the following places on the search results page:
- On the left side of the search box
- On the page header
- Ifthe brand is next to the search box, it must be the same height as the search box
- The brand can’t hide or overlap the search box in any way
- The brand can’t hide search ads or search results
Search Provider’s Brand
- If you’d liketo include a known search provider’s brand on your SERP,please contact your account manager for guidance
The SERP Search Box
- Place the search box where users expect to find it, usually towards the top center or top left of the SERP
- The search box should be displayed prominently and include a call-to-action, such as ‘search button’ or a magnifying glass icon. A button with a background color is recommended.
- Make sure the button is sized appropriately so that users don’t have to point their mouse or tap their finger with perfect precision. A larger, clickable area makes it easier to both spot and click the search box.
- Search action should be enabled from either clicking on the search button or from using the ENTER command in the keybord.
- The text in the search box should be aligned with where the Search Results starts.
- Search box size:
- In desktop, it’s recommended that the search box be no less than 600 pixels.
- In mobile, it’s recommended that the search box size should meet any device screen-size and resolution that your site supports. (also in landscape mode)
- For a better user experience, the search box should be fully visible (i.e., not hidden under a search icon or included in a collapsed/expanded functionality)
- Helper text and/or tooltips can be used as an eye catcher, when the input text doesn’t include a search term.
- Recommended texts options:
- Search
- Search the web
- Enter your search term
- It can also be presented as a question, e.g. “What would you like to search today?”
- When a user searches, the following should happen:
- Search term should remain visible inside the search box, which will allow the user to relate the results to the search term
- The search term in the search URL should be replaced with any new search term that the user generates
Recommendations for Search Box ‘Look & Feel’
| Recommendations | |
| Search box size (width & height) | 620 x 46 px |
| Call to action | Magnifying glass within the search box |
| Search box background color | No specific recommendations |
| Search box fill color | White search box |
| Preferred search box helper text:text size, colors | #AFAFAF, italic with 3 dots after the text, Ariel, Sans-serif 18 |
| Preferred search box text- text size, colors (input mode for typed-in) | #666666, Ariel, Sans-serif 18 |
| Preferred search box border width and color | No specific recommendations |
| Clear text indicator (e.g. X) – size, color, padding from search box edges | Recommended for mobile, desktop optional |
| Space between brand/ logo & the search box | 10 px |
Autosuggest listing
Autosuggest listings can be served only by an authorized vendor approved by CodeFuel. Please contact your Account Manger if you don’t have your own Autosuggest technology and you need to integrate Codefuel’s Autosuggest.
Autosuggest can only appear after a user action, meaningas a user starts to type something in the search box. The autosuggestfeature will automatically show a drop-down list of items that the user is trying to type, so the user can select from this list, instead of having to type it out completely.
To ensure an effective experience, follow these best practices:
- Make sure the font size matches the search box input text size
- Maintain a reasonable space between the suggestions listing
- While the user hovers over a suggestion item, include an underline and/or a background color to highlight the item
- Desktop: present up to 8 items in the list of suggestions (without a scrollbar)
- Mobile: present up to 5 items in the list of suggestions ( without a scrollbar)
Search History
Search history makes it easier for users to find the information they were looking for by displaying recent searches as the user types.
Users must be able to clear their search history or remove individual search terms as follows:
- By typing in the search box to view their search history.
The user should be able to hover their mouse over a search term tod highlight the item that should be removed. By clicking on “Remove from Histroy” link and/or the delete (“X”) button or any other indication to remove the history search term, the user shouldshould be able to clear that item from the list.
How to Turn Off Search History
Users must have the ability to not see their search history when searching within your SERP. To ensure this, a turn-off history functionality must be in place.
To revert this functionality, users should have a “back on/revert’” button which, upon clicking, turns on the search history.
Once users turn off the search history, new search terms CANNOT be saved. However, previously collected search data can be retained to personalize web experience and improve ad services.
The ‘turn off history’ feature is recommended to be placed under the SERP setting page. If such a page doesn’t exist, display this functionality as part of the history layout.
Display Vertical Links/Names
The following verticals are common on SERP pages:
- All
- Images
- News
- Videos
- Maps
- Most SERPs display verticals below the search box
- A vertical name should appear as hyperlink text / button/ tab or as an icon that represents the vertical in a clear manner.
- There should be enough space between the verticals so it will be easy for the user to switch / navigate to any vertical site.
Show the Number of Search Results
- Show the number of search items available, so that users can decide on how long they want to spend looking through results.
- This is an optional element, but if exists, the number of the results shown on the page should be displayed on a separate line, in one of these places:
- Next to the verticals list
- Under the verticals list and above the 1st result
- Note: it doesn’t matter if the heading is in capital letters or not.
- For example: XX, XXX RESULTSvs. XX, XXX results
Search Ads
- Search Ads must be labeled! We have a list of recommended labels:
- Single Ad label:
- ‘Ad’
- ‘Sponsored Ad’
- ‘Sponsored result’
- Ads Block label:
- ‘Sponsored results’
- Single Ad label:
- in Single Ad label the Ad label should be shown next to each Ad.
Ad badge Recommendations Preferred heading text size, colors … No smaller than the Ad URL/description text size;Any color that stands out next to the Ad should work. It’s recommended that you run some A/B testing to discover which color works best for your users. Spacing between Ad badge and Ad URL Badge should be visually distinguished from the Ad URL
- In Ads Block labeling, the label should appear above the Ad Block:
Recommendations for Ads ‘Look & Feel’
Desktop
| Recommendations | |
| Ad label text size, color, background color | #006621, Ariel, Sans-serif 12-14px, normalIf no border/ BG – then not smaller than the Ad URL/description text size |
| Preferred Ad title text type, size, color | #1A0DAB, Ariel ,Sans-serif 18px, normalMouse hover mode: underline |
| Preferred URL text type, size, color | #006621, Ariel,Sans-serif 14 px, normal
Mouse hover mode: underline |
| Preferred description text type, size, color, | #545454, Ariel, Sans-serif 13px, normalLine height (space between 2 lines): 18px
|
| Preferred rating symbol color | Color range : yellow to orange; grey for ½ star |
| Preferred rating text color | Color range: yellow to orange |
| Preferred reviews color | If clickable, usually use same color as the Ad titleIf not clickable, user same color as the description, unbolded |
| Preferred enhanced site links text type, size, color | #1A0DAB, Ariel, Sans-serif 18px, normalMouse hover mode: underline |
| Preferred sub-links (site links) text type, size, color | #1A0DAB, Ariel, Sans-serif 13px, normalMouse hover mode: underline |
Mobile
| Recommendations | |
| Ad label text size, color, background color | #006621, Ariel, Sans-serif 10- 12px, normalIf no border/ BG – then not smaller than the Ad URL/description text size |
| Preferred Ad title text type, size, color | #1A0DAB, Ariel, Sans-serif 16px, normal |
| Preferred URL text type, size, color | #006621, Ariel, Sans-serif 12 px, normal |
| Preferred description text type, size, color | #545454, Ariel, Sans-serif 13px, normalLine height (space between 2 lines): 18px |
| Preferred sub-links (site links) text type, size, color, | #1A0DAB, Ariel, Sans-serif 13px, normal |
| Preferred rating symbol color | Color range: yellow to orange; grey for ½ star |
| Preferred rating text color | Color range: yellow to orange |
| Preferred reviews color | If clickable, usually use same color as the Ad titleIf not clickable, user same color as the description, unbolded. |
Web/Algo Search Results
- Algo/Organic results labeling is optional
- The user’s search term must be in bold
- # of Algo results per page should be up to 10
Recommendations for Algo ’Llook & Feel’
| Recommendations | |
| Preferred title text type, size, color | #1A0DAB, Ariel, Sans-serif 18px, normalMouse over underline |
| Preferred URL text type, size, color | #006621, Ariel, Sans-serif 14 px, normalMouse hover mode: underline |
| Preferred description text type, size, color, |
#545454, Ariel, Sans-serif 13px, normalLine height (space between 2 lines): 18px Mouse hover mode: underline |
| Preferred rating symbol color | Color range: yellow to orange ; grey for ½ star |
| Preferred rating text color | Color range: yellow to orange |
| Preferred reviews color | Not very common to be included on an Algo result.If exists and clickable: use same result title color and same text size as the description |
| Preferred sub-links (site links) text type, size, color | #1A0DAB, Ariel, Sans-serif 13px, normalMouse hover mode: underline |
Integrating Vertical Results within Algo Results
- A vertical result should contain a heading that indicates which types of results they are:
| Vertical | Heading options | Hyper link text options (respectively to heading) |
| Images |
1. Images of [search term]2. In images 3. [Search term] – Images Results |
1. See more images of [Search term]2. More results in images 3. More [Search term] images |
| News |
1. News about [search term]2. In news 3. [Search term] News |
1. See more images of [Search term]2. More results in news 3. More news for [Search term] |
| Videos |
1. Videos of [search term]2. In videos 3. [Search term] – Videos Results |
1. See more videos of [Search term]2. More results in videos 3. More [Search term] videos |
- It is common practice to display 1 line of verticals results (e.g. images/ videos / news) and then a hyperlink to navigate to the vertical’s site page
- To highlight the vertical results section, divide it from other results with a separator line from top and bottom. (optional)
Images content
News content
Videos content
Related Searches
- ‘Related searches’ are usually shown at the bottom of the page (desktop and mobile) and may also appear on the sidebar (desktopC only).
- The standard in search results pages is to present Related Searches in the mainline in 2 columns and in 1 column on the side bar
- It is common to highlight /bold the additions and not the search term itself
- Number of related searches: up to 8, both on mainline and side bar (if exists)
- You may also add underline to emphasize the related searche items (optional)
| Recommendations | |
| Preferred title text type, size, color[e.g. ‘Search Related to’] | #888888, Ariel, Sans-serif 18px, normal |
| Preferred Search Term text type, size, color | #66666, Ariel, Sans-serif 18 px, bold |
| Preferred description text type, size, color, |
#545454, Ariel, Sans-serif 13px, normalLine height (space between 2 lines): 18px Mouse hover mode: underline |
| Preferred reviews color | If clickable: use same result title color and same text size as the descriptionLine height : 26 PX |
Videos content
Other Content offering
Product ads
You may add other search results from your own vendors. Such offers could be third party Product Ads from Amazon, eBay etc.
YouTube content
Wikipidia content
Bing Product Ads
Product ads are could be shown on desktop SERP both on the sidebar or on top.
Product ads are could be shown on mobile on the top.
Product ads usually include the following elements:
- Main heading
- Picture
- Title
- Price
- Advertiser’s name
- Rating (optional)
- # of reviews (option)
| Element | Recommendations |
| Heading- preferred text color, text size, alignment | Same as the Search Ad title |
| Label | ‘Ads’ or ‘Sponsored’#888888, Ariel, Sans-serif 12 px, bold |
| Item’s name :text color, font type, font size | #1A0DAB, Ariel, Sans-serif 13 px, normal |
| Item’s price :text color, font type, font size | #333333, Ariel, Sans-serif 13 px, bold |
| Advertiser details: color, font type, font size | #006621, Ariel, Sans-serif 13 px, normal |
| Image size | 86X 86 px |
| # of items | Flexible, depends on # of results returned by the API, and the column width |
| Reviews | Same as in any other Search /Text Ad with reviews |
| Hover text behavior | Title and image – on hover there is a bubble with expanded title (see image below this table) |
| Spacing between items | Depends on the column width |
| Vertical separator line between items | #E8E8E8, 1 px, solid |
Paging
At the bottom of the page, please show navigation options for the next pages.
Footer PageLinks
Any SERP page must include the following page links: About, Contact Us, Privacy Policy and Terms of Use. A ‘Settings’ link is optional.
Design Error Messaging
It is highly recommended to use friendly language when you notify your users that no results were found.
Consider using one of these options:
Sorry, we couldn’t find any result matching you [KW].
———————————————————————-
Sorry, no results were found for this search term.
Search tips:
- Check the spelling
- Search for simpler, shorter terms
- Search for something less specific
Localization
If your target audience is from a non-US-EN market, it is highly recommended to localized the experience. Make sure to translate all the labels, messaging, & headings and remember to present the numbers in the current number formatting, in accordance with the market/ language.
Found this document useful?
We encourage you to share your feedback regarding this documernt with your Account Manager.
Homepage Considerations
- Search box:
- Position –
- Place a search box in a central position. It should be the most important element on the page. Usually it would be places at the top third part of the page and horizontally centered.
- Keep the homepage clean from distractions. if there are other elements on the page, keep enough white space (empty space) around the search box.
- Call to action – The search box should be displayed prominently and should include a call-to-action, such as a ‘search button’ or a magnifying glass icon. A button with a background color is recommended. Make sure that the button is sized appropriately, so that users will not have to point their mouse or tap their finger with perfect precision. A larger, clickable area makes it easier to both spot and click the search box. Search action should be enabled either from clicking on the search button or from using the ‘Enter’ command in the keyboard.
- Search box size –
- Desktop – Search box size should be no less than 600 pixels
- Mobile – Search box size should meet any device screen size and resolution that your site supports. Also landscape mode should be considered.
- Helper texts and tooltips – These can be used as an eye catcher, when the input text does not include a search term.
- Recommended texts alternatives –
- ‘Search’
- ‘Search the web’
- ‘Enter your search term
- It can be also presented as a question, e.g.: ‘What would you like to search today?’
- Search click action – When a user performs a search, the following should happen:
- Search term should remain visible inside the Serp search box, which will allow the user to relate the results to the search term.
- The search term in the search Url should be replaced with any new search term that the user generated.
- Search verticals – If you want to add search verticals (Image search, Video search, etc..) it is better to position them at the top right or the top left of the page.
- ‘Powered by Bing’ – It is possible to add the ‘Powered by Bing’ logo. It is recommended to position the logo to the right side of the search box or under it. Always use the full Bing logo (The b + the Bing name). It is not allowed to use the b without the Bing name.
- Position –
- Publishers’ brand:
- Your brand could appear in any of the following places on the search home page:
- Above the search box
- On the page header
- The brand cannot hide or overlap the search box in any way.
- Your brand could appear in any of the following places on the search home page:
