Hey man, for SEO best practices with Lottie animations inside a link block, there are a couple of strategies you can use in Webflow.
• Descriptive Link Text: Even if the link block contains a Lottie animation, adding descriptive text within the link block can help. This text can be visually hidden but still accessible to screen readers and search engines. Use CSS to visually hide the text (off-screen) while keeping it in the HTML.
• ARIA Labels and Roles: Use ARIA attributes to provide additional context. For example, aria-label
can describe the purpose of the link, and role="img"
can be used for the Lottie animation. This improves accessibility and SEO as it gives screen readers and search engines more information about the link’s function and content.
• SEO-Friendly File Names for Lotties: Name your Lottie files descriptively. Search engines can crawl file names, so a descriptive, keyword-relevant file name can be beneficial.
• Alt Text for Images: If your Lottie animation is purely decorative, consider using an image with alt text as a fallback. This ensures that the purpose of the link is conveyed even if the Lottie animation isn’t recognized.