256_cta-background.webp

384_cta-background.webp

640_cta-background.webp

750_cta-background.webp

828_cta-background.webp

thumbnail_cta-background.webp

cta-background.webp

Daar hebben wij de oplossing voor

Wilt u efficiënter werken? 

1080_background.webp

1200_background.webp

256_background.webp

384_background.webp

640_background.webp

750_background.webp

828_background.webp

thumbnail_background.webp

background.webp

INNOVATION THROUGH SOFTWARE: LEAN, CLOUD, DELIVERY

SOFTWARE, CLOUD

1080_zen-logo-white.webp

1200_zen-logo-white.webp

256_zen-logo-white.webp

384_zen-logo-white.webp

640_zen-logo-white.webp

750_zen-logo-white.webp

828_zen-logo-white.webp

thumbnail_zen-logo-white.webp

zen-logo-white.webp

ZEN Software

1080_zen-logo-black.webp

1200_zen-logo-black.webp

256_zen-logo-black.webp

384_zen-logo-black.webp

640_zen-logo-black.webp

750_zen-logo-black.webp

828_zen-logo-black.webp

thumbnail_zen-logo-black.webp

zen-logo-black.webp

Agile Analytics

Full Stack Development

Tech Consultancy

ZEN DevOps Accelerator

Content and Commerce at any scale

ZEN Cloud Landing Zone

What We Do

About us

News

Contact

Success! You`ve been added to our email list.

Subscribe to our email list and we will keep you updated on DevOps and ZEN Software News and Trends

Subscribe to ZEN Software's  newsletter

Add lightning fast search to your React/Nextjs site

256_da701ab6-0a44-4ccf-ab88-d722fd632dfb.webp

384_da701ab6-0a44-4ccf-ab88-d722fd632dfb.webp

640_da701ab6-0a44-4ccf-ab88-d722fd632dfb.webp

thumbnail_da701ab6-0a44-4ccf-ab88-d722fd632dfb.webp

da701ab6-0a44-4ccf-ab88-d722fd632dfb.webp

Creating a search feature on your website can significantly improve the user experience. A well-designed search bar can be a powerful tool for increasing engagement and conversion. In this article, we will focus on adding an easily implemented and fast search feature to your website with the help of Google's Custom Search API.

Creating a search feature on your website can significantly improve the user experience. A well-designed search bar can be a powerful tool for increasing engagement and conversion. In this article, we will focus on adding an easily implemented and fast search feature to your website with the help of Google's Custom Search API.

Several options are available for adding search functionality to your website, including using a third-party search engine, integrating a search bar directly into your website, or using a search API. Each option has its own pros and cons, but using a search API like Google's Custom Search API can offer several advantages over other methods.

One of the key benefits of using Google's Custom Search API is that it provides a well documented and easy to implement search on your website. The API is easily implemented in your nextjs code while giving you full control over the design and appearance of your search bar and results pages. 

Another benefit of using Google's Custom Search API is that it is highly scalable, making it ideal for websites of all sizes and types. Whether you run a small personal blog or a large e-commerce site, the API can easily be integrated into your website to provide a customized search experience for your visitors.

This way, by using Google's Custom Search API, you can take advantage of Google's powerful search algorithms, customizable results pages, and scalable platform to deliver the best possible search experience for your visitors without spending a ton of time and effort on developing your custom search solution.

In the next sections of this article, we will walk through the steps involved in integrating Google's Custom Search API into your website.

Enabling a Programmable Search Engine & setting up API

Regarding using Google search JSON API, as enlisted in the documentation, we will need the Programmable Search Engine ID (ID of the Engine to perform the search) and **API key** to identify our application.

To enable Programmable Search Engine, you should sign in to the [Control Panel](https://programmablesearchengine.google.com/controlpanel/create) and click on the ‘Add’ button.

e932bd12-e6c4-401f-8089-685d0d56c22a.webp

The setup is simple, all we need to do is to name our search engine and set the scope of the search. Our goal is to make the search for our website only, so we should pish ‘Search specific sites pr pages’ and add all pages of our website domain in the ‘What to search?' block.

That`s all, it really is that easy! now we can press ‘Create’.

570036d6-7ac5-4f64-8741-6eaa3d70b8f7.webp

After creating an engine, it`ll suggest a default Search element HTML, which you can use on your website. But our goal is to create a custom frontend while using Google Search Engine API. So we will need only **Programmable Search Engine ID**, which you can find in the overview of your Search Engine

The next step is to create an API key.   
To do this, go to the [Google Cloud console](https://console.cloud.google.com/), pick the project you’d like to create a search for, and then go to the API & Services => Credentials => Create Credentials => API key.

19fd5fa1-3aaa-4ad0-8066-a434d9289ed7-_1_.webp

The key is created; let`s edit it: rename & add API restrictions, allowing :
- Cloud Translation API
- Custom Search API   

As Custom Search API does not detect language automatically and searches in English by default, we will also need the Cloud Translation API to detect the language of the search query, translate it and make a search request with the translated query as well.

If you don`t have these options in the API restrictions list, it means that you should enable said APIs first. 
You can enable APIs in API & Services => Enabled APIs & Services=> Enable APIs & Services.

 

Done! Now we have all the creds to use the Google Search Engine API endpoint on our website:

For translating search queries, we will be using [translate ](https://cloud.google.com/translate/docs/reference/rest/v2/translate)and [detect](https://cloud.google.com/translate/docs/reference/rest/v2/detect) endpoints of Cloud Translation API.


Creating a custom front-end for the Search Flow

There are 3 basic elements we need to implement search:
- the **search bar element**, which will be available on every page of the website;
- the **search results page**, which will display search results;
- the **handleSearch() function**, which will call an API and return search results.


We won't be focusing on the first two, as you have full freedom to design and implement a completely custom search bar & results page depending on your goals.

One of the main pros of using Google Search Engine API though is that you can create custom logic for your search function.

For example, the drawing below represents the logic of the handleSearch() function we've developed.

handlesearch.webp

In conclusion, integrating Google's Custom Search API into your website can provide visitors with a powerful and efficient search solution. The API offers several key benefits, including the simplicity of implementation, the ability to take advantage of Google's powerful search engine, the speed of search results, and the ability to customize the front-end and create custom search logic.

While there are some limitations to using Google's Custom Search API, such as the fact that it is based on the basic Google search engine and does not allow for further improvement of its work, these limitations are outweighed by the many benefits of the API. If you are looking for a fast, reliable, and customizable search solution for your website, Google's Custom Search API is absolutely preferred!

We’re confident we can supercharge your software operation. Our unique products and services will delight you.

Let’s talk!

 Implementing SEO meta tags on a Next.js/Strapi website

256_Новый проект (6).webp

384_Новый проект (6).webp

640_Новый проект (6).webp

thumbnail_Новый проект (6).webp

Новый проект (6).webp

Having a good SEO is critical for your website. An increasingly important part of that means having good meta tags for pages and articles on your site. We have an extremely scalable setup at ZEN Software using a headless CMS, Cloud Platform and a world-class content delivery network. Adding good SEO to a CaaS setup in 5 easy steps!

I set a couple of goals for this project, providing good basics for the site SEO:  

1. Successfully set up SEO meta tags for our website
2. Enable link previews when sharing articles and pages on ‘the socials’ 
   - Facebook, 
   - Twitter, 
   - LinkedIn

Our website’s technology stack and frameworks consist of the following:

- Frontend - Next.js project with [dynamic routes](https://nextjs.org/docs/routing/dynamic-routes) & [optional catch of all routes](https://nextjs.org/docs/routing/dynamic-routes#optional-catch-all-routes).
- Content Management System (CMS) - Strapi.io 

In Strapi Content-Types Builder create an SEO component. This component must contain the following fields:

- metaTitle (title of the page - the most essential SEO tag for SEO);
- metaDescription (description of the page content)
- canonicalUrl (helps to prevent duplicate content issues in SEO)
- sharedImage (image, which will be displayed as a preview, when you share the link to the page)

image-20220829-140213.webp

Add your SEO component to all of your Collection Types (like pages, posts, etc.)

image-20220829-141020.webp

Deploy Strapi changes.

**Done!** 

Now you can fill in the basic SEO information to your Strapi pages.

Step 2. Create component  for meta tags on the Next.js front end

At first for including meta tags on the front end we tried to use the [NextSeo](https://www.npmjs.com/package/next-seo?activeTab=readme) plugin. But it turned out that it doesn`t work correctly with Dynamic routes and doesn’t pre-render correct meta tags for links socials previews.


Therefore we went with writing the SEO component in Next.js. Important:  to add tags in headers it`s highly recommended to use a special [Next.js head component](https://nextjs.org/docs/api-reference/next/head).

We include the Seo component in the **[[…slug]].js** file with the following props:

- metadata - data from Strapi page data;
- pageContext - from Strapi page data;
- headerTitle - this is formatted **metadata.metaTitle**;

image-20220829-142539.webp

The Seo component will be a Next.js <Head> component, which includes all the meta tags:

image-20220829-143128.webp

We`ll see which tags we need to add in the next step.

The list of the tags you definitely want to add to your page:

  1. **title**: the title tag is the most important one. We get data for it from Strapi metaTitle field.


  2.  **description**: data from Strapi metaDescription field.

  3. **canonical**: canonical URL for your page from Strapi:

**What about keywords?**

There are meta tag 'keywords', which were used to set keywords for the page in the past. Bot at least since 2009 Google [doesn`t use it anymore](https://developers.google.com/search/blog/2009/09/google-does-not-use-keywords-meta-tag), so you can skip it.

**The Open Graph protocol** enables any web page to become a rich object in a social graph. It allows you to control your webpage's appearance on sites like Facebook, Twitter, etc.

You can find the full list of tags provided by Open Graph [here](https://ogp.me/).

Let`s add the most essential ones to our page:

  1. **og:title**: same as the general title meta tag. The value will appear as the title for your link`s preview on Facebook & LinkedIn.

  2. **og:description**: same as the general description meta tag. The value will appear as a description for your link`s preview on Facebook & LinkedIn.

  3. **og:url**: canonical URL for your page from Strapi:

  4. **og:image**: preview image for your link's preview on Facebook & LinkedIn. In our case, if *sharedImage* in Strapi is missing, we use the article's preview image instead of the default image


  5.  **og: locale**: the language of the page. Should be passed in the standard format *'en_GB'*. You can get your page locale from **pageContext** prop.

  6. **og:type**: *'website'* by default. but if your site has some kind of news or blog post, you might want to set its type as an *'article'*.

For pages with the type 'article' Open Graph offers additional tags:

- ``` article:published_time``` - datetime - When the article was first published.
- ``` article:modified_time```  - datetime - When the article was last changed.
- ``` article:expiration_time```  - datetime - When the article is out of date after.
- ``` article:author```  - profile array - Writers of the article.
- ``` article:section```  - string - A high-level section name. E.g. Technology
- ``` article:tag```  - string array - Tag words associated with this article.


Unlike Facebook or Linked in, Twitter uses its tags to display link previews. Don`t forget to add them as well. You can find a full list of meta tags on the[ Twitter Developer Platform](https://developer.twitter.com/en/docs/twitter-for-websites/cards/overview/markup).

image-20220829-152417.webp

In some cases, you can find that even after adding all the required tags, previews in socials are still not displayed.

That might be because crawlers of these socials are not able to crawl your site yet. To fix this, allow Twitter and FB crawlers in your **robots.txt** file:

Now you can deploy your site and check meta tags both in your browser`s DevTools and [metatags.io](https://metatags.io/)

Don’t forget to celebrate!