titlegeddon - google is not our friend

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()%7Bjavascript%3A (function (doc) %7Bvar changed %3D 0%3Bfunction checkTitles() %7Bconsole.log('jQuery version '%2C %24.fn.jquery%2C ' loaded')%3Bif(%24('%23chtop').length) %7B%24('%23chtop').remove()%3B%7D%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 position %3D 1%3Bvar items %3D %5B%5D%3Bvar results %3D %24('%23rso .g').not('.kno-kp .g').find('a%3Afirst')%3B%24('.title-changed%2C %23CountTitlesChanged').remove()%3Bconsole.log(results)%3Bresults.each(function () %7Bif (!%24(this).parents('.related-question-pair').length) %7Bvar parent %3D %24(this).closest('.tF2Cxc').length > 0 %3F %24(this).closest('.tF2Cxc') %3A %24(this).closest('li')%3Bitems.push(%5Bposition%2C %24(this).find('h3').text()%2C encodeURI(%24(this).attr('href'))%2C parent%5D)%3Bposition%2B%2B%3B%7D%7D)%3Bconst allItems %3D %5B%5D%3Bvar numItems %3D 1%3Bcors_proxies %3D %5B'https%3A%2F%2Fapi.codetabs.com%2Fv1%2Fproxy%3Fquest%3D'%2C 'https%3A%2F%2Fcors.bridged.cc%2F'%5D%3Bitems.forEach(item %3D> %7Bvar useItem %3D %7B%7D%3Bvar use_url %3D item%5B2%5D%3BuseItem.url %3D use_url%3B%24.ajax(%7Burl%3A cors_proxies%5BMath.floor(Math.random() * cors_proxies.length)%5D %2B item%5B2%5D%2Csuccess%3A function (data%2C status%2C xhr) %7Btitle %3D %24(data).filter('title').text().trim()%3Bvar h1 %3D %24(data).find("h1%3Afirst").text().trim()%3BuseItem.pageTitle %3D title%3BuseItem.googleTitle %3D item%5B1%5D%3BuseItem.pageH1 %3D h1%3BuseItem.uses_title %3D false%3BuseItem.uses_h1 %3D false%3BuseItem.title_rewritten %3D false%3BuseItem.title_truncated %3D false%3Bvar html %3D '<div class%3D"title-changed">'%3Bvar uses_h1 %3D false%3Bif (h1 %3D%3D item%5B1%5D %26%26 h1 !%3D useItem.pageTitle) %7Buses_h1 %3D true%3B%7Dif(useItem.googleTitle.includes("...")) %7Bvar google_title_split %3D useItem.googleTitle.split("...")%5B0%5D%3Bvar compare_google_title_truncated %3D google_title_split.replace("..."%2C "")%3Bif((useItem.pageTitle.includes(compare_google_title_truncated))) %7BuseItem.title_truncated %3D true%3B%7D%7Dif (title !%3D item%5B1%5D) %7Bvar display_title_pre %3D "Title%3A "%3Bvar display_title_color %3D "%23ff6961"%3Bif(useItem.title_truncated) %7Bdisplay_title_pre %3D "Title TRUNCATED%3A "%3Bdisplay_title_color %3D "%23a6cc1d"%3B%7Dhtml %2B%3D '<span style%3D"font-weight%3A bold%3Bcolor%3A %23ff6961%3B">'%2B display_title_pre %2B ' ' %2B title %2B '<%2Fspan>'%3Bchanged%2B%2B%3BuseItem.title_rewritten %3D true%3B%7D else %7Bhtml %2B%3D '<span style%3D"font-weight%3A bold%3Bcolor%3A darkgreen%3B">Title%3A ' %2B item%5B1%5D %2B '<%2Fspan>'%3B%7Dhtml %2B%3D '<div style%3D"display%3A block%3B padding%3A2px 0%3B font-weight%3Abold%3B color%3A dodgerblue">'%3Bif (h1.length %26%26 typeof h1 %3D%3D%3D "string") %7Bhtml %2B%3D 'h1%3A ' %2B h1%3B%7D else %7Bhtml %2B%3D 'No h1 found on page'%3B%7Dhtml %2B%3D '<%2Fdiv>'%3Bif (uses_h1) %7BuseItem.uses_h1 %3D true%3Bhtml %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>'%3B%7Dhtml %2B%3D '<%2Fdiv>'%3Bitem%5B3%5D.find('div').first().append(html)%3BallItems.push(useItem)%3B%7D%2Cerror%3A function (xhr%2C status%2C error) %7Bvar html %3D '<div class%3D"title-changed">'%3Bhtml %2B%3D '<span style%3D"font-weight%3A bold%3Bcolor%3A lightslategray%3B">Error%3A Request could not be processed<%2Fspan>'%3Bhtml %2B%3D '<%2Fdiv>'%3Bitem%5B3%5D.find('div').first().append(html)%3B%7D%2Ccomplete%3A function (xhr%2C status) %7Bif (numItems %3D%3D items.length) %7BpetitionCompleted(allItems)%3B%7D else %7BnumItems%2B%2B%3B%7D%7D%7D)%3B%7D)%3B%24(document).on('click'%2C '%23downloadJsonData'%2C function () %7BdownloadObjectAsJson(allItems%2C "comparison-" %2B %24("input%5Bname%3Dq%5D").val())%3B%7D)%7Dfunction petitionCompleted(allItems) %7B%24('%23result-stats').append('<span id%3D"CountTitlesChanged"> - ' %2B changed %2B ' titles have changed<%2Fspan>')%3B%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>')%3Bdocument.getElementById('waitforme').style.display %3D "none"%3B%7Dfunction downloadObjectAsJson(exportObj%2C exportName) %7Bvar dataStr %3D "data%3Atext%2Fjson%3Bcharset%3Dutf-8%2C" %2B encodeURIComponent(JSON.stringify(exportObj))%3Bvar downloadAnchorNode %3D document.createElement('a')%3BdownloadAnchorNode.setAttribute("href"%2C dataStr)%3BdownloadAnchorNode.setAttribute("download"%2C exportName %2B ".json")%3Bdocument.body.appendChild(downloadAnchorNode)%3BdownloadAnchorNode.click()%3BdownloadAnchorNode.remove()%3B%7Dif (typeof jQuery %3D%3D 'undefined') %7Bvar script_jQuery %3D document.createElement('script')%3Bscript_jQuery.src %3D 'https%3A%2F%2Fcode.jquery.com%2Fjquery-latest.min.js'%3Bscript_jQuery.onload %3D checkTitles%3Bdoc.body.appendChild(script_jQuery)%3B%7D else %7BcheckTitles()%3B%7D%7D)(document)%7D)()

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 :)

25 Antworten auf „Bookmarklet: Compare SERP titles to actual onpage titles and h1 heading“

  1. 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?

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

Diese Website verwendet Akismet, um Spam zu reduzieren. Erfahre mehr darüber, wie deine Kommentardaten verarbeitet werden.