From 9ee1871fd188e8d9c61d42334976f3ec0c563fe2 Mon Sep 17 00:00:00 2001 From: 7PH Date: Wed, 23 Oct 2024 17:47:48 +0200 Subject: [PATCH] Prevent crawlers from indexing glitched content --- src/index.ts | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) diff --git a/src/index.ts b/src/index.ts index 8e5087f..8af112f 100644 --- a/src/index.ts +++ b/src/index.ts @@ -12,6 +12,11 @@ export type PlayModes = 'always' | 'hover' | 'click' | 'manual'; * Custom options for the glitch animations. */ export type PowerGlitchOptions = { + /** + * Whether to avoid running the glitch effect on crawlers for SEO optimization. + */ + optimizeSeo: boolean, + /** * Html to glitch. If not provided, will use the elements themselves. If provided, all elements should have an `innerHTML` property. */ @@ -170,6 +175,7 @@ export type LayerDefinition = { const getDefaultOptions = (playMode: PlayModes = 'always'): PowerGlitchOptions => { return { playMode, + optimizeSeo: true, createContainers: true, hideOverflow: false, timing: playMode === 'always' ? { duration: 2 * 1000, iterations: Infinity } : { duration: 250, iterations: 1 }, @@ -545,10 +551,15 @@ export type GlitchResult = { * @param elOrSelector What to glitch. Can be a query selector, a list of HTMLElement, an HTMLElement or a NodeList. * @param userOptions Optional glitch customization options. */ -const glitch = (elOrSelector: GlitchableElement = '.powerglitch', userOptions: GlitchPartialOptions = {}): GlitchResult => { +const glitch = (elOrSelector: GlitchableElement = '.powerglitch', userOptions: GlitchPartialOptions = {}): GlitchResult | null => { // Fix options with defaults const options: PowerGlitchOptions = mergeOptions(getDefaultOptions(userOptions.playMode), userOptions); + // Do NOT glitch if SEO optimization is enabled and the user agent is a bot + if (options.optimizeSeo && navigator.userAgent.match(/bot|google|baidu|bing|msn|teoma|slurp|yandex|facebookexternalhit|facebot/i)) { + return null; + } + // Find elements to glitch let elements: HTMLElement[] = []; if (typeof elOrSelector === 'string') {