What do you think the best practice is to include a description of a Lottie inside a link block? The audit panel keeps flagging empty link blocks stating that a link block needs descriptive text. Adding a description to a Lottie still triggers the audit panel to assume the link block is empty, as it does not pull the description on a Lottie as an ALT description.
What would be the best SEO practice when you want a link block to act as a wrapper with a lottie element inside? How would you create a clickable link on a Lottie if you removed the wrapper?
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.
