When creating a Niche Website, with WordPress or another CMS, what you want is to help your user find various things on your site.
For example, my site here talks about getting an Internet Website Hosting Company. However, on that page, I warn my readers that when they are presented with the WordPress installation screens to actually make sure they choose their username wisely—there are other things to be careful about, but this one is a major problem, because the names “admin” and “administrator” are 100% compromised.
So what I did in my page about Hosting is put a link to my page about the WordPress installation screens. More specifically to the section where I talk about the selection of your username.
That kind of a link is called an Internal Link. This is considered a Search Engine Optimization (SEO) as well. Google is happy to find internal links. This means your various pages are somehow related and not a bunch of standalone pages.
Unfortunately, the default WordPress editor does not give you full control over Internal Links. It has, to my point of view, three problems which I discuss below:
- It uses Full URLs
- It does not give you the ability to add an anchor in a dialog (Using Code) although you can install a plugin to fix this problem (Using a Plugin)
- It does not allow you to Select an Existing Anchor when creating a link
Although the editor accepts local links if you give them to it, you have to think of creating those local links as local links yourself. This has always been a problem in WordPress.
A Full URL for my website will start with the protocol (https) and the domain name (www.internetaffiliate.com), then it generally ends with a path. If I want the user to be sent to a specific section, then I can add an anchor (see below).
One annoyance with Full URLs is that it takes more space. This is not a huge problem, though, since we have larger computer storage and faster bandwidth. Yet, there is really no need to send millions of characters to million of people every single day when not required.
So, what I try to remember doing is delete the protocol and domain name. You just have to keep a first slash, then the full path and if present the anchor (the # and what comes after is the anchor.)
So by default WordPress generates a link that looks like this:
There is a screenshot of the link editor. When you click on a page because you want to link to it, you will see that the link includes the https:// and the domain name even though this is an Internal Link to one of your pages.
Instead, the link should look like this (i.e. just a path):
As far as browsers are concerns, it becomes the same thing.
Now imagine that you optimize all your links like that and each month you get about 1 million hits, that’s a saving of 21 characters (in my case) so 21 Mb of data PER LINK PER MONTH. I know there is compression to take in account and it is likely dividing that amount by half. Still. That’s a lot of bandwidth wasted right there.
Also the other problem with this WordPress technique is when you want to change your domain. It’s not straight forward. You will have to run a Plugin to fix all the Full Links to the new domain name.
In order to create a link to a section, you need to create what is called an anchor in your section header.
I show you the code so you know how an anchor looks like, then the next section tells you which plugin to install and use to create those anchors and how to create links to them.
Unfortunately, the default WordPress editor does not include a WYSIWYG (What You See Is What You Get) feature that lets you add an anchor without you going to the HTML code. So you have to click the Text tag, found at the top right of the editor window, and then editing the code manually.
There are two main ways to create an anchor. You either add an anchor tag like so (choose one or the other):
<h2><a name="my-section"></a>Section Title Here</h2> <h2><a id="my-section"></a>Section Title Here</h2>
When using the anchor tag, you will see a little anchor appearing. That gives you the ability to move it or delete it. Also having a visual signal that the tag exists, I think, is a good thing.
Or you use the id attribute on the header tag like so:
<h2 id="my-section">Section Title Here</h2>
The id attribute is invisible even in the editor.
So this is the very light way since you do not have to add yet another plugin.
However, for best usability (and thus best SEO as far as Google is concerned), it is a lot better to have an anchor on each section of your post, because that way Google can actually send its users to a specific section of your page if it deems that section to be more appropriate as the answer to their search. So I suggest you install an anchor plugin instead, which is the subject of the next section.
I tried a few and the one which I think is enough and works as expected is Easy Smooth Scroll Links.
This plugin adds a little Anchor button to your editor toolbar which is shown in a red square in this screenshot:
So first I suggest you click to the left side of your section title. There is how I did it for this section:
Then click that new button in your editor toolbar. That presents a popup window where you can type the title all in lowercase with dashes instead of spaces between words, like so:
Finally click Ok.
Side Note: The anchor name is whatever you want, my suggestion makes it easy to know what it is without having to edit the anchor each time.
IMPORTANT NOTE: Here you do not enter a “#”. If you do so, the anchor won’t work since an anchor reference can’t include a “#” character (since it is the introduction character of the anchor in a URL). Unfortunately, the plugin does not remove it if you make the mistake of adding it, which I bet quite a few people do.
Note that the Easy Smooth Scroll Links has a setting named Offset. This should be set to 74 when you use the Twenty Seventeen theme. This is because the theme keeps your menu at the top and the height of that section is 74 pixels.
If you do not set that option properly, then those internal links are going to place the section title under the menu which makes it quite a bit off. You may use 94 instead of 74 to put a little space between the menu and the section title. Test and see what you like best.
Once a section has such an anchor, you can create a link and add that anchor at the end of the link.
There is how an internal link sending people to that specific section looks like:
As mentioned before, the link can include the protocol (https) and the domain name, but those are a waste.
Now, there is the link to the very beginning of this section: Links to Sections so that way you can test how that works.
Also, if you are linking to an anchor within the same page, you do not need to include the path at all. In that case the link becomes even simpler as follow:
These can be useful to send your users to various sections directly, like a Summary box would do. For example, in the Creating Your Website: Installing WordPress post I have two parts:
Part I — how to install WordPress on your very own server or a host that does not automatically install WordPress for you; and
Part II — settings once you are in the WordPress installation wizard.
I put a link at the top of the page so people who chose a hosting company that automatically installs WordPress, such as BlueHost (for which I’m an affiliate), can directly go to the second section since the first is taken care of by the host as they prepare your account!
As I mentioned above, for anchor links within the same page, you have to edit the Easy Smooth Scroll Links settings and make sure the Offset is set to at least 74. Otherwise your title will be hidden under the menu that sticks to the top of the page whether you scrolled to the very bottom or are at the top of your page.
That plugin properly handles scrolling when you click a link on the page. However, if you click the link on another page and it opens that new page, it totally ignores the fact that the page is being accessed with an anchor. The problem also shows when you hit the Reload button of your browser. The section title ends up under the menu.
Appearance » Editor
By default, the editor loads the CSS file which is what most people will tweak in WordPress. However, what we want to edit here is the Theme Header. Depending on your configuration, it may be somwhere else, but by default there should be links on the right side of the screen with various names. In my case I have:
- Stylesheet (style.css)
- Theme Functions (functions.php)
- Theme Footer (footer.php)
- Theme Header (header.php) ← click this one
Then add the following two lines of HTML code:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.4.1/jquery.easing.min.js"></script> <script src="https://cdn.m2osw.com/js/anchor.js?s=div.navigation-top,div%23wpadminbar"></script>
The first line includes a jQuery extension that handles smooth animations. The second line includes my tiny script that will properly scroll to the specified anchor. Specifically, it makes sure to apply the correct offset otherwise the title gets hidden.
Make sure to click the Update File button after you copied these two lines in the header.php file. To test, you will want to have a link with a path and that ends with #some-anchor on one page and such a named anchor on the destination page. Remember that my code only kicks in when you click on anchor between pages and the plugin extension handles the problem within your page.
Unfortunately, the link popup from the editor does not give you a list of existing anchors so instead you have to type it in.
Note only that, you have to make sure that you enter the ‘#’ character or it won’t work. Without the hash (#) It will instead try to go to a page with the name of that anchor, and that page probably does not exist.
For that reason, whenever you create anchors, I strongly suggest that you test them all.
A solution to not being the best at entering links manually is to install the Broken Link Checker plugin. This plugin will automatically check all your posts and comments (and other parts too) for links. All those links are added to a table and once in a while (every 72 hours by default) they are checked to see whether they are broken or not.
Note that I changed that setting to 168 hours, that’s once per week. I think that’s more than enough for a little website. Once your site is done, the links are not likely to break often.
VERY IMPORTANT: You must make sure that your Affiliate Links to Amazon.com (and possibly other affiliate programs) are not being checked by a robot. This includes the Broken Link Checker plugin. In the settings, you can include a list of domains to avoid checking and you must include the amzn.to domain (if you do not use the shortener, make sure to also block the amazon.com domain.)
Go to Settings » Link Checker and then click on the Which Links to Check tab at the top. There you find a box named Exclusion list. Enter the amzn.to domain name in that list and make sure to click Save Changes.
Note that your Google Rank actually depends on your links not being all broken. In other words, making sure that your links remain valid is an important on-site SEO task along having internal links and anchors. Google won’t penalize you for one broken link. However, if they find many broken links, you will start seeing side effects (a.k.a. less traffic) which you do not want.
This module will actually send you an email to let you know that some links are broken. That way you can fix them quickly. At times you will get false positive (i.e. a site down for a day or two…) but in most cases this is preferable to really having broken links that you have to take care of and making Google unhappy and losing many organic clicks.