diff --git a/src/index.ts b/src/index.ts index 8e5087f..f91886c 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. */ @@ -164,12 +169,20 @@ export type LayerDefinition = { timing: EffectTiming, }; +/** + * On crawlers, the glitch effect is disabled for SEO optimization. + */ +const crawlerMockFunction = () => { + console.log('This feature is not available in the browser'); +}; + /** * Get best-looking default options for most elements for a given playMode. */ 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 }, @@ -549,6 +562,15 @@ const glitch = (elOrSelector: GlitchableElement = '.powerglitch', userOptions: G // 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 && /bot|google|baidu|bing|msn|teoma|slurp|yandex|facebookexternalhit|facebot/i.exec(navigator.userAgent)) { + return { + containers: [], + startGlitch: crawlerMockFunction, + stopGlitch: crawlerMockFunction, + }; + } + // Find elements to glitch let elements: HTMLElement[] = []; if (typeof elOrSelector === 'string') {