取得した情報を連想配列や配列に格納（この時点でほぼ1つにまとまっています）。
その後必要な加工をして、テキストエリアに出力すればいいと思います。

紹介しているサイトの場合、取得した情報を各インプットタグのvalue上に入れているからそうなっているだけで、どう出力するかは書き方次第でどのようにでもできます。

 取得

サンプルコードの取得の部分はこの箇所です。
ここはそのまま使えます。

r.find( "title" ).html();

 出力

出力はこの部分です。
ここを変えます。

$( "#title" ).val(value);

上記取得と出力を同時に行っているのが下記のコードの構造、ということです。

$( "#title" ).val( r.find( "title" ).html() );

 アプローチ

サンプルコードでは、取得と出力を同時に行っています。
まず、取得したものを変数に代入しましょう。

//　出力先の用意
var $textarea = $('textarea');

// 取得したものを変数に代入
var title = r.find( "title" ).html();
var description = r.find( "meta[name='description']" ).attr( "content" );

// 出力用テキストに加工
var output = title + descriptrion;

// 出力
$textarea.text(output);

/* 別パターン */
// 取得したものを配列にする
var ary = [title, description];

// 配列結合
var output = ary.join(" ");

// 出力
$textarea.text(output);

http://sterfield.co.jp/demo/hoshino/55/ 
こちらのサイトが最もイメージと近い

この参考サイトのソースを読んでみましたか？

// title
$( "#title" ).val( r.find( "title" ).html() );

例えばこの部分

r.find( "title" ).html() で取り出した内容を $( "#title" ).val(内容); で指定の input に表示しています。

• 取り出したい内容は同じ
    → 違ったとしても、参考サイトと同様の取り出し方で増やせる
• 出力先は違う
    → けど、やはり出力先の指定の仕方も既に参考サイトに書いてある

やりたいことからすると… あとは好きな表示形式に加工して出力すれば完了ですかね？

参考サイトのソースは読んでみましたか？
ローカルにコピペ(または写経) して動かしてみましたか？
望んだ挙動になるように、改造してみましたか？
どこまで試し、どこがどう分からなかったでしょうか？

シンプルだったので先に回答を書いてしまったのですが…
分からないなりにコードを読むとか真似をしてみるとか改造してみるとか大切です。
そしてただ「分からない」ではなく、「ここまでできたが、こういう理由でここが分からない」というのも大事です。
私の↑の説明もだいぶ端折っているので、まずは試してみてください。