Along with good content, links are the most important aspect of your site. They are a significant factor in page ranking, and they help users navigate your content. In this guide, we’ll go over HTML links, including how to add ‘nofollow’ links in the Ghost editor. We’ll show a quick and easy process for generating ‘nofollow’ links without having to write whole paragraphs of raw HTML.
HTML links
Links in Ghost are fundamentally HTML links. When a user clicks the link icon in the context editor,
what is created looks like this in the HTML:
<a href="https://www.mindspun.com">link</a>
This ‘a’ tag stands for ‘anchor’ and has a ‘href’ attribute that specifies the target of the link. In this example, the target link is an entirely different page, but it could also reference a location inside a page.
You can link to a specified location within a page by adding the ‘#’ character to the end of the link followed by the desired section name in the referenced page.
<a href="https://www.mindspun.com/#features">link</a>
Clicking on this link takes you to the features section in the Mindspun homepage. If you omit everything before the ‘#’ sign, then this will link you to an anchor tag inside the current page. You can jump to the conclusion of this post by following this link.
<a href="#conclusion>link</a>
Ghost automatically creates an id attribute to every heading on a page. Headings are specified using the big or little ‘H’ in the editor, which correspond to H2 and H3 tags respectively. The id attribute allows you to link to that tag directly using that id. The above link to ‘conclusion’ works because Ghost automatically created an id of ‘conclusion’ on the conclusion heading below.
HTML <a> tags may also have several other attributes beyond just ‘href’. The HTML specification lists these:
The most important of these – after ‘href’ – is the ‘rel’ attribute.
Search engines pay particular attention to the ‘rel’ attribute of your link tags. It is therefore critical to get it right.
nofollow links
A ‘nofollow’ link is created by adding ‘nofollow’ to the rel attribute of an <a> tag.
<a href="https://www.mindspun.com" rel='nofollow'>link</a>
When a search engine encounters a nofollow link, it doesn’t crawl it, just as the name suggests.
Important Note: Excessive use of nofollow links will actually hurt your page ranking.
A particularly good discussion of this can be found at indietraveller.co. The context there is for travel blogging, but the concepts apply to any content.
On the other hand, certain links have to be nofollow. The foremost example is affiliate or paid links. Nearly every affiliate program specifically tells you to mark your affiliate links no follow – or they do it for you in the generate link content.
Use HTML to create a nofollow link in Ghost
The context menu in Ghost only allows to add a link but not to control the ‘rel’ attributes of that link. So how do you do it?
Note: It used to be possible to just type html into the editor. This no longer works in the Koenig editor introduced in Ghost 1.23.0.
Step 1: Create a temporary HTML section to generate links
The above paragraph was created using the following HTML block:
<a href="https://www.mindspun.com" rel="noindex,nofollow">www.mindspun.com</a>
If using an affiliate link, the html will likely be generated for you, so just copy and paste that into the HTML section.
Step 2: Preview your changes
You can preview your changes in the settings fly-out menu. Click the gear icon in the upper right corner of the editor and then select ‘Preview’.
A faster method is to type Ctrl-S/Command-S to save the page and click on the ‘View Preview’ link that appears in the lower left corner of the editor screen.
Step 3: Copy the link and paste in the editor.
In the browser tab showing the preview of your changes, simply copy the link and paste back into the editor. That allows you to create an exact link – like www.mindspun.com – anywhere you want.
You can now delete the HTML section you created and you’re done!
Conclusion
This post reviewed HTML links in general with a particular emphasis on ‘nofollow’ links. Creating ‘nofollow’ links has traditionally been confusing for most Ghost users. Links marked as ‘nofollow’ should be generally avoided unless there is a particularly good reason for their use – like being to told to use them by an affiliate program. Ghost gently nudges toward ‘dofollow’ links by defaulting to them in the context menu. Using a simple HTML section and a provided link in raw HTML, you can create any type of link you want in Ghost.