Handling Formatting of Links coming through in Google Custom Search Backends

Search Best Practices - Search Front-End
1

If you’ve seen HTML coming through in your GCSE links backends, here’s a solution!

  1. Disable the Show More/Show Less Functionality: If there is HTML in a field, you must remove the
    show more/show less functionality.     The risk is with the truncation, you’d cut off a closing tag (ex. </div>, </p>), which could break the page.
      // showMoreDetails: {
      //   showMoreLimit: 750, // Character count limit
      //   showMoreText: 'Show more', // Label when toggle will show truncated text
      //   showLessText: 'Show less' // Label when toggle will hide truncated text
      // },
  1. Add {{{ }}} to your Details section in your Handlebars Template: This ensures that the HTML is not escaped and actually interpreted on the page.
    {{{card.details}}}
  1. Add Styling: This is optional, but most typically we’ll see <b> tags coming through in the HTML. If you want those to appear as bold, add styling like the below:
  .HitchhikerLinkStandard-detailsText b {
    font-weight: bold;
  }

Post with any questions!

1 Like