GOLDにアップしたページのURLを貼り付けると、詳細が文字化けしてしまう

Question

HTMLのページを作成し、楽天GOLDにアップしました。
そのHTMLのURLをLINEに貼り付けて送信すると文字化けしてしまいます。
（ページのタイトルや概要が表示されず文字化け）

おそらくHTMLの記載内容に不備があると思うのですが、
どのように修正すればいいでしょうか。
添付出来ないようですので、下記にHTMLの内容を記載しておきます。

ご確認お願い致します。
--------------------------------------------------------------------------------




  ミオリ お買い物マラソンクーポン
 

body {
  color: gray;
}

p {
  color:black;
}

#headline {
  color: orange;
}

.main {
  color: orange;
}

h1 {
  position: relative;
  color: black;
  background: #d0ecff;
  line-height: 1.4;
  padding: 0.25em 0.5em;
  margin: 2em 0 0.5em;
  border-radius: 0 5px 5px 5px;
}

h1:after {
  /*タブ*/
  position: absolute;
  font-family: "Font Awesome 5 Free",'Quicksand','Avenir','Arial',sans-serif;
  font-weight: 900;
  content: '\f00c Check';
  background: #2196F3;
  color: #fff;
  left: 0px;
  bottom: 100%;
  border-radius: 5px 5px 0 0;
  padding: 3px 7px 1px;
  font-size: 0.7em;
  line-height: 1;
  letter-spacing: 0.05em
}






  
  ●お買い物マラソン●
  

  
  
  
  
■ダイヤモンド・プラチナ会員限定 お買い上げ金額7,000円以上で使用可能



■お買い上げ金額1,500円以上で使用可能



■お買い上げ金額3,000円以上で使用可能



■お買い上げ金額5,000円以上で使用可能





  
  

###HR######IMG0b4d92cf039927a176b33596e0482ca89.pngIMG0###

Accepted Answer

ECマスターズの土屋です。

大変お待たせいたしました。
こちら確認させていただきました所、
OGPを設定することで部分プレビューを実装することが可能です。

具体的な対応方法としましては
HTMLタグのmetaタグに下記の用に指定していただけますと
表示させることが可能です。

〇〇は
タイトル
■■
プレビューテキスト
✗✗
画像パス
を指定していただけますと実装することが可能です。

是非お試しくださいませ。
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
  
  
  
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

またOGPについて詳しく解説されているサイトがございましたので
合わせてこちらもご参考にしていただけますと幸いです。

どうぞよろしくお願いします。

【URLプレビューの表示について】
https://qiita.com/myucy/items/c9f45979838e05e10a2a

Answer

ECマスターズの土屋です。

お世話になっております。

>おそらくHTMLの記載内容に不備があると思うのですが、
>どのように修正すればいいでしょうか。

確認させていただきました所、
HTMLに文字コードを指定されていなかったことが考えられます。

対策方法としまして、
htmlのタグの中に、を指定していただき、
再度文字化けが起きないか動作の確認をお願いいたします。

どうぞよろしくお願いします。

Answer

ありがとうございます。
確認しましたところ、ファイルに指定されている文字コードがUTF-8ではなくShift-JISでした。
ファイルをUTF-8に変換したら文字化けが解決しました。

質問なのですが、添付画像の赤枠と青枠の内容を表示させるにはどのように記載すればいいでしょうか。

よろしくお願いします。###HR######IMG025045ed135149fe60d6f957de12e5f76.pngIMG0###

Answer

ECマスターズの土屋です。

こちら確認させていただきます
少々お待ち下さいませ。

Answer

ありがとうございます。
title、description、imageを正常に表示させることができました。
lineのスマホ、サーバーのキャッシュクリアもする事ができました。