This guide will show you how to automatically add rel=“sponsored” to your external affiliate or sponsored links in Ghost. This not only helps with SEO by signaling to Google that the link is paid but also improves user experience by opening these links in a new tab.
We’ll use a simple piece of JavaScript that you can add directly to your Ghost site.
Why Do You Need This?
When you include affiliate or sponsored links in your content, Google recommends you identify them with the rel=“sponsored” attribute. Doing this manually for every link is tedious and prone to error. This script automates the entire process.
Here’s what the script will do:
-
Finds Specific Links: It scans your post content for any external link that you’ve marked as sponsored.
-
Adds rel=“sponsored”: It automatically adds the rel=“sponsored noopener noreferrer” attributes for SEO and security.
-
Opens in a New Tab: It forces the link to open in a new browser tab (target=“_blank”) so you don’t send visitors away from your site.
-
Keeps URLs Clean: It removes the marker you use from the final URL, so visitors don’t see it.
Step 1: How to Mark Your Sponsored Links in the Ghost Editor
The script needs a way to identify which links to modify. You’ll do this by adding a simple parameter to the end of your URLs in the Ghost editor.
- If the URL already has a ?: If your link already contains parameters, like another-site .com?ref=123, use an ampersand (&) instead. Change it to another-site. com?ref=123&sponsored.
This ?sponsored or &sponsored tag is your private signal to the script. It will be automatically removed from the visible link, so your readers will never see it.
Step 2: Add the Script to Your Ghost Website
You need to add the JavaScript snippet to the footer of your Ghost site. This ensures it loads on every page without slowing down the initial content rendering.
-
From your Ghost Admin, go to Settings.
-
Click on Code Injection.
-
Scroll down to the Site Footer section.
-
Copy and paste the entire script below into the Site Footer box:
<script>
document.addEventListener('DOMContentLoaded', function() {
// Select all links within the Ghost post content area
var links = document.querySelectorAll('.gh-content a');
for (var i = 0; i < links.length; i++) {
// Check if the link goes to a different website
if (links[i].hostname !== window.location.hostname) {
// Check if you've marked the link as sponsored in the editor
if (links[i].href.includes('?sponsored') || links[i].href.includes('&sponsored')) {
// 1. Add the sponsored attribute for SEO and security
links[i].setAttribute('rel', 'sponsored noopener noreferrer');
// 2. Make the link open in a new tab
links[i].setAttribute('target', '_blank');
// 3. Clean the "?sponsored" tag from the URL so visitors don't see it
links[i].href = links[i].href.replace('?sponsored', '').replace('&sponsored', '');
}
}
}
});
</script>
- Click Save.
Note: The script uses .gh-content a to find your links. This is the standard class for content in official Ghost themes and most third-party themes. You likely won’t need to change it.
Step 3: Publish and Verify
That’s it! The script is now active on your site.
To check if it’s working:
-
Go to a post where you’ve added a link with the ?sponsored marker.
-
Right-click on the link and select “Inspect” or “Inspect Element”.
-
The browser’s developer tools will open. Look at the HTML for that link. You should see rel=“sponsored noopener noreferrer” and target=“_blank” have been added to the tag.
-
Click the link. It should open in a new tab, and the URL in the new tab’s address bar should not contain the ?sponsored part.
You now have a fully automated system for managing sponsored links on your Ghost blog, ensuring you’re compliant with SEO best practices while saving yourself a lot of manual work.
(mod note - removed self promotion link)