SEOを意識して複数行の三点リーダーを実現したい

Question

記事一覧と、記事詳細画面があり、一覧で冒頭を3行表示し、以降を...となるようにしたいです。

試みた内容

1. CSSのclampよる実装 参考URL
「IE」「Firefox」で反映されないので不採用

2. CSSの疑似クラスによる実装 参考URL
ひとまずはコチラを適用。しかし後々懸念点が・・・

SEO的な問題

1、2の実装では本来のテキストの大部分を隠してしまうため、SEO(クローラー)的には良くないと思われます。
そこで、以下のjqueryを利用し実装をしました。
表示するページでは切り抜かれた文章が表示され、末尾に...が付与される。
https://github.com/tbasse/jquery-truncate

上記の実装での懸念点

データベースに存在するテキストデータをjqueryによって加工し表示しているので、
クローラーが見た際に取得したテキストデータと、実際に表示されるテキストデータが違ってしまうのではないか。(?)

つまり、こちらもSEO的に問題があるかもしれないとの意見が上がりました。
ただ、今のクローラーではjsの処理もしっかり読んでいるとの記事がいくつかあり、問題無いのであればこれで完了としたいです。

是非皆様のご見解を聞かせて頂けたらと思います。
そもそも他に良い方法がありましたら是非おねがいします！

Answer 1

CSSのプロパティでtext-overflow: ellipsis;で三点リーダーを実現することが可能です。
ブラウザ対応状況：caniuse

サンプルを作成しました！
jsFiddle

Comments

[退会済みユーザー]

失礼しました！すでに1で試し済みでしたね(~_~;)

[arue]

@easy_no_eady さん
サンプル作成ありがとうございました(^▽^)/

Answer 2

最近のクローラーは一昔と違うので、1でも2でもJSでも手段としては「SEO」への影響はどれも一緒だと思います。特に支障は「無い」と思います。
「UX/UIとしてみてどうか？」の方かなと思います。

･･･個人的な感想です。(^^;)

Comments

[arue]

@yoshinaviさん
ご回答ありがとうございました！
確かにどちらも同じく見てくれていそうですね。
見た目的にもjqueryによる実装で当面は行こうと思います！

[yoshinavi]

表面上は隠れていてもクローラーには認識されていますので、SEOに有利と言うより支障をきたす影響はどれもないとの考えで良いかと思います。

「SEO」としてみると、ユーザーがクリック（タップ）したくなるように、見出しや見えている部分のテキストの工夫は必要だと思います。