Google Custom Search Engine on an AMP website

May 31, 2020

My friends provided some important feedback about my website, and one suggestion was to integrate search functionality. You have probably seen this on many websites where the search form lands on a custom Google Search page that only searches the given website. That is essentially the same as providing the site:csaba.page search qualifier for your search phrase on google.com.

These are the steps I took, mostly inspired by this blog post (see also this StackOverflow answer):

  1. Create a GCSE (Google Custom Search Engine) in the CSE (Custom Search Engine) Console as described in Google’s documentation on the matter, if you haven’t already done so.
  2. Remember your Search engine ID; it looks something like 013535696182405026577:kmxne16xdtx. You can see it on the Basics tab in the CSE Console, or if you are looking at the offered JavaScript code, it’s the cx variable. Note: you won’t be able to use that JavaScript code.
  3. Include amp-form in your head section where the other AMP includes are. See Figure 1 below.
  4. In the body, add an amp-form where you want to position the search input and style the form as needed; see Figure 2 below.
Figure 1:
<script async custom-element="amp-form" src="https://cdn.ampproject.org/v0/amp-form-0.1.js" crossorigin="anonymous"></script>
Figure 2:
<div>
  <form method="GET" class="search-form" action="https://www.google.com/cse" target="_top">
    <div class="search-form-inner">
      <input name="cx" type="hidden" value="013535696182405026577:kmxne16xdtx" />
      <input name="ie" type="hidden" value="UTF-8" />
      <input type="search" placeholder="Search..." name="q" required>
      <input type="submit" value="Go" class="search-button">
    </div>
  </form>
</div>

In my case, I positioned the search form in a new second sidebar that opens from the right side.

Other changes to my website were numerous but less notable:

  • The purple color was changed slightly to match one of the tiles.
  • I discovered that the hamburger icon (HTML equivalent symbol) does not render the same on Firefox as it does on Chrome. Therefore, I introduced SVG icons for the hamburger menu. I also needed to introduce an SVG icon for the search magnifying glass anyway.
  • Since I changed my permalink structure, I noticed in Google Search Console (for webmasters) that many search queries still refer to URLs with the old permalink pattern. I looked at two Jekyll packages: jekyll_alias_generator and jekyll-redirect-from. The latter looked active, so I added that plugin to my site and added redirect_from URLs to the post front matter.
  • I restructured the header to feature the QR code logo instead of simply my name. The toolbar menu in the header is more responsive and features more options based on the current form factor.
  • The rest of the changes were sizing and styling improvements.
Comments loading...