🌐
新規サイトOGP・faviconセットアップ
favicon
png to faviconでぐぐってでてくるこちらのツールが一番使いやすい
pngをドラッグアンドドロップするだけで、faviconまわり一式がダウンロードされる
解凍したファイル一式をルート直下において、head内にコピペで追加するだけ
index.html
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
一応site.webmanifestの中身にnameとshort_nameを入力しておく
site.webmanifestとは
site.webmanifestファイルは、ウェブサイトをモバイルデバイス上のアプリのように表示するために使用される、ウェブアプリケーションマニフェストファイルです。このファイルにより、ウェブアプリケーションの外観や振る舞いをカスタマイズでき、よりリッチなユーザーエクスペリエンスを提供することが可能です。以下にその基本的な使い方を説明します：
-
マニフェストファイルの作成:
- JSON形式で、
site.webmanifestという名前のファイルを作成します。 - このファイルには、アプリの名前、アイコン、表示モード、背景色、テーマ色などを指定します。
- JSON形式で、
-
重要なプロパティ:
-
name: アプリケーションの名前。 -
short_name: ホーム画面に表示される短い名前。 -
icons: ホーム画面に表示されるアイコンの配列。サイズとファイルパスを指定。 -
start_url: アプリケーションが起動したときに最初に開くURL。 -
display: 表示モード（例：fullscreen,standalone,minimal-ui）。 -
background_color: 起動画面の背景色。 -
theme_color: アプリケーションのテーマ色。
-
-
ウェブサイトにマニフェストをリンクする:
- HTMLの
<head>セクションに、マニフェストファイルへのリンクを追加します。 - 例：
<link rel="manifest" href="/site.webmanifest">
- HTMLの
-
テストと検証:
- マニフェストファイルが正しく設定されているかをブラウザのデベロッパーツールで確認します。
- モバイルデバイスでウェブサイトをテストし、アイコンや表示が期待通りに機能するかを確認します。
-
アップデートとメンテナンス:
- アプリケーションが更新された場合、マニフェストファイルも適宜更新してください。
site.webmanifestファイルを適切に設定することで、ウェブアプリケーションをより使いやすく、視覚的に魅力的なものにすることができます。これにより、ユーザーエンゲージメントが向上し、アプリケーションの使用体験が向上する可能性があります。
OGP
- 画像サイズ: 1200x630px
- パス: 相対パスにしないで絶対パスにする
- 手を抜くときは、ディベロッパーツールで画面サイズを1200x630にしてからheroのキャプチャを取って使うのが手っ取り早い
- twitter cardの種類は脳死で
summary_large_image
OGPとは
OGP（Open Graph Protocol）とは、ウェブページがソーシャルメディア上で共有されたときの表示を制御するためのプロトコルです。Facebookによって導入され、その後多くのソーシャルネットワークサービスで採用されました。
OGPを使用すると、ウェブページのタイトル、説明、サムネイル画像などを指定でき、これらの情報はFacebookやTwitterなどのプラットフォーム上でリンクとして共有された際に表示されます。これにより、ウェブページの内容をより魅力的に伝えることが可能となります。
具体的には、HTMLの<head>セクションにメタタグを設定して、以下のような情報を指定します：
-
og:title：ページのタイトル。 -
og:type：コンテンツのタイプ（例：website、article）。 -
og:url：ページのURL。 -
og:image：共有されるときに表示されるイメージのURL。 -
og:description：ページの簡単な説明。
これらのメタタグにより、ソーシャルメディア上で共有された際のウェブページの外観と内容が向上し、クリックスルー率の向上にも寄与します。また、OGPはウェブページのSEO（検索エンジン最適化）にも間接的に影響を与えることがあります。
<head>まとめ
index.html
<title>ページタイトル</title>
<meta name="description" content="ページの説明文" />
<meta name="author" content="製作者の名前or会社名">
<link rel="canonical" href="正規化するURL">
<!-- レスポンシブ対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- favicon -->
<link rel="icon" href="/favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<!-- IE対策 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<!-- 電話番号の自動リンク機能を無効化する -->
<meta name="format-detection" content="telephone=no">
<!-- OGP -->
<meta property="og:site_name" content="サイト名">
<meta property="og:title" content="ページタイトル" />
<meta property="og:description" content="記事の抜粋文" />
<meta property="og:type" content="website" />
<meta property="og:url" content="ページURL" />
<meta property="og:image" content="画像URL" />
<meta property="og:locale" content="ja_JP" />
<!-- twitter card -->
<meta name="twitter:card" content="カード種類" />
<meta name="twitter:site" content="@Twitterユーザ名" />
<meta name="twitter:description" content="抜粋文" />
<meta name="twitter:title" content="ページタイトル" />
<meta name="twitter:image" content="画像URL" />
<head>まとめ 変数化したPHPバージョン
- サイト名や抜粋など同じなんだから何回も書くのが保守性悪すぎる
- phpで変数化したバージョン
index.php
<?php
$TITLE = "タイトル30文字程度";
$DESCRIPTION = "抜粋120文字程度";
$URL = "https://sample.com";
$OGP_IMAGE = "https://sample.com/ogp.png";
$TWITTER_NAME = "@Twitterユーザ名";
$COMPANY_NAME = "会社名や著者名";
?>
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><?php echo $TITLE ?></title>
<meta name="description" content="<?php echo $DESCRIPTION ?>" />
<meta name="author" content="<?php echo $COMPANY_NAME ?>">
<link rel="canonical" href="<?php echo $URL ?>">
<link rel="icon" href="./favicon.ico">
<link rel="apple-touch-icon" sizes="180x180" href="./apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="./favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="./favicon-16x16.png">
<link rel="manifest" href="./site.webmanifest">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="format-detection" content="telephone=no">
<meta property="og:site_name" content="<?php echo $TITLE ?>">
<meta property="og:title" content="<?php echo $TITLE ?>" />
<meta property="og:description" content="<?php echo $DESCRIPTION ?>" />
<meta property="og:type" content="website" />
<meta property="og:url" content="<?php echo $URL ?>" />
<meta property="og:image" content="<?php echo $OGP_IMAGE ?>" />
<meta property="og:locale" content="ja_JP" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:site" content="@<?php echo $TWITTER_NAME ?>" />
<meta name="twitter:description" content="<?php echo $DESCRIPTION ?>" />
<meta name="twitter:title" content="<?php echo $TITLE ?>" />
<meta name="twitter:image" content="<?php echo $OGP_IMAGE ?>" />
</head>
OGP表示チェック
ogp checkerでググればいろいろ出るがとりあえずこちらのラッコさんよさそう
開発中のbasic認証かかっているURLからもしっかりチェックできる
basic認証ありURL
https://username:password@sample.com
Discussion