パソコン　クラブ

タグ: ②HTML

  • HTMLメール

    かつては敬遠されていたHTML形式のメール、現在はどういった認識で使われているか

    １．メリット

    　・ホームページのように表現できるので視覚的に内容が伝えやすい
    　　　画像を自由に配置でき、文字の大きさや色の変更も自由に設定できる
    　　　　　ビジネスメールよりメールマガジンや企業からのお知らせ等に多用される

    　・受信者のアクセスの解析に使える
    　　　メール内のURLリンクにパラメータを埋め込むことができる
    　　　　　クリックされた項目から受信者の興味等が把握できる
    　　　　　メールでのマーケティングに適している

    ２．デメリット

    　・HTML形式のメールを読まない受信者がいる
    　　　テキストで読む受信者がいる
    　　　表示画面が崩れると読み飛ばす受信者がいる

    　　　対策として、テキスト本文とWEB画面の両方を送信する

    　・HTMLを記述する知識が必要となる
    　　　複数のサイトから同時配信するには面倒

    　　　専用のWEBアプリを使って容易に作成・送信するサービスがある

    　・メールサイズが大きくなる
    　　　画像を添付するとその分メールサイズが大きくなり、サーバに負荷をかける
    　　　受信者のメールボックスの容量を圧迫する
    　　　　　画像のダウンロードにも時間が掛かる

    　　　画像をリンク形式で送っても受信者がクリックしない限り読み込まれない

    　・スパムメールに利用される
    　　　ホームページ風に表示するということはURLリンク等を騙すことができる
    　　　　　クリックし詐欺サイトへ誘導されてしまう

    　　　普段知らないところか来たメールは、必ずテキスト文で表示し確認する

    ３．現状

    　昔から「HTMLメールは危険です」と言われ続けている
    　　　現在でもHTML形式のスパムメールは非常に多い
    　　　さらに年々巧妙なメールが出現している

    　　　ＷＥＢ形式の綺麗な画面を送ることで
    　　　　　送信者の意図をアピールするには有効な手段である

    　　　不審者からのHTMLメールを受信したら要注意
    　　　　　信頼関係を築いた方にはHTMLメールの許可を得てから送る

  • OGP

    OGPを設定するとSNSで共有された際にタイトルや画像、説明文などが表示される

    １．設定した際の利点

    　OGP設定をしていなかった場合、
    　　　TwitterやFacebookなどのSNS側が自動的に説明文や画像を表示するので
    　　　伝えたい内容がユーザーに思い通りに伝わらない

    　適切に設定することで、どのようなページで何を伝えたいのかが明確になる
    　　　URLが共有されユーザーへの訴求率が高まり、
    　　　より多くの人に記事を見てもらうことが可能になる

    ２．設定内容

    　OGPはmetaタグをHTMLソースコード内に追加記述する
    　　　
    　追加する内容

    <head prefix=”og: http://ogp.me/ns#>
    <meta property="og:url" content=" ページの URL" />
    <meta property="og:type" content=" ページの種類" />
    <meta property="og:title" content=" ページの タイトル" />
    <meta property="og:description" content=" ページの説明文" />
    <meta property="og:site_name" content="サイト名" />
    <meta property="og:image" content=" サムネイル画像の URL" />

    　内容説明

    og:urlOGPを設定するWEBページのURLを指定する
    　URLは相対パスではなく絶対パスで記述する
    og:typeページの種類を指定する
    　SNS上での表示形式が変わってくる
    　　　website: WebサイトのTOPページ
    　　　blog: ブログのトップページ
    　　　article: 記事ページ等、WebサイトのTOP以外のページ
    　　　product: 製品の紹介ページ
    　　　その他については（Open Graphプロトコル）
    og:titleページのタイトルを指定する
    　通常はサイトのものと同じ内容を指定する
    　別のタイトルを設定するとそちらが優先して表示される
    　　　文字数は２０文字以内
    og:descriptionページの説明文を指定する
    　文字数は８０〜９０文字
    og:site_nameページのサイト名やブランド情報を記述する
    　「og:site_name」に設定する
    og:imageSNS上でシェアされた際に表示する画像を指定する
    　絶対パスで指定する
    　Facebookでの設定にはサイズを1200px✕630pxにする

    ３．Twitterとの共有

    　Twitterでは基本的なOGP設定に以下を加える

    twitter:cardTwitter上での表示タイプを指定する
    　summary：タイトル、説明、およびサムネイル
    　summary_large_image：summary cardと同じ形で、
    　　　　　　　画像の大きさがそれより大きいもの
    　　　　　　　Facebookのカードに近い形
    　app：アプリ配布用の表示カード
    　　　　　　アプリの名前や紹介文、
    　　　　　　アプリアイコンに加えて、評価や価格などの表示
    　player：ビデオやオーディオなどのメディアを表示できるカード
    twitter:site@から始まる、コンテンツの作成者や管理者のTwitterユーザーID

    ４．Facebookとの共有

    　基本的なOGP設定にapp_idを取得して追加設定する
    　　　facebook for developers （https://developers.facebook.com/apps）で取得する
    　　　OGPの設定やFacebook用アプリを作成する際に必要なID

    fb:app_idサイトやブログの管理者をFacebookに伝える、１５文字の半角数字
    　Facebookインサイトを利用できるようになり
    　　　Facebookインサイトを利用できるようになります
    　　　　　いいね！の数
    　　　　　どれくらいの人が見てくれたのか
    　　　　　どの時間帯がユーザーの目にとまりやすいか