0

I like the idea that HTML header elements have the id attribute. It allows to share links with fragments like for example with Wikipedia:

https://en.wikipedia.org/wiki/Fragment_identifier#Proposals

However, may top sites do not have id attributes, at least not with their header elements, like for example

has almost no id attributes. This makes the HTML look clean and tidy, but much less navigable.

Why is this (these days) and what to do about it? Is there another way to point a browser to a specific portion of a potentially large page?

3
  • 1
    Stack overflow does have id attributes on answers, e.g. webmasters.stackexchange.com/questions/113043/… – Tim Fountain Feb 23 '18 at 21:24
  • @TimFountain. Cool, I did not find that id. Thanks for that hint. Why would they not use that in the "share" button? – hitchhiker Feb 24 '18 at 20:40
  • 2
    @hitchhiker The share button generates a unique URL for the current user - it allows the site to track shares which can be attributed back to the user that shares the link (there are "badges" for sharing a link to n unique IP addresses etc.) - much like an affiliate link. Fragment IDs (apart from not being unique for the user, so would unnecessarily bloat the URL) are not sent to the server so cannot be tracked server-side. – DocRoot Feb 24 '18 at 22:12
2

The ID scrolling attribute using # links is very useful and you're right, it's probably underutilized. There are some things to consider however. If you're using the ID attribute for this purpose, then you'd want to include navigational # links on the page. And adding all of these links can cause for clutter. Wikipedia has them in their contents div, similar to that of a glossary. But not every site wants to dilute the content on their page by adding glossary style id links.

On top of that, historically, Google doesn't index # links in their search results. It would be high beneficial if they did. Many times when someone is searching for long tail question they are lead to a page that is mostly unrelated to the question with the answer hidden deep within the contents of the page. And it can be difficult to find the answer without reading all of its contents or using control+F for search.

Google has begun indexing # links from Wikipedia realizing just how useful this is. Though I don't think that Google has taken the time to do that for most sites.

Stackoverflow might not be using id links in their page, but they have now gotten indexing for specific answers. When you search Google for stackoverflow answers you'll often see snippet links for specific answers on the page. This was likely done with rich snippets or schema structure.

If you want portions of your page to be indexed by Google so that users can quickly navigate to that part of the page with a simple click from the SERP, you should take a look at rich snippets and schema. This can do that for you.

There are also other ways to navigate users to a page through URLs that would potentially be unadvised. For instance, you can have example.com/page and example.com/page/long-tail-keyword with a rel=canonical to example.com/page. When a user visits example.com/page/long-tail-keyword it can 302 redirect the user to example.com/page#keyword. You could also use file_get_contents on example.com/page#keyword in example.com/page/long-tail-keyword.

Other methods would be to use javascript and jquery that scrolls to the portion of the page that you want the user to see with the window.onload command.

1
  • 1
    I don't think the inclusion of navigation links is necessarily required (or wanted) in all cases. For the tech savvy(?), the UI indication that an element has a linkable ID has been solved in several ways... eg. hover over or click of the heading itself displays a clickable link next to the heading. "Google doesn't index # links in their search results." - Although Google has been returning "Jump to ..." links (which target element IDs) in the search results for many many years. – DocRoot Feb 24 '18 at 22:36
2

It is impossible to tell why this is less popular but we can make a few guesses:

  • Dynamically loaded content doesn't work with fragments because the content is not there and a fragment does not cause the browser to perform another HTTP request (in Chrome we just set the position of the scrollbar).
  • The HTML is not less tidy by adding the IDs but the page might be since without some links that point to the fragment, users generally have no way to get the URL with fragment. This is why the share link is needed in answers on Stack Exchange. You clock on it and it gives you a short URL to the appropriate answer.
  • Headers are important to websites. When you have a fragment, you skip much of the content which for advertising-revenue sites is not good. The trend is to put banner ads high up lately and even into the website header, so fragments would diminish revenue street for many sites.

There is no other way to point to a specific portion of a page unless the implementer designed one. If you look at StackExchange you will notice than answer links are not initially fragments but they do get turned into fragments when loading the link. This leverages browser support for fragments but it could be simulated by having Javascript read the parameter and even scroll the right element into view.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.