Named Anchors – Direct links to sections within your webpage
You search on Google for Meta Tags. Microbite’s SEO page appears in the search results, you click the link and it takes you to the top of the page that talks about SEO, you then scroll down until you find the section talking about Meta Tags.
Now imagine the future where you click on the link and it takes you to the right section on the page that talks about Meta Tags. This is my prediction of how the internet will evolve hopefully in the near future.
Google can only take you to the relevant section on the webpage if you have set up unique ids for the different sections on your page. A lot of websites have not done this probably because it is not done automatically by WordPress or any other CMS.
How to setup an ID
- The id attribute can be used on any HTML element.
- The id value is case-sensitive.
- The id value must contain at least one character, and must not contain whitespace (spaces, tabs, etc.).
How to setup an ID using Elementor
Troubleshooting - Div anchors scrolling too far
Sometimes, you will find that when you click on the section ID anchor link it will jump you slightly too far down or too high on the page. This is mainly due to a sticky header hiding the link or other padding issues.
If you are using WordPress there is a plugin called Page scroll to id. This plugin has an option to offset x amount of pixels. It also has the bonus feature to animate the scroll of the page which looks very nice.