It looks like some of these pages still exist on your server.

What I'm wondering is how someone could have done it?

There are plenty of way to hack a site like that. For example, someone might have obtained your FTP (or SFTP) password, and uploaded files/scripts to your server. Or, depending of the CMS you are using, hackers might have exploited a security hole. It's also possible they exploited issues "you" created (inadvertently). For example, if you are manipulating get/post data, and if you are not sanitizing these data before using them, then, it's possible for hackers to inject malicious codes, or things like that.

So review your site, if you are using third parts code (like a CMS), be sure to use the latest version, check access logs to your server.

If you are storing get/post data into a database, review all the rows of your database to detect suspect stuff.

etc, etc...

I have seen similar hacks before. Usually it involves a redirect script and modifications to either web.config or .htaccess file. The script detects if the referrer is a search engine then rewrites URLs making it look like the landing page is on your site. If the referrer is anything else, the script lets the user through to the site. I had a client hacked like this 2 years ago and Google indexed over 13,500 pages before the hack was detected. My thought has always been that most site owners do not visit their own site via a search result and therefore would not be aware of the hack. As for the how, go with what @Dimitri said. You can never be too vigilant.

Just a note here because I removed the image link. You do not want to publicize the name of a domain that is vulnerable, no matter what is determined to be the cause. You do not want that information to be public.

Another thing you can check for yourself is to view your access logs to see whether they have simply hotlinked to your content to display via iframe. If that is the case it is far simpler to turn off their access.

In addition to the access logs, there's one thing you should have done first of all, the instant you discovered the hack: look at the site files. Are any of their timestamps different from they ought to be? For example, most blatantly: if the last time you personally edited your htaccess file was in April, and the timestamp on the file says last week, you need look no further. Do the same thing for your database, if the site uses one (it sounds like a CMS).

That's assuming you are freely able to (s)ftp-or-equivalent directly into your site, and have direct access to the database. If you're on the kind of bare-bones hosting that won't let you do this ... don’t bother trying to fix the existing site. It will happen again.

I've found that this attack is called Japanese Keyword Attack. There's even a Google support document about it.

Thank you so much everyone for your replies. You've been really helpful. I really appreciate it.