Bloggerで記事タイトルの見出しタグを変更するソースコード 結城永人 - 2017年9月16日 (土) ブログの検索エンジンからのアクセスアップを考えると記事タイトルのHTMLの見出しタグにはh1かh2を使いたい。サイト評価を上げるためにキーワードを入れても検索エンジンに重視されなければSEO（検索エンジン最適化）効果が下がってしまうせいだ。見出しタグは基本的に大きいほどにキーワードとして注目される。 Bloggerで2017年の公式テーマのContempoを使っていて他のSohoとEmporioとNotableも同じだけれども記事ページの記事タイトルの見出しタグにはh3が付いている。 変更するためにはブログのHTML編集が必要なんだ。 ウェブからテーマの「HTML編集」か、または「バックアップ／復元」からテーマのファイルのデータ（XMLファイル）をダウンロードしてデバイスのアプリでHTML編集を行ってアップロードするかのどちらかを行わなければならない。 追記：旧テーマ：SimpleとDynamic ViewsとPicture WindowとAwesome Inc.とWatermarkとEtherealとTravelの投稿の見出しタグの変更についても掲載した。 記事ページのみタイトルの見出しタグを「h3」から「h2」に変更したソースコード ContempoとSohoとNotableの場合 <b:includable id='postTitle' var='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title != ""'> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'> <h3 class='post-title entry-title'> <a expr:href='data:post.link ?: data:post.url'> <data:post.title/> </a> </h3> <b:else/> <h2 class='post-title entry-title'> <data:post.title/> </h2> </b:if> </b:if> </b:includable> ※太字の部分が書き換え済みだ。 Emporioの場合 <b:includable id='postTitle' var='post'> <!-- Snippetize the post title --> <div class='post-title-container'> <a expr:name='data:post.id'/> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'> <h3 class='post-title entry-title'> <a expr:href='data:post.link ?: data:post.url'> <div class='snippet-container r-snippet-container'> <div class='r-snippetized'> <data:post.title/> </div> <b:if cond='data:post.title != ""'> <div class='snippet-fade r-snippet-fade hidden'/> </b:if> </div> </a> </h3> <b:else/> <h2 class='post-title entry-title'> <data:post.title/> </h2> </b:if> </div> </b:includable> ※太字の部分が書き換え済みだ。 記事タイトルを出力している<b:includable id='postTitle' var='post'></b:includable>の中身を変更している。 実際に取り入れる際には各テーマのソースコードに同じ記述が幾つもあるので、注意してデザインが優先されるブログの投稿ガジェット（BlogのtypeのWidget内）から選んで書き換えなくてはならない。 Bloggerの2017年の公式テーマはトップページなどの一覧ページの記事の抜粋と記事ページのHTMLやCSSが共通になっていて切り離して編集するのが厄介なんだ。 サンプルのソースコードは記事ページのタイトルの見出しタグをh2に、それ以外の抜粋のタイトルはh3のままに止めている。 ただし記事タイトルにリンクのaタグが付いているかどうかで識別されるから記事ページのタイトルにリンクが設定してある場合には無効になってしまう。 全てを一辺に変更するならば記事タイトルを出力している<b:includable id='postTitle' var='post'></b:includable>の中の元々の「h3」を「h1」や「h2」に書き直すだけで良い。 検索エンジンからのアクセスアップを考えると一つのページにh1が幾つも出て来るとどれがブログに最重要なのかとサイト構成が曖昧で分かり難くなってサイト評価に不利だからh2が益しだろう。 Bloggerの2107年の公式テーマはトップページに見えないけれども見出しのh2タグが入っている Contempo｜Blogger 表示される記事の抜粋の一件目の直前に「投稿」と載っていて検索エンジンには分かるようになっている。キーワードのための隠しテキストならばサイト評価でペナルティーを食らう恐れがあるけれども少しだけの機械向けの正面な説明だから大丈夫だろうとそのままにして使っている。 そしてさらに記事の抜粋の後にh3の見出しタグが付いたサイドバーのコンテンツが並んで行くからプログ名のh1からのマークアップの流れを考えると抜粋の記事タイトルはh3が良いかも知れない。 かりにh2に変更すれば後続のサイドバーのサイト内容が見えないh2の「投稿」よりも抜粋の最後の記事タイトルにかかって検索エンジンに理解されるはずだ。サイト評価に大した違いはなさそうにせよ、後続のサイドバーのサイト内容は並んでいる全ての記事の抜粋を纏めている見えない「投稿」という見出しのh2タグにかかった方が構成的に正確だから気に入ってしまう。 旧テーマの投稿のタイトルの見出しタグを変更するソースコード 2017年以前からある七つの公式テーマのSimpleとDynamic ViewsとPicture WindowとAwesome Inc.とWatermarkとEtherealとTravelも投稿のタイトルの見出しタグは全て「h3」になっているので、「h1」や「h2」に変える場合はカスタマイズが必要になる。 デスクトップヴァージョンの投稿の見出しタグのソースコード <b:includable id='post' var='post'> <div class='post hentry uncustomized-post-template' itemprop='blogPost' itemscope='itemscope' itemtype='http://schema.org/BlogPosting'> （中略） <b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'> <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> （中略） </div> </b:includable> 帯文字の二箇所が投稿の見出しの開始と終了のタグになっているので、他のものに書き換えることができる。 旧テーマのデスクトップヴァージョンの投稿の見出しタグはトップページなどのインデックスページも記事／追加ページで共用になっているので、別々に扱いたい場合はソースコードの見出しタグの部分を次のように書き換えると良いと思う。 <b:if cond='data:post.title'> <b:tag class='post-title entry-title' itemprop='name' expr:name='data:view.isMultipleItems ? "インデックスページの見出しタグ" : "記事／追加ページの見出しタグ"'> <b:if cond='data:post.link or (data:post.url and data:blog.url != data:post.url)'> <a expr:href='data:post.link ? data:post.link : data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </b:tag> </b:if> 太字の二箇所を書き換える。帯文字の二箇所はインデックスページと記事／追加ページで、使い分けたい見出しタグの「h1」や「h2」などを入れる。 モバイルヴァージョンの投稿の見出しタグのソースコード 旧テーマはBloggerの管理画面のテーマのメニュー（▼）の するとモバイルヴァージョンのソースコードを変更することができる。 モバイルヴァージョンのインデックスページの見出しタグのソースコード <b:includable id='mobile-index-post' var='post'> <div class='mobile-date-outer date-outer'> （中略） <div class='mobile-post-outer'> <a expr:href='data:post.url'> <h3 class='mobile-index-title entry-title' itemprop='name'> <data:post.title/> </h3> （中略） </div> </b:includable> モバイルヴァージョンの記事／追加ページの見出しタグのソースコード <b:includable id='mobile-post' var='post'> <div class='date-outer'> （中略） <a expr:name='data:post.id'/> <b:if cond='data:post.title'> <h3 class='post-title entry-title' itemprop='name'> <b:if cond='data:post.link'> <a expr:href='data:post.link'><data:post.title/></a> <b:elseif cond='data:post.url and data:blog.url !> data:post.url'/> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <data:post.title/> </b:if> </h3> </b:if> （中略） </div> </b:includable> 旧テーマのモバイルヴァージョンの投稿の見出しのソースコードはインデックスページと記事／追加ページに分かれているなので、それそれの見出しタグを個別にカスタマイズできる。 旧テーマはDynamic Viewsを除いて投稿の見出しタグを変更すると見出しのデザインが反映しなくなるかも知れないので、CSSのソースコードも修正した方が良いと思う。 旧テーマの見出しタグのCSSの例 h3.post-title, .comments h4 { font: $(post.title.font); margin: .75em 0 0; } .mobile h3.post-title { margin: 0; } テーマによってCSSの内容やソースコードの数が変わるけど、とにかく指定先の「h3.post-title」（Dynamic Views以外の旧テーマに必ず、一つ以上、ある）と「.mobile h3.post-title」（Simpleのみ）を見付けて「h3」の部分を消すか新しく使用する見出しタグに変えると以前の見出しのデザインが引き継がれて反映するようになる。 記事ページのタイトルはh2でなくてh1でも良いかも知れないし、ヘッダーのブログ名のh1に加えて二つになっても多過ぎはしない。最重要なのは間違いないから非常に迷うけれども現状ではh2を選んでいる。サイト全体の検索エンジンでのサイト評価を想定すると記事ページのタイトルはh2で、ブログ名だけをh1にしておくのも面白いと感じる。 デザインは何もしなくても引き継がれる。見出しタグに、直接、CSSが指定されているわけではないせいだ。元々の「h3」が「h1」や「h2」に変更されても文字サイズが大きくなったりはしないし、特定の記事タイトルのデザインが反映している。 記事ページのタイトルをh2の見出しタグにしてみて検索エンジンからのアクセスは伸びている感じがする。 今まで記事タイトルの見出しタグがh3だったから本文にはh4を使う場合が多かったけれどもサイト構成の順番からすると記事タイトルのh2の次にはh3が新しく使い易くなったから本文の見出しのキーワードも以前よりもSEO効果を増すと期待している。 追記：ブログの記事タイトルの見出しをh1でやるように変えた。検索エンジンからのアクセスアップはh3からh2に変えても殆ど感じなかったし、h1でもそうで、見出しタグそのもののSEO効果はないに等しい。もはや記事が高品質かどうかこそ大事だと思うので、記事タイトルの見出しタグをh1にして本文の見出しをh2から付けて文章構成を整えながらやって行きたいと考える。 関連ページBloggerブログで記事／追加ページのブログ名から見出しタグのh1を外すImaginary｜Bloggerのテンプレートの提供 コメント 新しい投稿 前の投稿
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
若者たちがFacebookよりもTwitterを多く始めるというソーシャルメディアの利用者数の変化について 僕は Twitter をやって Facebook をやらないので、近年の特に日本の若者たちが似通って来ているのが面白いと思った。 「現在利用しているSNSサービスや動画サイト」について質問したところ、「LINE」の利用率が98.2％、「Twitter」の利用率が81.5％と前...
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
アドセンスの個人のアメリカの税務情報／W-8BEN納税フォームの書き方 アドセンスに利用者の税務情報が必要となり、2021年6月1日以降、YouTubeのサイト広告などで収益を得る場合には税務情報を提出しないとアドセンスの支払いからアメリカの源泉所得税が米国内国歳入法の第三章により、控除される。 Google は、YouTube パートナー プロ...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL／直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
後藤浩輝と抑鬱傾向による突発的な自殺 中央競馬でトップ騎手の一人だった 後藤浩輝 が亡くなっていると気付いた。二千十五年だからまだ二年前の死だった。競馬ファンならば誰でも知っているくらい有名なはずだけれどもテレビのバラエティー番組でも見かけていたと思う。個人的には ダービースタリオン （ゲーム）に熱中していて後藤浩輝...
結城永人
結城永人
コメント