Inserting anchor text links in Drupal

If you just want to insert a new link in Drupal using the CK Editor (part of the core modules with Drupal 8), follow these steps:

1. Type the text you want to be linked, then highlight it.
2. Click the Insert / Edit Link button (the left-hand button shown here)

3. Enter the URL (web address) in the URL field and click OK.  If you are working on a development site, it's important to delete the domain name, e.g. if the address is http://www.example.com/page, you would change the link to:
   /page
   Starting with the /  -  This means if the domain name changes when the site goes live, it will still go to the correct page, rather than redirecting people back to the development site.

How to insert a link to a specific part of a page is explained below.

Anchors are a way of inserting a link that when clicked goes to a specific section of a page, rather than going to the top of the page.  This is useful if you have a long page and want to insert a list of links at the top that automatically scroll down to different sub-headings on a page.

As an example, we've added 2 anchor links on this page, click to see how to insert an anchor in Drupal and to link to the anchor.

In the CK Editor you will need to use two buttons pictured below:

The Insert / Edit Link button (on the left)

The Insert / Edit Anchor button (on the right)

Part 1 - Create an anchor where you want the link to go to

• Position the cursor where you want to place an Anchor (i.e. where you want the link to go to).
• Click the Anchor button
• Enter an easy to remember anchor name that describes the section of the page (e.g. create-anchor)
• Press OK

Part 2 - Create a link going to the anchor

• This is considerably simpler if you save the page first, so after you have inserted anchors, save the page (you can always set it to unpublished or not include a link to the new page before it is complete if you wish).
• Highlight the text that you want to turn into the link.
• Click the insert / edit link button (pictured above).
• In the Link Type box click the drop-down list and choose 'Link to anchor in the text'  (You can also create email links this way).
• Another drop-down list will then appear saying 'Select an anchor by anchor name'.  Click this and then choose the anchor you want to link to.
• Press OK.
• Remember to Save the page again.

Notes

You may also be interested in Indigoextra's Drupal end-user guide or research into what the optimal anchor text distribution is for SEO.

One other point on inserting anchors is that the page can only ever scroll down as far as the bottom, therefore if an anchor is placed near the bottom of the page, it won't scroll all the way down to it.

For SEO (to get your page to appear high with search engines) it helps if the anchor text and anchor name are both relevant to the keywords used on the page, it's therefore better to use full names in the anchor (e.g. web-design, rather than abbreviations such as webdes).

Finally, if you want to insert a link to an anchor on a different page, you can create the link you would normally but then add #anchor-name to the end of the link, for example to link to a specific section of this page, your link URL would be:

http://www.indigoextra.com/drupal-anchor-links#create-anchor