PDFをHTMLに埋め込む方法

thumbnail

PDFをHTMLに埋め込むのは簡単。

以前、Webサイトでスライド資料を見せる(PDFをWebページの中に表示させる)方法として、「Google Docs ViewerでPDFをWebページに埋め込む方法」をご紹介しました。

この方法には、表示速度が早いことや多様な種類のドキュメントに対応していることなど、様々なメリットがあるのですが、今回は別の簡単な方法をご紹介します。

OBJECTタグでPDFを埋め込む方法

OBJECTタグを使って、PDFを埋め込んでみよう。

<object data="ここにURLを入力" type="application/pdf" ></object>

PDFをサーバーにアップし、上記のようなコードを記述して、PDFのURLを指定するだけでOKです。実際に表示したのが、以下です。

尚、この方法には、2つの注意点があります。

OBJECTタグでPDFを埋め込む時の2つの注意点

1:ファイル容量に注意

ファイルの容量が重いと、表示されるまでにかなりの時間が掛かります。

2:PDFの画面サイズに注意

この方法でPDFを埋め込むと、ファイルの「画面サイズ100%」で、最初に表示されてしまいます。勿論、PDFの表示ツールの中で、ユーザーが表示を縮小できますが、最初に表示されるのは、100%での表示です。

これに対して、パラメーター(〜.pdf#view=Fit)を設定して、強制的に表示を「全体表示」に変更することもできますが、Google Chromeなど一部のブラウザでは、機能しません。

その結果、上に表示したように、指定した横幅・縦幅よりも、PDFの画面サイズ(ピクセル数)が大きい場合は、一部欠けた状態で表示されてしまいます。

OBJECTタグでPDFを埋め込む時のTIPS

横幅・縦幅を設定する方法

<object data="ここにURLを入力" type="application/pdf"
width="数値" height="数値"></object>

□width:PDFの表示領域の横幅
□height:PDFの表示領域の縦幅

このように、PDFの横幅と縦幅を設定することができます。

□こちらの過去記事もチェック↓↓
【まとめ】遅いWordPressサイトを高速化する8個の方法:離脱率を下げCVRを高める

最後に:表示スピードをしっかりと検証しよう

今回の様に、表示スピードが遅い(読み込み時間が掛かり過ぎる)と、ユーザーの離脱に繫がる可能性があります。

離脱率や直帰率が上がれば上がるほど、コンバージョン率は必然的に低下します。PDF(スライド資料)をWebページに埋め込んで、その場でユーザーに見て頂いた方が良い場合もありますが、可能な限りそこに掲載する内容は簡略化し、表示スピードをできる限り改善しましょう。

そして、概要やポイントを見て貰い、興味・関心を喚起できれば、PDF(スライド資料)のダウンロードに繋げることができ、コンバージョン率もアップできるはずです。

常に顧客視点で、Webページを改善し続け、成果に繋げて下さい。
共に戦いましょう!