久々に悪戦苦闘しました〜〜〜
知人より、iPhoneのメッセージアプリで、URLを貼り付けると、特定のホームページはサムネイルみたいなのが出てくるけど、自作のホームページは出てこないとヘルプ。
試しにURLを貼り付けて、メッセージを送ってもらうと・・・
確かに！運営をまかされている、ホームページのURLを貼り付けても同じ結果。
アイコンが表示されているのは、favicon.icoをFTPでアップロードしているからです。
ちなみに、favicon.icoは、、、
ファビコンを画像ファイルから変換してくれる良いサイトがあったので、ここで変換しちゃいました。
最初、サイトのテキストエンコーディングがUTF-8だったので、これかと思いましたが、全くの見当違い。
HTMLのMETAタグにogp(Open Graph Protocol)の設定をすれば、全て解決と判明しました。（ここまで約１時間）
早速、ホームページビルダーにてmetaタグを追加設定しました。
og:title … ページのタイトルを入れる。記述しないと<TITLE>タグの内容になる。
og:type … ここはwebsite
og:url … ホームページのURLをhttp://から入れる
og:image … 表示する画像のURLを絶対パスで入れる
og:description … 入れなくても良いが、meta name="description"と同じ設定にした
最後の、meta property="fb:app_id"は、facebook用の専用プロパティ
og:descriptionを入れたのは、facebookのチェックでエラーが出たから。
最低、og:title、og:type、og:url、og:imageをmetaタグに記載して、
表示させるimageファイルを特定の場所に置いてやれば、、、
こーんな感じにメッセージアプリに表示されました〜＾＿＾v
（ここまで６時間・・・）
なんで、６時間も悪戦苦闘したかって！？
簡単にちゃちゃっとimageファイルを置いて、metaタグ修正するのは１５分ほどでしたが、、、
北アルプスのフリー素材を探したり（商用利用してもロイヤリティが発生しない物）
imageファイルの画像にロゴを入れたり、見映えを良くしたり、、、
ついでにホームページのトップ画像を新しい北アルプスに入れ替えたり、
facebookの設定に手間取ったり、、、こだわりで嵌まってしまいました。（爆）
facebookはシェアすると、、、
こんな感じになることが判りました。
metaタグの、fb:app_idを入れないと、シェアできないからこんな感じにはなりません。
思いっきり文字化けしてますが、タイムラインに表示されるだけです。
facebookで企業の宣伝してシェアしてもらうには結構大変な作業ですねぇ。
ちなみに、ogpの設定の参考にしたサイトは、
http://webdesign.practice.jp/ogp-facebook-twittercards
facebookのAPP_IDの取得について調べたサイトは、
https://blog.sixapart.jp/2012-04/fb-app-id.html
http://wp-suzaku.com/2016/02/01/【2016年版】facebook-app-id（アプリid）の取得方法/
です。
facebookは参考にしたサイトから色々と変更されているので、試行錯誤取得に1時間かかりました。
参考サイトと同じ画面が全くでてこないんだもの・・・。
追記です！
ogpの設定について色々調べると色々わかってきました。
<html>または<html lang="ja">を上記のように拡張したほうが良いみたいです。
fb:〜fb#はfacebookの設定で、ogpを正常に動作させるおまじないらしいです。無くても動作はしましたが・・・
ちなみに、
<html xmlns:og="http://ogp.me/ns#"> のような表記は古い表記ということです。
さらに追記；
http://beginners-hp.com/seo_Breadcrumb.html を参考にして、その他ボタンを追加してみました。
http://webdesign.practice.jp/ogp-facebook-twittercards
facebookのAPP_IDの取得について調べたサイトは、
https://blog.sixapart.jp/2012-04/fb-app-id.html
http://wp-suzaku.com/2016/02/01/【2016年版】facebook-app-id（アプリid）の取得方法/
です。
facebookは参考にしたサイトから色々と変更されているので、試行錯誤取得に1時間かかりました。
参考サイトと同じ画面が全くでてこないんだもの・・・。
追記です！
ogpの設定について色々調べると色々わかってきました。
<html>または<html lang="ja">を上記のように拡張したほうが良いみたいです。
fb:〜fb#はfacebookの設定で、ogpを正常に動作させるおまじないらしいです。無くても動作はしましたが・・・
ちなみに、
<html xmlns:og="http://ogp.me/ns#"> のような表記は古い表記ということです。
さらに追記；
http://beginners-hp.com/seo_Breadcrumb.html を参考にして、その他ボタンを追加してみました。
0 件のコメント:
コメントを投稿