Bookmarklet: Compare SERP titles to actual onpage titles and h1 heading

aka: the #titlegeddon bookmarklet

Google has stirred up some dust all around the SEO world with their rewriting of websites’ titles.

SEO folks are now trying to figure out how Google is rewriting their titles.

Fede Gómez, a WordPress developer from Toledo, Spain has come up with a nice JavaScript bookmarklet to be used on Google’s SERP pages. It checks for the actual website’s title tag and compares it to the one shown by Google.

It does a great job at what it is supposed to do. Go and check it out.

My version of the bookmarklet

For my use, I have altered it a bit and added some code. I wanted to not only see the current title tag of the websites, but also the (first) <h1> and see whether Google may have used the <h1> heading instead of the title tag.

  • Checks if the title tag shown in Google SERPs is the same as the title tag used on the respective page
  • Highlights red if the title is different, showing the title used on the respective page
  • Highlights green if the title is the same as on the page
  • Highlights whether Google has truncated the title (currently only when “…” is in Google’s title – still working on that)
  • Highlights if the title shown by Google in the SERPs is actually the page’s h1 heading
  • Shows if no h1 heading was found on the page
  • Downloads a JSON file if you want

This data will be created when all Ajax requests have completed and the data has been gathered.
The file download will start automatically when you click the button and ask you where to save the file.

The filename will be comparison-{your google query}.json.

See below image for a preview of what this will look like.

Use my version of the bookmarklet

So, if you like, you can use my bookmarklet. Just drag the following button into your bookmarks toolbar and use it on Google’s search results pages.

Stay up to date and get updates on this bookmarklet (and more)

To stay updated on this bookmarklet and get notified once a new version comes out, please sign up to my little free newsletter.

Or copy/ paste the following code into a new bookmark’s URL field

javascript:(function(r)%7Bfunction k()%7Bconsole.log("jQuery version "%2C%24.fn.jquery%2C" loaded")%3B%24("%23chtop").length%26%26%24("%23chtop").remove()%3B%24("%23result-stats").append('<div id%3D"chtop" style%3D"display%3A inline-block"><%2Fdiv>')%3B%24("%23chtop").append('<div style%3D"display%3A inline-block%3B color%3A red%3B" id%3D"waitforme">Please wait...<%2Fdiv>')%3Bvar l%3D1%2Cg%3D%5B%5D%2Cm%3D%24('%23rso .kp-blk .g%2C %23rso .g%5Bclass%3D"g"%5D%2C %23rso .srg .g').not(".kno-kp .g").find("div%3Afirst").find("a%3Afirst")%3B%24(".title-changed%2C %23CountTitlesChanged").remove()%3Bconsole.log(m)%3Bm.each(function()%7Bif(!%24(this).parents(".related-question-pair").length)%7Bvar d%3D0<%24(this).closest(".tF2Cxc").length%3F%24(this).closest(".tF2Cxc")%3A%24(this).closest("li")%3Bg.push(%5Bl%2C%24(this).find("h3").text()%2CencodeURI(%24(this).attr("href"))%2Cd%5D)%3Bl%2B%2B%7D%7D)%3Bvar n%3D%5B%5D%2Cp%3D1%3Bcors_proxies%3D%5B""%2C""%2C""%5D%3Bg.forEach(function(d)%7Bvar a%3D%7B%7D%3Ba.url%3Dd%5B2%5D%3B%24.ajax(%7Burl%3Acors_proxies%5BMath.floor(Math.random()*cors_proxies.length)%5D%2Bd%5B2%5D%2Csuccess%3Afunction(b%2Cc%2Ce)%7Btitle%3D%24(b).filter("title").text().trim()%3Bb%3D%24(b).find("h1%3Afirst").text().trim()%3Ba.pageTitle%3Dtitle%3Ba.googleTitle%3Dd%5B1%5D%3Ba.pageH1%3Db%3Ba.uses_title%3D!1%3Ba.uses_h1%3D!1%3Ba.title_rewritten%3D!1%3Ba.title_truncated%3D!1%3Bc%3D'<div class%3D"title-changed">'%3Be%3D!1%3Bb%3D%3Dd%5B1%5D%26%26b!%3Da.pageTitle%26%26(e%3D!0)%3Bif(a.googleTitle.includes("..."))%7Bvar f%3Da.googleTitle.split("...")%5B0%5D.replace("..."%2C"")%3Ba.pageTitle.includes(f)%26%26(a.title_truncated%3D!0)%7Dtitle!%3Dd%5B1%5D%3F(f%3D"Title%3A "%2Ca.title_truncated%26%26(f%3D"Title TRUNCATED%3A ")%2Cc%2B%3D'<span style%3D"font-weight%3A bold%3Bcolor%3A %23ff6961%3B">'%2Bf%2B" "%2Btitle%2B"<%2Fspan>"%2Cq%2B%2B%2Ca.title_rewritten%3D!0)%3Ac%2B%3D'<span style%3D"font-weight%3A bold%3Bcolor%3A darkgreen%3B">Title%3A '%2Bd%5B1%5D%2B"<%2Fspan>"%3Bc%2B%3D'<div style%3D"display%3A block%3B padding%3A2px 0%3B font-weight%3Abold%3B color%3A dodgerblue">'%3Bc%3Db.length%26%26"string"%3D%3D%3Dtypeof b%3Fc%2B("h1%3A "%2Bb)%3Ac%2B"No h1 found on page"%3Bc%2B%3D"<%2Fdiv>"%3Be%26%26(a.uses_h1%3D!0%2Cc%2B%3D'<div style%3D"display%3A inline-block%3B background-color%3A %23ffd811%3B border%3A 1px solid rgb(74%2C 85%2C 104)%3B color%3A rgb(74%2C 85%2C 104)%3B padding-left%3A 4px%3B padding-right%3A 4px%3B border-radius%3A 4px%3B"><b>Uses H1<%2Fb><%2Fdiv>')%3Bc%2B%3D"<%2Fdiv>"%3Bd%5B3%5D.find("div").first().append(c)%3Bn.push(a)%7D%2Cerror%3Afunction(b%2Cc%2Ce)%7Bd%5B3%5D.find("div").first().append('<div class%3D"title-changed"><span style%3D"font-weight%3A bold%3Bcolor%3A lightslategray%3B">Error%3A Request could not be processed<%2Fspan><%2Fdiv>')%7D%2Ccomplete%3Afunction(b%2Cc)%7Bp%3D%3Dg.length%3F(%24("%23result-stats").append('<span id%3D"CountTitlesChanged"> - '%2Bq%2B" titles have changed<%2Fspan>")%2C%24("%23chtop").append('<span id%3D"downloadJsonData" style%3D"cursor%3Apointer%3B background-color%3A %23fff%3B border%3A1px solid %23000%3B border-radius%3A3px%3B padding%3A2px 5px%3B margin-left%3A 10px">Download JSON<%2Fspan>')%2Cdocument.getElementById("waitforme").style.display%3D"none")%3Ap%2B%2B%7D%7D)%7D)%3B%24(document).on("click"%2C"%23downloadJsonData"%2Cfunction()%7Bvar d%3D"comparison-"%2B%24("input%5Bname%3Dq%5D").val()%2Ca%3D"data%3Atext%2Fjson%3Bcharset%3Dutf-8%2C"%2BencodeURIComponent(JSON.stringify(n))%2Cb%3Ddocument.createElement("a")%3Bb.setAttribute("href"%2Ca)%3Bb.setAttribute("download"%2Cd%2B".json")%3Bdocument.body.appendChild(b) q%3D0%3Bif("undefined"%3D%3Dtypeof jQuery)%7Bvar h%3Ddocument.createElement("script")%3Bh.src%3D""%3Bh.onload%3Dk%3Br.body.appendChild(h)%7Delse k()%7D)(document)%3Bvoid+0

Release History of my version:

  • 2021-09-07:
    Bugfix: Bookmarklet showed “uses h1” when title tag and h1 were similar. -> Fixed.
    Improvement: Now checks whether Google simply truncated the original page’s title

  • 2021-09-05: Now without automatic export. Adds a “download JSON” button at the top.
  • 2021-09-03: Now we have got (automatic, sorry) JSON-Export
  • 2021-09-03: First release.

If you’d like to add something: here’s the repo on github.

Oh, and here’s a list of other useful SEO bookmarklets :)

Posted in SEO


    1. Hi Olivier. Thank you!
      You can find the source code on GitHub. There is a link at the end of the article.
      You can simply remove the function call on line 83. That way the download won’t be triggered.

      1. I’ve used the minified code… I’m not able to remove the function call (and the definition of the function)

  1. Christian, thank you so much! I like how I am able to quickly access all data with just one click. Keep sharing such great things with us. Once again, thank you.

    1. Thanks Olivier. I just read the article. If you use the updated code from github, it won’t auto-download the JSON, but put a button at the top of the SERPs which lets you download the JSON data.

  2. Thank you for sharing this, it’s really helpful! I’ve had a H2 show up as the title for one of my websites. Are other people seeing this as well do you know?

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.