【76日目】姉妹サイトにTwitterカードと広告を入れてみた
Posted: Last Update:
昨日と一昨日で、こちらのサイトにGoogleアドセンスの広告を入れ、Twitterカードを作りました。今日は、姉妹サイトに広告とTwitterカードを作成していきます!
姉妹サイトに広告とTwitterカード装備
まずは姉妹サイトにGoogleアドセンスの広告を入れるところから。これは、このサイトの設定をそのまま移植するだけなのでちゃきちゃき進めます。
15分ほどかけて完成!テストも良好です。
次にTwitterカードを入れていきます。必要項目を再度チェック…。
<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image"
<meta name="twitter:site" content="@flickr" />
<meta name="twitter:title" content="Small Island Developing States Photo Submission" />
<meta name="twitter:description" content="View the album on Flickr." />
<meta name="twitter:image"
姉妹サイトはこちらのサイトよりも少し構造が単純なので、比較的簡単にできました。入れ込んだPHPはこんな感じ。こちらのサイトと同じです。
echo '<meta name="twitter:card" content="summary" />'."\n";
echo '<meta name="twitter:site" content="@kamenokoki" />'."\n";
echo '<meta name="twitter:title" content="'.$articletitle.'" />'."\n";
echo '<meta name="twitter:description" content="'.$articledescription.'" />'."\n";
echo '<meta name="twitter:image" content="'.$articletimg.'" />'."\n";
echo '<meta name="twitter:site" content="@kamenokoki" />'."\n";
echo '<meta name="twitter:title" content="'.$articletitle.'" />'."\n";
echo '<meta name="twitter:description" content="'.$articledescription.'" />'."\n";
echo '<meta name="twitter:image" content="'.$articletimg.'" />'."\n";
本番環境でテスト
さて、テストは本番環境じゃないとできないんですよね…。ドキドキします…。やってみますか。
表示は良好です。
twitterカードも問題いなくできていました!
今日はここまで
最近姉妹サイトでやっている100日で漢字検定1級合格を目指すチャレンジに忙しくて、あまり作業時間がとれていません…。記事も書きかけのがあるのですが、なかなか完成しないなぁ。
のんびりとやっていきたいと思います!明日はまた、やりたいことリストに戻って、色々とサイトを綺麗にしていきたいです。
- サイトマップをGoogleとBingに送信する手順を作る
- PHP関数「strtime」を利用している所を書き換える
- PHPの「file_exist」を「is_file」に置き換え
- CSSで「grid-gap」を利用している部分を書き換える
- 人気投稿の準備として、アクセス解析をするPHPを作成する
- 過去の日記のイメージ画像を作成
- 日記の過去記事のPHPの動きが重いので代替案を考える
- 関連記事用のパーツを作る
- twitterカードを作成する ←完了
- index.phpのhead部分のPHPが重い、軽くする ←完了
- mainフォルダをmenuフォルダに書き換える
- RSSの内容を共通仕様から入れ込む
- 記事にカテゴリーを入れ込む
- Google Lighthouseに指摘された内容に対応する
おまけのロードマップ
サイト作成がどのくらい進んでいるかロードマップで進捗を確認すると、ここまで進んでいます。
- 準備 - サイトの全体像を決める
- 使用するプログラミング言語を決めて環境を整える
- サイトの基本構造を作って公開する
- 収益化に最適なサイトにアップグレードする
- GoogleアドセンスとAmazonアソシエイトの申し込みをする ←完了!
- ローカルで簡単に入力ができるようにフォームを作る
- フォローアップ - より収益化に向いたサイト構造に変更する
