LINEトークでホームぺージサムネ画像表示

2023年07月08日

本日はLINEのトークでホームページのサムネイルを表示して、送った人に「おっ！」てなるやつをご紹介させていただきます。

ほとんどホームページは設定していると思いますが、体感まだ30％ぐらいは未設定の感じもありますので、他との差別化をはかってアピールしましょう。

LINEで送る相手に「おっ！」といわしたい
他サイトと少しの差別化をしたい
記事は若干いい加減でもいい
少しでも為になればOK

OGP設定をする

結論からいうと、OGP設定をすれば、LINEのトークでホームページのサムネイルを表示することができます。

OGP設定は簡単にご説明すると、ラインだけのものではなく、SNSのフェイスブック・インスタグラム・ツイッター・などでシェアされたときにわかりやすく説明するものです。

これを設定していない場合、ホームページのデフォルトのタイトルでシェアされ、サムネイルも表示されません。※ファビコンを設定している場合はファビコンがでます。

むしろ、この設定をするだけで、ラインだけでなく上記SNSでシェア・拡散されたときも画像付きでかっこよく拡散されるってことです。

HTMLを記述

設置方法は簡単でコピペでOKです。下記になります。

下記はマリオ君のコードです。<head></head>の間にコピペして皆様のサイトの文章に変換してお使いください。

<meta property="og:site_name" content="福岡のホームページ制作はマリオ君にお任せ">
<meta property="og:type" content="website">
<meta property="og:url" content="https://mariokun.com/">
<meta property="og:image" content="https://mariokun.com/cmswp/wp-content/themes/mariokun_temp/img/snsmain.jpg">
<meta property="og:title" content="福岡のホームページ制作はマリオ君にお任せ">
<meta property="og:description" content="福岡のホームページ制作はマリオ君にお任せください。初期費用無料プラン・納品プラン・専属プランなど様々な形でサービスをご提供しております。">
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:title" content="福岡のホームページ制作はマリオ君にお任せ">
<meta name="twitter:description" content="福岡のホームページ制作はマリオ君にお任せください。初期費用無料プラン・納品プラン・専属プランなど様々な形でサービスをご提供しております。">
<meta name="twitter:image" content="https://mariokun.com/cmswp/wp-content/themes/mariokun_temp/img/snsmain.jpg">

簡単にご説明

１行目サイト名を入れる、これは通常のtittleタグに入れているものと同じで問題ないかと思います。

２行目これはウェブサイトだよっていってます。変更なしで大丈夫です。

３行目表示されているぺージのＵＲＬを入れています。
サブページならサブぺージのＵＲＬが入ります。
例料金ぺージ

<meta property="og:url" content="https://mariokun.com/price/">

4行目ここが今日のメインどころ
ここにSNSで表示させたい画像をいれます。ファイル名は何でも大丈夫です。

画像のパスは絶対パスでいれてください（httpからはじまるもの全部いれる）

５行目ここはぺージのタイトルを入れてください。いまは上記はトップページの見本ですが料金ページですと

<meta property="og:title" content="料金ぺージ | 福岡のホームページ制作はマリオ君にお任せ">

みたいな感じです。

６行目はディスクリプションこちらも通常のdescriptionと同じもので大丈夫です。

７行目からはツイッター分です。
７行目使う画像は大きいやつで表示って意味です。そのままでOK。

８行目はタイトルこれは５行目と同じ

９行目６行目と同じ

10行目４行目と同じ※絶対パスで記述

ごちゃごちゃ説明しましたが、基本的にはコピペで張り付けて、中身を変えるだけでOKです。

これで、あとは画像を作れば完成です。

画像サイズは1200×630で制作

もう少し細かくいうと
フェイスブック・ツイッターが1200×630ぐらいで
LINEがもう少し小さくて1120×630ぐらい
インスタが630×630ぐらい

ですがいろいろ作ると手間なので１個1200×630のサイズでつくって、あとは切れないように調整でOKです。あとは各SNSで自動的にリサイズされます。

例を何個か上げていきます。

ロゴを入れるだけの場合は、サイズを1200×630で作って、630×630以内にロゴをいれればよいですが、ほかにもパターンがあると思いますのでご紹介。