Adobe

How to Fix AEM Link Checker Issues with Broken Image Links

Users expect an engaging and quality experience on your site. If little things aren’t working correctly, they are likely to get frustrated and leave.
Link Checker is a useful tool within AEM that validates all external and internal links on content pages. It shows all invalid, expired, and pre-dated links broken in the authoring environment, as shown below:

In this post, I’m going to share an issue with AEM Link Checker that I ran into recently, and walk you through how I resolved it.

The Problem

I was working on a component that takes a page path from authoring dialog and displays an image with a link to the page. I was not able to edit the component whenever I selected any expired or pre-dated page path.

<a href="/any/expired/or/pre-dated/link">
    <img src="/valid/image/path">
</a>
Adobe - Content for Everyone
Content for Everyone

Companies that can quickly and consistently meet the demands of consumers are thriving in an era of infinite content. Learn about how to build fluid experiences for your omnichannel customers.

Get the Guide

Link checker marked the link as expired and added the prefix image of a broken link and opening brace. However, the suffix image of the closing brace was missing, as shown in the following image:

It also added some extra anchor elements with the expired link at the end of the component. Hence, the component was broken and not editable.

<div>
    <img src="/libs/cq/linkchecker/resources/linkcheck_o.gif" alt="expired link: /expired/link" title="expired link: /expired/link" border="0">
    <a href=”/expired/link”>
        <img src="/valid/image/path">
    </a>
</div>
<a href=”/expired/link”></a>
<a href=”/expired/link”></a>
<a href=”/expired/link”></a>

The Solution

I found a simple trick that helped me resolve this issue without affecting any other link validation. Simply disable the link checker for the image inside the expired link.

<a href="/expired/link">
    <img x-cq-linkchecker="skip" src="/valid/image/path">
</a>

Note: You can disable validation for any specific link by using either x-cq-linkchecker=”skip” or x-cq-linkchecker=”valid” property.

This added the closing brace for the broken image link and also removed the extra anchor tags at the end, as shown below:

<div>
    <img src="/libs/cq/linkchecker/resources/linkcheck_o.gif" alt="expired link: /expired/link" title="expired link: /expired/link" border="0">
    <a href=”/expired/link”>
        <img src="/valid/image/path">
    </a>
    <img src="/libs/cq/linkchecker/resources/linkcheck_c.gif" border="0">
</div>

An alternative solution is to disable link checking for the expired link itself. While this fixes the issue, it will no longer show the expired link as broken.

<a x-cq-linkchecker="skip" href="/expired/link">
    <img src="/valid/image/path">
</a>

I hope you’ve found this post and solution helpful. Comment below and share your AEM solutions!
 

About the Author

More from this Author

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Subscribe to the Weekly Blog Digest:

Sign Up
Categories