Limit Link Previews to HTML container(s)
You can specify HTML elements(containers) of the webpage where you want link previews to show up.
Your webpage HTML markup usually looks like this:
To enable link previews only inside "main content", add .main-content CSS class to the "Limit to HTML container" settings. This will prevent link previews from appearing in header and footer of your website.
Supported CSS selectors: class, type, id, attribute
Best Practice:
Choose a parent container element, instead of targeting individual <a> link elements
You can add multiple HTML containers
Instead of targeting generic HTML classes, add unique HTML attribute for container where you want link previews to appear, e.g. <div data-linkz-ai-container>...</div>, then add the following CSS selector: div[data-linkz-ai-container] to "Limit Link Previews to HTML container(s)" setting
Your webpage HTML markup usually looks like this:
<body>
<div class="header">...</div>
<div class="main-content">...</div>
<div class="footer">...</div>
</body>To enable link previews only inside "main content", add .main-content CSS class to the "Limit to HTML container" settings. This will prevent link previews from appearing in header and footer of your website.
Supported CSS selectors: class, type, id, attribute
Best Practice:
Choose a parent container element, instead of targeting individual <a> link elements
You can add multiple HTML containers
Instead of targeting generic HTML classes, add unique HTML attribute for container where you want link previews to appear, e.g. <div data-linkz-ai-container>...</div>, then add the following CSS selector: div[data-linkz-ai-container] to "Limit Link Previews to HTML container(s)" setting
Updated on: 06/01/2023
Thank you!