この記事は2016年1月1日のものです。現在は状況が異なる可能性がありますのでご注意ください。
2024年10月18日 (金曜日)本日の人気記事トップ10
今日は2024年10月18日です。
目次に行く・戻る
メルカリ招待コード: 招待コードをコピー
多くのブログやサイトで今ではFacebookやTwitterのOGP設定がされています。
なので、 OGP設定はある意味SEO的にもFacebookなどのSNSを使用している人にとっては、 必須の設定と言えるかもしれません。
これまでBloggerブログにおいても特別に設定方法が異なりましたが、 WordPressにおいても関数を用いての設定などと、 ちょっと特殊の部類なのかもしれません。
そこで、
+これまでによく読まれている記事一覧クリックでOPEN+
150,643件の PV
106,669件の PV
75,748件の PV
67,240件の PV
44,484件の PV
40,725件の PV
38,216件の PV
37,259件の PV
36,612件の PV
33,351件の PV
今回はWordPressでOGP設定の方法を 備忘録として残しておきたいと思います。
いろいろな説明がされているサイト様があります。 ですが、 良いのでは? と思われたサイト様を参考にさせて頂きました。
(参考サイト) [Wordpress]これは簡単!プラグインを使わずにOGPを設定する方法! | コンチクワブログ [Å] Facebookで記事をシェアしたら一部でタイトルが文字化け!解決方法ご紹介! | あかめ女子のwebメモ
アドセンス336pxPC閲覧記事下表示1つ目コード
まず、
普通にheader.php内にHTMLにて記述しても大丈夫なような気もしますが、
やはり個別ページやカテゴリ毎トップページなどと設定をしっかりするには関数を使わなければなりません。
(おそらく)
また、 header内のHTMLという宣言をする初めの文言内にも追加する文字もあるようですが、 実際のところHTML5においては必要ないようです。
こんな風にする必要はないようです。
<html xmlns="https://www.w3.org/1999/xhtml" xmlns:og="https://ogp.me/ns#" xmlns:fb="https://www.facebook.com/2008/fbml">
これは、 HTML4まで?なのでしょうか。
WordPressではおそらく必要ないと思います。 (テーマにもよるのでしょうか。たぶんそれはない…。BloggerでもHTML5なので必要ありませんでした)
なので、
headerのHTMLの宣言をする部分は一切弄らなくてよいです。 header.php内に以下ように記述します。
<!-- ここからOGP -->
<meta property='fb:app_id' content='APP IDを記入'>
<meta property="og:locale" content="ja_JP" />
<meta property="og:type" content="blog">
<?php
if (is_single()){//単一記事ページの場合
if(have_posts()): while(have_posts()): the_post();
echo '<meta property="og:description" content="'.mb_substr(get_the_excerpt(), 0, 100).'">';echo "\n";//抜粋を表示
endwhile; endif;
echo '<meta property="og:title" content="'; the_title(); echo '">';echo "\n";//単一記事タイトルを表示
echo '<meta property="og:url" content="'; the_permalink(); echo '">';echo "\n";//単一記事URLを表示
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:description" content="'; bloginfo('description'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログの説明文を表示
echo '<meta property="og:title" content="'; bloginfo('name'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのタイトルを表示
echo '<meta property="og:url" content="'; bloginfo('url'); echo '">';echo "\n";//「一般設定」管理画面で指定したブログのURLを表示
}
?>
<meta property="og:site_name" content="<?php bloginfo('name'); ?>">
<?php
$str = $post->post_content;
$searchPattern = '/<img.*?src=(["\'])(.+?)\1.*?>/i';//投稿にイメージがあるか調べる
if (is_single()){//単一記事ページの場合
if (has_post_thumbnail()){//投稿にサムネイルがある場合の処理
$image_id = get_post_thumbnail_id();
$image = wp_get_attachment_image_src( $image_id, 'full');
echo '<meta property="og:image" content="'.$image[0].'">';echo "\n";
} else if ( preg_match( $searchPattern, $str, $imgurl ) && !is_archive()) {//投稿にサムネイルは無いが画像がある場合の処理
echo '<meta property="og:image" content="'.$imgurl[2].'">';echo "\n";
} else {//投稿にサムネイルも画像も無い場合の処理
echo '<meta property="og:image" content="https://www.hogehoge.com/wordpress/wp-content/uploads/default_img1.jpg">';echo "\n";
}
} else {//単一記事ページページ以外の場合(アーカイブページやホームなど)
echo '<meta property="og:image" content="https://www.hogehoge.com/wordpress/wp-content/uploads/default_img1.jpg">';echo "\n";
}
?>
<!-- ここまでOGP -->
上記の黄色下線の部分は参考サイト様ですと、
<meta property="fb:admins" content="◯◯◯◯◯◯◯◯" /><!-- 自分のFacebookアカウントに対応するid -->
となっていますが、 adminIDを記述するのはちょっと抵抗があります。
なので、 appIDに変更しました。
また、 参考サイト様では、 下線赤部分を下に記入(記載)ありましたが上でも問題ありません。
あとは、
以下のサイトに行って自分のブログもしくはサイトのURLを入力して確認してみてください。 デバッガー - 開発者向けFacebook
OGPについては以下サイト様が分かりやすく解説されています。 フェイスブック、ミクシィ、グリーで使われている OGP (Open Graph Protocol) とは何か - IT戦記
P・S) 正直、ちょっとくらいエラーがあってもOGP設定しないよりはマシです。
これを機にこれまでOGP設定していなかったという方はしてみてはいかがでしょうか。
あなたにおすすめな関連記事 伝えたいこと 備忘録
郵便番号はご自分がお住まいの地域の郵便番号であれば覚えているかもしれません。 年賀状や暑中見舞い、その他に荷物の発送などの際(宅急便や宅配便など)にも郵便番号の記載欄があります。
php WordPress
WordPressで使われているphpというものがあります。 これにもバージョンがあるらしく、 現状私が利用させていただいているサーバーのバージョンは5.5ではなく5.2.17でした。 そして、 Fa…
もっと読む
伝えたいこと 備忘録
まぁ、誰もが思う。 自動販売機みたいにお金がちゃりんちゃりんって置いてあるだけで、収入得られないのかなぁ。 なんてことってあると思います。 家賃収入もそうなのではないでしょうか。 でも、…
もっと読む
インターネット セキュリティ 伝えたいこと 備忘録 時事ネタ
先日、三井住友銀行からメールにて上記タイトル「【必ずご確認ください】「入出金規制」メール・SMSは詐欺です」というメールが送信されてきました。SMSは送られてきていませんが、SMSにもどうやら同様の内…
もっと読む
伝えたいこと 備忘録 治療
以前に帯状疱疹かと思い皮膚科を受診しました。 そしたら、ちょっと診断まではつかないなぁ。ということでステロイド軟膏と神経障害性疼痛に処方されるリリカという薬が処方されました。 それから1ヶ月弱・・・・…
もっと読む
伝えたいこと 備忘録 時事ネタ 治療
心臓の位置は通常は胸の真ん中辺りにありますが、若干左側にあるとも言えます。ただ、心臓の軸が左側に傾いているということが正確な表現でもあります。よく心電図(ECG)などをとる時に、アイントーベンの三角形…
もっと読む
おすすめの記事一部広告 Total363
アドセンス336pxPC閲覧記事下表示1つ目コード
目次に戻る
-WordPress , カスタマイズ , 備忘録 -OGP設定 , WordPress
目次に戻る
目次に戻る
Opt-out complete; your visits to this website will not be recorded by the Web Analytics tool. Note that if you clear your cookies, delete the opt-out cookie, or if you change computers or Web browsers, you will need to perform the opt-out procedure again.
You may choose to prevent this website from aggregating and analyzing the actions you take here. Doing so will protect your privacy, but will also prevent the owner from learning from your actions and creating a better experience for you and other users.
This opt out feature requires JavaScript.
The tracking opt-out feature requires cookies to be enabled.
comment