How to Add Cool Jump To Menus in SERPs

jump to menus serps

I will be the first to admit it, I stumbled upon this little trick by accident while trying to be more organized and thought I would share it with you. It is how to add “Jump to” menus in SERPs.

You are probably thinking, what the heck are jump to menus? 

I didn’t know they existed before this either, but it is actually a pretty cool feature which allows your visitors to instantly jump to a section in your text from Google search.

Jump To Menu Example

I don’t have an example yet on my blog because I haven’t had a chance to rewrite them all yet to this new format. So I will be using an example of a blog post I wrote on KeyCDN, “Speed Up WordPress.”

This post is indexed and so I searched for “Reduce Number of WordPress Plugins” (And yes I am in Incognito mode). As you can see, my SERP listing actually has a clickable link showing “Jump to” next to it. When you click it, it takes you directly to the H2 header “Reduce Number of WordPress Plugins” in my long post. This saves the visitor time from scrolling and it helps you stand out a little bit in SERPS.

jump to menus serps

From what I can tell it simply is showing up because Google is crawling the anchor tags I added within my post. A lot of my posts are rather long and so I started adding indexes at the top of them with anchor tags so people could jump down to what they wanted faster. Anchor tags seem a little old school to me and I don’t see a lot of people using them anymore. Maybe now they will make a comeback! Follow the steps below to add jump to menus to your posts.

Option 1 – How to Add Jump To Menus with Plugin

You can easily add these jump to menus with a free WordPress plugin called Table of Contents Plus. Just install the plugin and add the following shortcode anywhere within your post.

[toc]

After adding the shortcode it will display a box like this in your post. The awesome thing is that you don’t have to type any of this. You simply write your post like you normally would with H2 and H3 headers and it generates a box like this automatically for you.

table of contents wordpress plugin

Option 2 – How to Add Jump To Menus with Code

List + Anchor Tags

First add a list at the top of your post. Then use a link like you normally would, but instead of linking to a URL, link to a name. You can make up whatever. You can see my example below.

<ol>
<li><a href="#theme">Use a Solid Framework/Theme</a></li>
<li><a href="#caching">Utilize Caching</a></li>
</ol>

Below is what my list looks like in the post.

wordpress index list

Then under the section where you have your headers, make sure to add the rest of your anchor tag. Here is an example of my first one. The important part is the “a id.” Make sure your name matches the name you picked above in your list.

<h2><a id="theme"></a>1. Use a Solid Framework/Theme</h2>

And here is what it looks like. Because I use the link before the text it doesn’t change any styles or colors.
anchor tag header

And that’s it! Let your post index and you will start seeing cool jump to menus show up in SERPs. The next time you crank out a super long post, take a few minutes and add an index at the top with anchor tags! I won’t be doing this for all my posts, just the longer ones.

If this little trick on how to add jump to menus in SERPs was helpful please let me know below! And don’t forget to share, you guys are the reason I blog.

GET MORE STUFF LIKE THIS

Marketing, WordPress, Blogging Tips, SEO and Reviews, once a week.

Thank you for subscribing.

Something went wrong.

7 thoughts on “How to Add Cool Jump To Menus in SERPs

  1. I don’t code so I have some questions that will be super obvious and newbie for you who do.
    1. The quotation marks “theme” do NOT appear in the actual code I would input? That’s only to indicate what I say?
    2. What does “theme” mean?
    3. Where do these codes go? I am a Divi Baby so any answer using that reference would be appreciated.
    Thanks.

  2. Actually, outside the slow, spaghetti code and bloat-fest of WordPress and other cookie-cutter template website services, anchor tags are used all the time. You did get one thing wrong as far as using anchor tags: it’s supposed to be ‘a id’, not ‘a name’. The name attribute is obsolete now that HTML5 has been implemented.

    W3C: http://www.w3.org/TR/html-markup/a.html (id is a global attribute; name is not and is not listed as a valid attribute)

    MDN: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#Obsolete

  3. I’ve implemented anchor tags in a Word Press site, but they don’t seem to work (i.e. clicking on the anchor link does not jump to the target section). I’ve triple-checked the code, but can’t seem to make it work. Does Word Press interfere with these working properly?

    • Hey Michael,
      Without looking at your site I couldn’t tell you what is wrong, But I have just updated the post above with an even easier way to do this :) There is a free plugin that makes this super quick and less typing involved. I am in the process of migrating all my posts to using the plugin because it works flawlessly. See option 1 above now.

Leave a Comment

153 Shares
Tweet
Share
Share
Buffer