Highlight
Optimizely Graph returns highlighted snippets of your content for a GraphQL query so that visitors see the matching text in context and decide quickly whether the result is the one they want. A snippet is a short text fragment that contains the words you searched for, also known as key word in context (KWIC).
Snippets help visitors with the following tasks:
- Summarize the context by presenting only the relevant content.
- Improve the experience on a page.
- Display relevant content on small screens, such as mobile devices, or in audio-only contexts, such as voice assistants.
- Increase engagement by presenting the most relevant information.
Snippets make it easier for visitors to scan results, read matching context, and click through to the full content, which raises conversions on search.
Enable highlighted snippets in Optimizely Graph
Highlighted snippets work best for fields with a lot of content, such as paragraphs or pages of text. Optimizely Graph supports retrieving highlighted snippets on searchable stringsearchable string fields that support full-text searchfull-text search. To display highlighted snippets instead of full field content, use the highlight input argument on searchable fields.
đ Note When highlight is enabled for _fulltext and matching in the where function is applied on other search terms in searchable fields except _fulltext, those search terms are also highlighted as part of _fulltext. The reason is that _fulltext is a special field that consists of matching on all searchable fields, so the highlighted terms are a union of all searchable fields.
Example:
query MyQuery {
ProductPage(
locale: en
where: {
MainBody: { match: "aromatic evergreen shrub" }
_fulltext: { match: "aromatic" }
}
) {
total
items {
MainBody(highlight: { enabled: true })
_fulltext(highlight: { enabled: true })
}
}
}This returns the following highlighted snippets:
{
"data": {
"ProductPage": {
"total": 1,
"items": [
{
"MainBody": "Rosemary is an <em>aromatic</em> <em>evergreen</em> <em>shrub</em> with leaves similar to hemlock needles.",
"_fulltext": [
"Rosemary is an <em>aromatic</em> <em>evergreen</em> <em>shrub</em> with leaves similar to hemlock needles."
]
}
]
}
} To return snippets, use the whereï»ż argument to do a full-text search with match or contains as the operatoroperator. Only fields with matching items in the where return highlighted snippets. The _fulltext field also returns highlighted snippets. Optimizely Graph strips any HTML tags from the snippets and keeps only the highlight tags, so downstream code can process the snippets without parsing markup.
đ Note Optimizely Graph does not support highlighting with matches on only semantic searchï»ż.
- If a match exists because of a semantic match, Optimizely Graph returns the original value instead.
- If literal matches exist with semantic search, those literal matches are highlighted.
In the following example, a full-text search on the MainBody field is completed by matching on taylor avicii. In the MainBody, use the highlight argument and set enabled to true.
{
BiographyPage(locale: sv, where: { MainBody: { match: "taylor avicii" } }) {
total
items {
MainBody(highlight: { enabled: true })
}
}
}This returns the following example response:
{
"data": {
"BiographyPage": {
"total": 2,
"items": [
{
"MainBody": "<em>Avicii</em>, egentligen Tim Bergling, ursprungligen Lidén, född 8 september 1989 i Oscars församling i ... <em>Avicii</em> hade vid den tiden blivit en internationellt uppmÀrksammad DJ/musikproducent och som en ... <em>Avicii</em> fick under sitt liv tvÄ Grammynomineringar: \"Sunshine\" med David Guetta (2012) samt för \"Levels ... <em>Avicii</em> begick sjÀlvmord i Muskat i Oman 2018. Han var dÄ 28 Är. ... <em>Avicii</em> Àr gravsatt pÄ Hedvig Eleonora kyrkogÄrd i Stockholm."
},
{
"MainBody": "<em>Taylor</em> Alison Swift, född 13 december 1989 i Reading i Pennsylvania, Àr en amerikansk popsÄngare och ... Den var den första av fem singlar frÄn hennes debutalbum <em>Taylor</em> Swift, vilket slÀpptes i slutet av 2006"
}
]
}
},
"extensions": {
"correlationId": "7febf5eb-329d-4971-a88d-e1c6495c4bce",
"cost": 24,
"costSummary": [
"BiographyPage(24) = limit(20) + fields(1) + basicFilter(1)*2 + highlight(1)"
]
}
}Customize highlights
Override the markup that wraps each matched term so the snippets render with your own styling, such as italics or a brand-specific span. This is useful when the default <em> tags conflict with the host page styles.
Configure the format of the highlighted terms in the snippets with the arguments startToken and endToken. The default values are <em> for startToken and </em> for endToken.
đ Note When highlight is enabled for search phrases that contain punctuation, the punctuation characters are not included within the startToken and endToken. See the following example:
query MyQuery {
SnippetsPage(
locale: ALL
where: { p_String: { contains: "One UI 6-1." } }
) {
total
items {
p_String (highlight: {enabled: true})
}
}
}The snippet is:
{
"data": {
"SnippetsPage": {
"total": 1,
"items": [
{
"p_String": "Samsung Galaxy S24 Ultra: <em>One</em> <em>UI</em> <em>6</em>-<em>1</em>."
}
]
}
}
}For the _fulltext field, the token customization configuration on the regular content field has precedence over any customization on _fulltext. The reason is that _fulltext is a special field that is a union of all searchable fields. See the following example, where the field LongString does not have any token customization configured, so the default tokens are used for its value in fulltext because the LongString configuration has precedence:
query MyQuery {
TestPageType(
where: { _fulltext: { contains: "homeostatic" }, LongString: {match: "homeostasis"} }
) {
total
items {
_fulltext(highlight: {enabled: true, startToken: "<st>", endToken: "<en>"})
LongString(highlight: {enabled: true})
}
}
}The snippets are as follows:
{
"data": {
"TestPageType": {
"total": 1,
"items": [
{
"_fulltext": [
"many variables, such as body temperature and fluid balance, being kept within certain pre-set limits (<st>homeostatic<en>",
"<st>Homeostasis<en>",
"Each of these variables is controlled by one or more regulators or <st>homeostatic<en> mechanisms, which together",
"n biology, <em>homeostasis</em> (British also homoeostasis; /hÉmioÊËsteÉȘsÉȘs, -miÉ-/) is the state of steady internal"
],
"LongString": "n biology, <em>homeostasis</em> (British also homoeostasis; /hÉmioÊËsteÉȘsÉȘs, -miÉ-/) is the state of steady internal"
}
]
}
}
}In the following example, a full-text search is completed on two fields using the Boolean operatorsBoolean operators: MainBody and Name. Highlighting is enabled on these two fields in the projection in items. For MainBody, the highlighted keywords are wrapped in the italic <i> tags. Name is any matching keyword that starts with **. This lets you define a snippet as a pure text fragment.
{
BiographyPage(
locale: sv
where: {
_or: [
{ MainBody: { match: "taylor avicii" } },
{ Name: { match: "taylor avicii" } }
]
}
) {
total
items {
MainBody(highlight: { enabled: true, startToken: "<i>", endToken: "</i>" })
Name(highlight: { enabled: true, startToken: "**" })
}
}
}The following is an expected example response. Here, the snippets were highlighted with different start and end tokens. In Name, the snippet is **Taylor</em> Swift because the endToken was not defined, so Optimizely Graph uses </em> by default.
{
"data": {
"BiographyPage": {
"total": 2,
"items": [
{
"MainBody": "<i>Taylor</i> Alison Swift, född 13 december 1989 i Reading i Pennsylvania, Àr en amerikansk popsÄngare och ... Den var den första av fem singlar frÄn hennes debutalbum <i>Taylor</i> Swift, vilket slÀpptes i slutet av 2006",
"Name": "**Taylor</em> Swift"
},
{
"MainBody": "<i>Avicii</i>, egentligen Tim Bergling, ursprungligen Lidén, född 8 september 1989 i Oscars församling i ... <i>Avicii</i> hade vid den tiden blivit en internationellt uppmÀrksammad DJ/musikproducent och som en ... <i>Avicii</i> fick under sitt liv tvÄ Grammynomineringar: \"Sunshine\" med David Guetta (2012) samt för \"Levels ... <i>Avicii</i> begick sjÀlvmord i Muskat i Oman 2018. Han var dÄ 28 Är. ... <i>Avicii</i> Àr gravsatt pÄ Hedvig Eleonora kyrkogÄrd i Stockholm.",
"Name": "Tim Bergling"
}
]
}
},
"extensions": {
"correlationId": "0d92084d-488b-420d-b37d-11605482a6a2",
"cost": 28,
"costSummary": [
"BiographyPage(28) = limit(20) + fields(2) + basicFilter(2)*2 + highlight(2)"
]
}
}Synonyms and highlights
Combine synonymssynonyms with highlighting so that a query for a synonym still highlights the actual keyword in the result, which keeps the visual cue aligned with the indexed content rather than the synonym the visitor typed.
When a synonym matches, Optimizely Graph highlights the actual keyword that is equivalent to the synonym. In the following example, the Swedish content is stored with the bi-directional synonym Taylor Swift, Queen. In other words, Taylor Swift and Queen are equivalent.
{
BiographyPage(
locale: sv
where: { _fulltext: { match: "queen", synonyms: ONE } }
) {
total
items {
_fulltext(highlight: { enabled: true })
}
}
}The query then retrieves the following highlighted snippets:
{
"data": {
"BiographyPage": {
"total": 1,
"items": [
{
"_fulltext": [
"<em>Taylor</em> <em>Swift</em>",
"<em>Taylor</em> Alison <em>Swift</em>, född 13 december 1989 i Reading i Pennsylvania, Àr en amerikansk popsÄngare och ... Den var den första av fem singlar frÄn hennes debutalbum <em>Taylor</em> <em>Swift</em>, vilket slÀpptes i slutet av 2006"
]
}
]
}
},
"extensions": {
"correlationId": "9cb8162b-3b57-4984-8dd6-bef62a33a4b1",
"cost": 26,
"costSummary": [
"BiographyPage(26) = limit(20) + fields(1) + basicFilter(2)*2 + highlight(1)"
]
}
}More examples
The following examples show how Optimizely Graph returns snippets for combined _fulltext and field-level queries, including when highlighting is requested on all fields at once.
Optimizely Graph returns snippets when the where clause matches the projection in items and highlight is enabled on the projection field. Consider the following query:
{
BiographyPage(locale: sv, where: { _fulltext: { match: "taylor avicii" } }) {
total
items {
_fulltext(highlight: { enabled: true })
MainBody
Name
}
}
}It returns the following response:
{
"data": {
"BiographyPage": {
"total": 2,
"items": [
{
"_fulltext": [
"<em>Avicii</em>",
"<em>Avicii</em>, egentligen Tim Bergling, ursprungligen Lidén, född 8 september 1989 i Oscars församling i ... <em>Avicii</em> hade vid den tiden blivit en internationellt uppmÀrksammad DJ/musikproducent och som en ... <em>Avicii</em> fick under sitt liv tvÄ Grammynomineringar: \"Sunshine\" med David Guetta (2012) samt för \"Levels ... <em>Avicii</em> begick sjÀlvmord i Muskat i Oman 2018. Han var dÄ 28 Är. ... <em>Avicii</em> Àr gravsatt pÄ Hedvig Eleonora kyrkogÄrd i Stockholm.",
"Tim Bergling"
],
"MainBody": "<p>Avicii, egentligen Tim Bergling, ursprungligen LidĂ©n, född 8 september 1989 i Oscars församling i Stockholm, död 20 april 2018 i Muskat i Oman, var en svensk discjockey, musiker, remixare, lĂ„tskrivare samt musikproducent. Flera musikpublikationer anger honom som en av de DJ:ar som populariserade den elektroniska musiken i början av 2010-talet och Ă„ren 2011â2015 rankades han följdriktigt kontinuerligt pĂ„ plats 3â7 pĂ„ DJ Mag:s lista över vĂ€rldens 100 bĂ€sta DJ:ar.</p><p>Han inledde sin karriĂ€r vid 16 Ă„rs Ă„lder genom att lĂ€gga upp remixer av elektronisk musik pĂ„ internetforum, vilket till sist ledde till ett skivkontrakt. Han gick Ăstra reals gymnasium. Genombrottet kom 2011 med lĂ„ten \"Levels\", som blev en stor internationell hit, och följdes 2013 av debutalbumet True som nĂ„dde topp 10-placeringar i fler Ă€n femton lĂ€nder och blev etta i Australien, Sverige och Danmark samt pĂ„ Hot Dance Club Songs i USA. Albumet innehöll singeln \"Wake Me Up\" som kom att bli hans största hitlĂ„t dĂ„ den toppade de flesta listorna i Europa, lĂ„g 14 veckor i rad pĂ„ Billboards lista för dans-/elektronisk musik och under en period var den mest spelade lĂ„ten pĂ„ Spotify.</p><p>Avicii hade vid den tiden blivit en internationellt uppmĂ€rksammad DJ/musikproducent och som en av de största inom genren elektronisk dansmusik gav han konserter runt om i vĂ€rlden. 2015 kom det andra studioalbumet, Stories, men Ă„ret dĂ€rpĂ„ meddelade han att han skulle sluta turnera av hĂ€lsoskĂ€l; dock Ă€mnade han fortsĂ€tta producera musik.</p><p>Bland Aviciis övriga lĂ„tar som rönt kommersiella framgĂ„ngar kan nĂ€mnas \"Waiting for Love\", \"Without You\", \"Lonely Together\", \"I Could Be the One\", \"Fade into Darkness\", \"Hey Brother\", \"Addicted to You\" och \"Silhouettes\". Avicii fick under sitt liv tvĂ„ Grammynomineringar: \"Sunshine\" med David Guetta (2012) samt för \"Levels\" (2013).</p><p>Avicii begick sjĂ€lvmord i Muskat i Oman 2018. Han var dĂ„ 28 Ă„r. Avicii Ă€r gravsatt pĂ„ Hedvig Eleonora kyrkogĂ„rd i Stockholm.</p>",
"Name": "Tim Bergling"
},
{
"_fulltext": [
"<em>Taylor</em> Swift",
"<em>Taylor</em> Alison Swift, född 13 december 1989 i Reading i Pennsylvania, Àr en amerikansk popsÄngare och ... Den var den första av fem singlar frÄn hennes debutalbum <em>Taylor</em> Swift, vilket slÀpptes i slutet av 2006"
],
"MainBody": "<p>Taylor Alison Swift, född 13 december 1989 i Reading i Pennsylvania, Ă€r en amerikansk popsĂ„ngare och lĂ„tskrivare.</p><p>Swifts musikkarriĂ€r började i de tidiga tonĂ„ren och hon fick tidigt kontakt med musikindustrin. Vid 14 Ă„rs Ă„lder (2004) flyttade Swift till Nashville pĂ„ grund av sitt intresse för countrymusik.</p><p>I september 2006 gjorde hon debut pĂ„ Billboard-countrylistan med debutsingeln \"Tim McGraw\". LĂ„ten hamnade som bĂ€st pĂ„ sjĂ€tte plats. Den var den första av fem singlar frĂ„n hennes debutalbum Taylor Swift, vilket slĂ€pptes i slutet av 2006 och Ă„terlanserades 2007. Albumet har enligt RIAA uppnĂ„tt multiplatina tre gĂ„nger och lĂ„g pĂ„ Billboard 200 under 275 veckor.</p><p>Snart hamnade ytterligare en av hennes debutsinglar, \"Teardrops On My Guitar\" (#2) pĂ„ en andraplats. Sex veckor senare toppade hennes \"Our Song\" listan samtidigt som hennes \"Picture to Burn\" (#3) lĂ„g pĂ„ en tredjeplats. Ănnu en förstaplats skulle senare intas med singeln \"Should've Said No\". Alla fem singlar frĂ„n hennes debutalbum hamnade pĂ„ Topp 40-hits pĂ„ Billboard Hot 100. Det gjorde Ă€ven \"Change\" frĂ„n AT&T TEAM USA Soundtrack.</p><p>Hennes andra album Fearless slĂ€pptes 11 november 2008. FrĂ„n det albumet heter den första singeln \"Love Story\", vilken som bĂ€st nĂ„dde plats fyra pĂ„ Billboard Hot 100.</p>",
"Name": "Taylor Swift"
}
]
}
},
"extensions": {
"correlationId": "31ae400f-f16c-4afc-b9cd-e1fe68fbf1d9",
"cost": 26,
"costSummary": [
"BiographyPage(26) = limit(20) + fields(3) + basicFilter(1)*2 + highlight(1)"
]
}
}When highlighting is enabled on all fields with the following query, the same response is returned as in the previous example:
{
BiographyPage(locale: sv, where: { _fulltext: { match: "taylor avicii" } }) {
total
items {
_fulltext(highlight: { enabled: true })
MainBody(highlight: { enabled: true })
Name(highlight: { enabled: true })
}
}
}