Hello, I'm Mike, and today I'm going to show you how to create anchor links in WordPress. (upbeat music) Today we'll be diving into how to create anchor links in WordPress and explore why you might want to start using them. From our experience, anchor links can help improve the user experience, make navigating long form content a lot easier, and even give you a slight advantage in Google. Who doesn't want a free advantage in Google? But before we get too far, I want to let you know that there'll be links to more resources in the videos description below. And remember, subscribe and ring that bell to get notifications for future, helpful content. All right, anchors away. Anchor links also referred to as jump menu links or table of contents are links that instantly take you to a specific part of the page or an external page. The anchor destinations are typically specified by using either the a element, naming it with the name attribute, or by any other element naming with the ID attribute. Both methods are fully compliant with W3C standards. If you're still a little confused on what anchor links are, don't worry. Here's an example. We are using anchor links on each of these bulleted list items. When you click on them, it takes you directly down to the H2 header that contains that content. Anchor links can be used on anything such as text, images and H1 through H6 headers. On a lot of sites, anchor links are merely used to create a table of contents at the beginning of long form posts. If you know a little CSS, you can get creative and make them look a little more stylish as we've done on this landing page. On other sites you may not see the anchor link. Instead, they're being used on headers simply so that they can share links directly to the specific sections. One of the biggest advantages of anchor links is creating a better user experience when browsing your site. This is especially true when it comes to long form articles. Using anchor links allows the user to instantly jump to the section that they're interested in. Using anchor links on headers lets you share direct links to different sections within an article. This is awesome for social media and even support teams. For example, our support team at Kinsta heavily relies on anchor links and our knowledge base articles so that we can send the user to the exact troubleshooting step they need to follow. Our sales team also utilizes these to answer Kinsta related queries more quickly. When it comes to search engine results pages or SERPs results can always vary based on what shows up. However, we have seen time and time again that anchor links or jump menus appear in our SERP listing because we've used them in our articles. These are awesome because they essentially give you another line of text for your organic listing. They can also help increase CTR as the user might see something related to their query that you don't convey in the meta description or title. Anchor links can also be used for other things such as the return to top link that Wikipedia uses along with its citations or footnotes. While we think the pros definitely outweigh the cons, here are a few setbacks you might want to consider. Anchor links or a table of contents could decrease the average time on site per visitor. Why? Because they are skipping right to the content they want instead of reading your entire article. However, if you make your visitor happy right off the bat this could result in them signing up for your newsletter or researching more into what you're selling. So this could be seen as a pro or a con. Anchor links could possibly impact your ad revenue. Visitors skipping straight to a certain section could decrease impressions and clicks. Sites that rely heavily on advertising might want to AB test using anchor links and table of contents. If you're changing domains or needing to add a 301 redirect it's important to note that the fragment identifier or the pound sign is never sent to the server. This can complicate things if you're changing things around down the road with your anchor links. There are ways to get around this with JavaScript but this is by no means an easy task. You might want to think about changing the anchor link transition. By default anchor links will jump suddenly to the ID further down the page. This can be jarring for some. You can change this so it's a smooth scrolling transition. This is actually what we do on the Kinsta blog. You can utilize a free plugin like page scroll to ID or add some CSS to your site, such as the scroll behavior. The first way to create anchor links in WordPress is to simply do it manually with HTML in each of your posts. Let's create one so you can see how they work. Step one, create the text for your link and add a hyperlink on it like you would normally for any other link. Step two, instead of linking it to a URL, a post or a page you will assign it an anchor name. URLs that designate anchors contain a pound sign followed by the anchor name. You can name this anything you want, although we typically recommend keeping them short and related to the actual name of the header. If you look at the HTML, it looks like this. Step three, next, you need to add an ID on the header you want your anchor link to jump to. To do this, you'll need to switch over to the text view or the HTML view in the WordPress editor. On the header, in this case an H2 header, add the ID along with the anchor name you chose back in step two. The anchor name and ID attribute have to be exactly the same for the link to work. One of the easiest ways to add an anchor link is with the free tiny MCE advanced plugin. This plugin basically adds extra functionality to the editor with quick shortcut buttons. As of recording this video the plugin has over 2 million active installs with a four and a half out of five star rating. After you've installed and activated the plugin, go into your post and create a hyperlink on your anchor text. Instead of linking it to a URL, post or page, you will assign it with an anchor name with a pound sign before it. Step two, highlight the header you want to link it up to. Then click on insert from the button at the top and select anchor. This button shows up in the editor because of the tiny MCE advanced plugin. Step three, input the anchor name you gave it in step one and click okay. This plugin saves you time because you never have to leave the visual editor view. If you're doing it manually with HTML, you have to balance between both the visual editor and the text editor views. Perhaps you want to speed up the process even more. If you're writing a lot of in-depth content and always want to include a table of contents in your posts, then you should take advantage of a table of contents plugin. One of the best free plugins is Easy Table of Contents. This plugin automatically generates anchor links for your headers and lets you insert your table of contents anywhere in your post with a simple short code. This plugin has over 30,000 active installs with a four and a half out of five star rating. After you've installed and activated the plugin there are a few settings you'll probably want to change. These can be found under settings and then table of contents. The enable support option allows you to choose which post types you want to use the table of contents on. Most likely this is your post type. You can then choose whether or not you want a table of contents automatically inserted or if you want to insert it manually. We would probably recommend doing it manually if your posts change around a bit. The show when option lets you define how many headings the post should have before a table of content shows up. For example, you probably don't want a table of content showing up on a short blog post. So doing at least four or more headers is probably best. Step two, to insert the table of contents manually simply insert the easy TOC short code where you want it to show up in the post as you see here. The table of contents is then automatically generated for all the headers in the post. How awesome is that? You can also make more changes in the settings regarding what should show up, exclusions, appearances, et cetera. For example, perhaps you always had a summary heading at the end of your posts. You can input that header into the list of exclusions in the settings. So it's not included in the table of contents. The Gutenberg Editor came out with WordPress 5.0 and with it is improved and built in support for adding anchor IDs to headers. Step one, highlight the header in the Gutenberg block and click on advanced on the right-hand side. You will then see an option to add an HTML anchor. Step two, if you want to link to it simply create a hyperlink on your anchor text. Instead of linking it to our URL, a post or a page you will assign it an anchor name with a pound sign before it. Don't want to create anchor links with HTML or install plugin? Then you should check out the free anchor links Chrome extension. This is fully compatible with self hosted WordPress, wordpress.com and Medium. Step one, after you install the Chrome extension simply highlight the header you want to add the anchor link on. Then click the little anchor link Chrome extension icon in your browser's toolbar. Behind the scenes, it creates the anchor ID derived from the header name. In this example you can see it's pound header one. When you click the icon it automatically copies it to your clipboard. Step two, then go to the text you want to add the anchor link to, create a hyperlink as you would normally and hit paste. And that's it. The Chrome extension helps make it quick and easy without relying on any third-party plugins. As you can see, there are a lot of creative ways to add anchor links in WordPress. Some are easier than others. If you're publishing longer content this helps your visitors get to the content they want right away. We've also seen anchor links help aid in getting jumped to menus in SERPs which helps increase CTR on your organic listing. Kinsta's WordPress hosting can speed up your website by up to 200% and you'll get 24 seven support from our expert WordPress engineers. Let us show you the Kinsta difference. Try a free demo of our My Kinsta dashboard at demo.kinsta.com. Thank you for watching. And don't forget to subscribe for more tutorials, explainers and helpful content like this. (upbeat music)
