Here’s a tutorial on a topic I know I’ve Googled a number of times, searched for in my HTML book and I know others have searched for only to land on my blog! But until now I don’t have a tutorial on creating jump-to links, not to be confus-ed with jump-links in the Google search snippets. Really I’ve always understood these on-page links (where you create a link that goes to another part of the page…Wiki-esque) as “anchor” links. So I distinguish between the two jumpy linky things like this:
When I say “jump-to” or “page jump” links — I mean on-page links that go to another place on the same page, popular in Wikipedia.
When I say “jump links” — I mean those links in a Google search snippet that take you to various other parts of the same page, but from off the page…in a search result…a jump-to link on steroids.
I’ve quickly created what follows for illustrative purposes. First in visual view–this is what readers see. Then below it a screenshot of the same in the html view on my blog editor…
Cool HTML Tricks for Web Copywriters
You have great control over your page keywords when you learn how to customize webpage title tags…
What’s come to be known as the Google search snippet is also the page html description, a meta tag and a component of behind the scenes of SEO….
Content pages with keyword optimized headlines and subheads out-perform all others…maybe a bit overstated, but maybe not….
Not all web pages can cram content above the fold. What to do when you have a lot of pieces of related content on one webpage? Anchor links or page jump links are the solution…This wiki-esque html trick is a must-have for your html bag of tricks….Impress clients. Work quickly. Visualize content and copy solutions. Google loves page jump links….witness the new Google search results jump-to links wrapped into many search snippets.
Here’s the html view of the above:
I have a folder on my laptop I call html stuff. In it I keep a few cheat sheets I use regularly. A short cheat for building the page jump links is included. This is my “dummie” html for building these on-page links:
Create a Page Jump/Anchor link
1. Starting page link (anchor)
<a href=”#identifier”>click here</a>
2. Second link, where the first jumps to:
<a name=”identifier”></a>suddenly you’re here.
17 October, 2010 at 6:57 pm
Very helpful. Thank you!
17 November, 2010 at 3:40 am
Mine seem to jump to another posting I have on my blog. Is it something in my CSS code? Everything looks correct.
18 November, 2010 at 1:58 am
Hey Mike, I’m not the person to ask about the CSS, but that seems strange if you’ve created an identifier with a matching anchor within your post. I was looking through your past dozen or so blog posts, but didn’t see any anchor text to reference….
18 November, 2010 at 2:22 am
The jump links in question are located here:
http://thesonicspread.com/2010/10/29/the-most-memorable-iconic-game-sounds/
I’m trying to make it possible for users to jump through a list alphabetically.
Someone suggested I try the tags so that’s currently what’s in the code however it’s still not working.
Any thoughts?
Thanks,
Mike
17 March, 2011 at 3:46 am
Nice information, many thanks to the author. It is incomprehensible to me now, but in general, the usefulness and significance is overwhelming. Thanks again and good luck
6 March, 2012 at 12:44 pm
Works like a champ!
I attempted this awhile ago with my shopping cart software (Zencart) and it defaults to the main page every time (frustrating!) so I gave up and basically forgot about doing this. I just recently needed to add this type of jump link to 6 pages on a non-profit’s website because the pages were broken into sections (States) and was quite long.
I did discover I needed to place the links outside heading tags for each state, otherwise the font would turn blue and the heading would act like a link when hovered over but go nowhere.
Thanks!
6 March, 2012 at 9:17 pm
Thanks for the feedback on this!