How to Fix AEM Link Checker Issues with Broken Image Links | Perficient Digital

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>

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!

 

Leave a Reply