Published at
Updated at
Reading time
2min
This post is part of my Today I learned series in which I share all my web development learnings.

Let's look at what happens when I google myself.

Developer, writer and speaker | Stefan Judis Web Development — Heyooo, I'm Stefan! I write and speak about web stuff. · New on the blog · My Weekly Newsetter · Most popular in the last 30 days · Hacker News Hits.

Of course, I know how my site is structured, and I can tell that Google displays my site's title and the description includes some of the root page's headlines. The description is not the worst, but it certainly could be better.

Is there a way to exclude elements from being shown in the Google snippet?

Today I learned that there is! And the solution is based on an HTML data attribute: data-nosnippet. Here's the example snippet from the Google Search Central docs:

<p>This text can be shown in a snippet
<span data-nosnippet>and this part would not be shown</span>.</p>

<div data-nosnippet>not in snippet</div>
<div data-nosnippet="true">also not in snippet</div>
<div data-nosnippet="false">also not in snippet</div>

data-nosnippet works on div, span and section elements, and it doesn't care what value you'll give it. data-nosnippet="true" and data-nosnippet="false" have the same result — signaling that this element shouldn't pop up in the Google Search results. Nice!

If you're unhappy with the search results, add some juicy data attributes now. But remember to trigger a reindex in the Search Console. Otherwise, it might take a while until your changes have an effect.

Was this TIL post helpful?
Yes? Cool! You might want to check out Web Weekly for more quick learnings. The last edition went out 13 days ago.
Stefan standing in the park in front of a green background

About Stefan Judis

Frontend nerd with over ten years of experience, freelance dev, "Today I Learned" blogger, conference speaker, and Open Source maintainer.

Related Topics

Related Articles