HTMLのmeta情報(title,description,ogp,favicon,iconまで)

study_chinese 仕事

なんだかんだで毎回検索している気がするので自分用にメモしておこうと思う。

<title>タイトル</title>
<meta name=”description” content=””>
<link rel=”shortcut icon” href=”favicon.ico” type=”image/x-icon”>
<link rel=”apple-touch-icon” href=”180.jpg” sizes=”180×180″>
<link rel=”icon” type=”image/jpg” href=”256.jpg” sizes=”256×256″>

<!– 共通設定 –>
<meta property=”og:title” content=”タイトル”>
<meta property=”og:type” content=”website または article”>
<meta property=”og:url” content=”表示したいページのURL(絶対パス)”>
<meta property=”og:image” content=”表示したい画像のURL(絶対パス)”>
<!– 以下省略可能ですが、site_name, description, localeは載せたほうがいいです。 –>
<meta property=”og:site_name” content=”サイト名が入ります。”>
<meta property=”og:description” content=”表示したいページの説明がはいります。”>
<meta property=”og:locale” content=”サイトがサポートしてる言語を記述します。ja_JPで基本OK。”>
<meta property=”og:audio” content=”音声ファイルのURL(絶対パス)”>
<meta property=”og:video” content=”動画ファイルのURL(絶対パス)”>
<!– /共通設定 –>

<!– Facebookの設定 –>
<!– 記載しなくても動作しますが極力設定しましょう。記載する場合はどちらか一つ。個人的にapp_id推奨です。 –>
<meta property=”fb:app_id” content=”App-IDがここに入ります。”>
<meta property=”fb:admins” content=”adminIDがここに入ります。”>
<!– /Facebookの設定 –>

<!– Twitterの設定 –>
<meta name=”twitter:card” content=”summary または summary_large_image”>
<!– 以下省略可能です。 –>
<meta name=”twitter:site” content=”Twitterカードのフッターで使用されるウェブサイトの@ユーザー名”>
<meta name=”twitter:creator” content=”コンテンツ作成者/著者の@ユーザー名”>
<!– /Twitterの設定 –>

 

参考サイト

Facebook・X(Twitter)のOGP設定ガイド【2023年10月時点】|ブログ|ウェブスタジオTANI
Facebook・TwitterのOGPについてできる限りわかりやすくまとめました。

コメント

タイトルとURLをコピーしました