Bloggerブログで投稿の日付からアーカイブページへ記事タイトルから記事ページへリンクする方法 結城永人 - 2018年9月9日 (日) 僕がBloggerのテンプレートで最も不可解だと感じるのは記事の日付に記事ページへのリンクが付いている。およそ日付にリンクを付けるならば年別や月別などのアーカイブページへ向けなくてはピンと来ないだろう。 日付のリンクは目立たないし、殆ど誰も使わないようだから放っておいたけど――文字色などのデザインがリンクとは気付かないくらい他と変わらない――ただしSEO対策からすると検索エンジンが見ているのは間違いないので、アクセスアップのためにサイト評価を上げるべくは記事ページへのリンクを記事タイトルに付けて日付からはアーカイブページへ変更するのが望ましいと考える。 リンク名のアンカーテキストとリンク先のサイト内容が合ってないのは不正行為と判断される危険性を免れない。あからさまに無関係なリンクを貼れば使った訪問者から騙したともはや嫌われ兼ねないわけで、SEO対策でも検索エンジンでのサイト評価を下げる要因になると懸念される。 Bloggerのテンプレートのように内部リンクで、多少、ずれているのは特に問題はなさそうだけど――見方によれば日付のリンクが記事ページでもサイト内容(公開日)に含まれるから妥当なデザインだろう――しかし石橋を叩いて渡るのがアクセスアップに繋がるのではないか。適切なリンクを手堅く貼るのが訪問者と検索エンジンに好かれる可能性を高めてくれると感じて止まない。 カスタマイズに取りかかって上手く行ったから必要な方法をブログに載せておきたい。 目次ブログの投稿ガジェットでアーカイブのURLを生成する記事ページのアーカイブのURLを取得する独自タグアーカイブのリンクのテーマ毎のマークアップ新テーマで日付のリンクをアーカイブに変更する記事タイトルに記事ページへのリンクを付ける注目や人気の投稿の記事タイトルのカスタマイズ旧テーマで日付のリンクをアーカイブに変更する記事タイトルに記事ページへのリンクを付ける ブログの投稿ガジェットでアーカイブのURLを生成する Two white sweets by lenkafortelna / Pixabay やってみると予想以上に難しいと驚く。というのは記事タイトルの下の日付はブログの投稿ガジェットに組み込まれるリンクとしてアーカイブのURLを直ぐには取得できなかったんだ。Bloggerの独自タグで、URLのデータが取得できればどんなページへもリンクを貼るのは容易い。ところがブログの投稿ガジェットで、記事ページのアーカイブのURLそのものを取得するのは無理らしい。なので事前に他の幾つかのデータを組み合わせて加工しなくてはならなかった。 記事ページのアーカイブのURLを取得する独自タグ ブログの投稿ガジェット:Blogのtypeのwidget内では投稿の公開日の年や月のデータが取得できるからそれを使うとアーカイブのURLを生成できるに等しい。リンクを作成するHTMLのaタグのhrefに記入するには年や月のデイレクトリーだけでも相対パスとして役立つ。内部リンクはルートドメインを省略しても構わないし、ちゃんと移動できるようになる。 SEO対策ならばリンクのURLにはルートドメインまで含めた絶対パスを使うと良いかも知れない。読み込む文字列が少しでも正確な方が検索エンジンの機械/コンピューターには分かり易いという。年や月のデータの直前にルートドメインをくっ付けてアーカイブのURLを完全に生成するのもBloggerの独自タグで、可能なので、僕は好んで使っているんだ。 年別のアーカイブのリンクのソースコード <a expr:href='data:view.url path (data:post.date.year + "/")'>リンク名</a> ブログの投稿ガジェットではpost.date.yearから記事毎の年のデータを取得できる。演算できるevalを使ってページURLのview.urlにpathをかけてくっ付けて末尾に半角スラッシュも追加すると「https://example.blogspot.com/2018/」のようなBloggerの年別のアーカイブのURLが生成される。リンクのaタグのリンク先のhrefに指定してリンク名と共に記載すればブログの年月のアーカイブのリンクが完成する。 月別のアーカイブのリンクのソースコード 投稿した年と同じように月のデータもpost.date.monthから取れるので、evalとpathによって年別のアーカイブのURLに「+」でさらにくっ付ければ大丈夫だけど、ただし月の出力される数値が全て二桁にはならない。 Bloggerの月別のアーカイブのURLは一月から九月まで「https://example.blogspot.com/2018/01/」のような月の先に「0」が付いた二桁の表示にしないとエラーページになってしまう。 だから一月から九月までは月の先に「0」が付いて十月から十二月まではそのままで出力されるようにソースコードを二種類に振り分けて記載する必要がある。 <b:if cond='data:post.date.month lt 10'> <a expr:href='data:view.url path (data:post.date.year + "/0" + data:post.date.month + "/")'>リンク名</a> <else/> <a expr:href='data:view.url path (data:post.date.year + "/" + data:post.date.month + "/")'>リンク名</a> </b:if> 全ての月が二桁で表示されるので、月別のアーカイブのURLのリンクにpost.date.monthを使っても一月から九月までエラーページにならない。 振り分けの独自タグのifの条件のcondの「lt」は「<」を示す。なので「data:post.date.month lt 10」はページの月が十未満(九以下)を意味する。マークアップに「<」を使うとエラーになってHTML編集を上書きできなくなる。他の独自タグの一部と見做されるせいなので、エスケープするために「lt」を使う。一般的に文字実体参照の「<」を使っても大丈夫だけれどもBloggerの独自タグでは「<」の代わりに「lt」が用意されている。 追記:月別のアーカイブリンクのソースコードはhref属性の内容を三項演算子で振り分けると半分以下に短縮することができる。 <a expr:href='data:view.url path (data:post.date.year + (data:post.date.month lt 10 ? "/0" : "/") + data:post.date.month + "/")'>リンク名</a> 以下のカスタマイズのマークアップの月別のアーカイブリンクに関するソースコードは短縮して書き直した。 アーカイブのリンクのテーマ毎のマークアップ アーカイブの年別や月別のソースコードを使ってブログのテンプレートのブログの投稿ガジェット:Blogのtypeのwidget内の実際に反映するかぎりの場所ならばどこでもマークアップして表示できる。 僕は投稿の日付の記事ページへのリンクをアーカイブへのリンクと取り替えて記事ページへのリンクは記事タイトルに付けるようにカスタマイズしたので、一連のマークアップについて纏めておこうと思う。 新テーマで日付のリンクをアーカイブに変更する ContempoとSohoとEmploymentとNotableが対象になる。 何れもデフォルトで日付のソースコードはカスタマイズできない。Bloggerのサーバーから<b:include name='super.headerByline'/>で出力されるためだ。この中に含まれるpostTimestampのidのincludableタグを取り出して変更すると当のソースコードの新しいマークアップがデフォルトよりも優先して読み込まれるようになる。 年別のアーカイブのリンクを使う場合 <b:includable id='postTimestamp'> <span class='byline post-timestamp'> <data:byline.label/> <b:if cond='data:post.url'> <a expr:href='data:view.url path (data:post.date.year + "/")' class='timestamp-link'> <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time> </a> </b:if> </span> </b:includable> ※ソースコードはデフォルトの日付のデザインに合わせて修正済みだ。 月別のアーカイブのリンクを使う場合 <b:includable id='postTimestamp'> <span class='byline post-timestamp'> <data:byline.label/> <b:if cond='data:post.url'> <a expr:href='data:view.url path (data:post.date.year + (data:post.date.month lt 10 ? "/0" : "/") + data:post.date.month + "/")' class='timestamp-link'> <time class='published' expr:datetime='data:post.date.iso8601' expr:title='data:post.date.iso8601'><data:post.date/></time> </a> </b:if> </span> </b:includable> ※ソースコードはデフォルトの日付のデザインに合わせて修正済みだ。 どちらの場合でもBlogのtypeのwidget内のwidgetsettingsと他のincludableタグの外側にマークアップを行う。 すると新しいpostTimestampとしてsuper.headerBylineが読み込んで記事ページの日付にアーカイブのリンクを付けてブログに表示するようになる。 新テーマの投稿の日付は注目や人気の投稿ガジェットでも使われているので、ブログの投稿ガジェットと同じようにリンク先をアーカイブへ変更するならば個別にカスタマイズしなくてはならない。 方法は三つとも共通している。個々のwidget内にpostTimestampのidのincludableタグを追加する。注目の投稿だとFeaturedPost、人気の投稿だとPopularPostsのtypeのwidgetタグのソースコードがカスタマイズの対象になる。 記事タイトルに記事ページへのリンクを付ける 四つのテーマに共通の記事ページの記事タイトルのソースコードがそれそれのBlogのtypeのwidget内のpostTitleのidのincludableタグに記載されている。 記事ページの記事タイトルにリンクを付けるソースコード ContempoとSohoとNotableの場合 <b:includable id='postTitle' var='post'> <a expr:name='data:post.id'/> <b:if cond='data:post.title != ""'> <h3 class='post-title entry-title'> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'> <meta expr:content='data:post.url.canonical'/> <a expr:href='data:post.link ?: data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a> <b:else/> <meta expr:content='data:post.url.canonical'/> <a expr:href='data:post.url' rel='bookmark' title='permanent link'> <data:post.title/> </a> </b:if> </h3> </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'/> <h3 class='post-title entry-title'> <b:if cond='data:post.link or (data:post.url and data:view.url != data:post.url)'> <meta expr:content='data:post.url.canonical'/> <a expr:href='data:post.link ?: data:post.url' rel='bookmark' title='permanent link'> <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> <b:else/> <meta expr:content='data:post.url.canonical'/> <a expr:href='data:post.url' rel='bookmark' title='permanent link'> <data:post.title/> </a> </b:if> </h3> </div> </b:includable> ※太字の部分が新たに追加したソースコードだ。 トップやアーカイブなどのインデックスページの記事の抜粋/スニペットの記事タイトルも含まれている。 ブログの投稿ガジェットから記事タイトルを出力する二つの<data:post.title/>の一つ目がインデックスページ用のなので、二つ目の記事ページ用のソースコードをリンク付きに変更している。 日付から記事ページのリンクを外すと他の部分も消えてしまうので、デフォルトで付いていたURLを指定する以外のmetaタグと「rel='bookmark'」と「title='permanent link'」を記事ページだけではなくてインデックスページでも追加している。 何れも構造化データに関与していて外してもブログの閲覧に支障はないけど、しかし検索エンジンに記事ページへのリンクだと示しているからSEO対策に使うと良いかも知れない。 僕はmetaタグは必要ないと考えて使わないようにした。HTMLではbody内に不要なので、サイトで使うとしたら一般的にMicrodataの構造化データのためだけれども新テーマではそうしたマークアップのitemscopeやitemtypeやitempropは全く行われてない。旧テーマでは数多く行われていたけれども新テーマではむしろGoogle推奨のJSON-LDの構造化データに置き換えられているようなんだ。ソースコードに只単にmetaタグが置かれていてもSEO効果は期待できなさそうだから外すのは吝かではない。 残りの二つはHTMLでも標準的にあり得るマークアップだからそれ自体でSEO効果を期待できる。「rel='bookmark'」は記事ページへのリンクをブックマークリンクとして示すと共にMicroformatsのコンテンツのためのhAtomの構造化データを取り入れれば任意項目として有用性を持つ。「title='permanent link'」は記事ページへのリンクをパーマリンクとして示すと共にパソコンでは閲覧中に表示できるツールチップの内容を含むから訪問者にとっても役立たないわけではない。 使わなくても構わないかも知れないけど、もしも使うならば注目や人気の投稿の記事タイトルの記事ページへのリンクのマークアップにも合わせるのが良いと思う。 新テーマのどちらの日付の記事ページへのリンクにもデフォルトで「rel='bookmark'」と「title='permanent link'」が付いている。リンク先をアーカイブページへ変更した場合、記事タイトルの記事ページへのリンクに追加しないとそれそれの機能は引き継がれないんだ。 注目や人気の投稿の記事タイトルのカスタマイズ どちらもカスタマイズに必要なソースコードは同じだけど、デフォルトでサーバーから出力される状態だから個別に取り出してマークアップを行わなくては変更できない。 <b:includable id='snippetedPostTitle'> <h3 class='post-title'> <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a> </h3> </b:include> ※太字の部分が追加したマークアップだ。 注目の投稿はFeaturedPost、人気の投稿はPopularPostsのtypeのwidget内にwidgetsettingsと他のincludableタグを避けて記載する。 最初は何もなくて<b:include name='snippetedPostTitle'/>でサーバーから呼び出されるけど、ところがテンプレートのソースコードに定義付けの同名のsnippetedPostTitleのidのincludableタグを載せておくと優先されるからカスタマイズが可能になる。 僕はContempoテーマを使ってカスタマイズした記事タイトルの記事ページへのリンクの全てに「rel='bookmark'」と「title='permanent link'」を追加するようにした。 デザインは殆ど変わらないし、概して非表示のコンテンツなので、訪問者にとって有用性は少ないにせよ、検索エンジンは読み取るからブログへのSEO効果が全くないとは考えられない。 旧テーマで日付のリンクをアーカイブに変更する シンプルと動的ビューと画像ウィンドウとAwesome Inc.とウォーターマークとエスィリアルと旅行が対象になる。 旧テーマは投稿の日付が記事タイトルの上の日付ヘッダーと本文の下の時刻のフォーマットの二つに分かれているけど、ただしデフォルトで記事ページへのリンクが付いているのは本文の下の時刻のフォーマットだけだ。 なので当該のマークアップを変更するソースコードを取り上げる。 年別のアーカイブのリンクを使う場合 <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a expr:href='data:view.url path (data:post.date.year + "/")' class='timestamp-link'><abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr></a> </b:if> </b:if> </span> 月別のアーカイブのリンクを使う場合 <span class='post-timestamp'> <b:if cond='data:top.showTimestamp'> <data:top.timestampLabel/> <b:if cond='data:post.url'> <a expr:href='data:view.url path (data:post.date.year + (data:post.date.month lt 10 ? "/0" : "/") + data:post.date.month + "/")' class='timestamp-link'> <abbr class='published' expr:title='data:post.timestampISO8601' itemprop='datePublished'><data:post.timestamp/></abbr> </a> </b:if> </b:if> </span> 旧テーマのソースコードはデスクトップとモバイルに分かれているので、前者はpostのidのincludableタグ、後者はmobile-postのidのincludableタグの内容を必要な分だけ変更する。 どちらの場合もpost-timestampのclassのspanタグの中のaタグをアーカイブページへのリンクのソースコードに置き換える。 記事タイトルに記事ページへのリンクを付ける デスクトップ用のソースコード <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 or (data:post.url and data:blog.url != data:post.url)'> <meta expr:content='data:post.url.canonical' itemprop='url'/> <a expr:href='data:post.link ? data:post.link : data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a> <b:else/> <meta expr:content='data:post.url.canonical' itemprop='url'/> <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a> </b:if> </h3> </b:if> ※太字の部分が新たに追加したソースコードだ。 モバイル用のソースコード <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'> <meta expr:content='data:post.url.canonical' itemprop='url'/> <a expr:href='data:post.link' rel='bookmark' title='permanent link'><data:post.title/></a> <b:elseif cond='data:post.url and data:blog.url != data:post.url'/> <meta expr:content='data:post.url.canonical' itemprop='url'/> <a expr:href='data:post.url'><data:post.title/></a> <b:else/> <a expr:href='data:post.url' rel='bookmark' title='permanent link'><data:post.title/></a> </b:if> </h3> </b:if> ※太字の部分が新たに追加したソースコードだ。 どちらも<a expr:name='data:post.id'/>以下の記事タイトルのソースコードをカスタマイズしている。 追加ページの記事タイトルにも反映する。 リンクのマークアップの他に「itemprop='url'」(metaタグ)や「rel='bookmark'」や「title='permanent link'」を追加するのはデフォルトの日付の記事ページへのリンクからの引き継ぎで、何れも構造化データに関与していて検索エンジンに記事ページへのリンクだと伝えるのに役立つ。 外して使わなくてもブログの閲覧、またはデザインにも大きな支障はないと思うけど、しかしながらSEO対策のためには使うべきだ。 関連ページImaginary|Bloggerのテンプレートの提供 参考サイトLes paramètres de dates [day/month/year/dayOfWeek/dayOfYear]Les opérateurs d'URLs [path/params/appendParams/fragment]postTimestamp [GV2]snippetedPostTitle コメント ふじやん さんの投稿… 先日 Blogger にもはてなスターを設置出来ることを知り試してみたのですが、トップページには表示されるものの、記事ページには表示されず。おそらくタイトル(h3)がリンクになっていないと駄目なのではと思い、こちらの記事を参考に記事ページのタイトルにもリンクを付けてみたところ、予想通りはてなスターが表示されました。https://www.hatena.ne.jp/help/star/guide 2019年2月11日 18:16 結城永人 さんの投稿… はてなスターが表示されて良かったです。ヘルプの設定方法を見ると非常に古くて最初のクラシックテーマで説明されてます。今の新旧の公式テーマでも記事ページの記事タイトルは見出しのh3付きのリンクなしのデザインですから基本的に変わらないでしょう。 2019年2月11日 19:18 ふじやん さんの投稿… こんばんは。こちらの記事を参考に、当ブログの記事投稿日にアーカイブリンクを付けることを試みてみたですが何故か上手く行かず…どうやらタグの一部が間違っているようです。data:post.month となっているところを data:post.date.month に直したら上手くいきました。(間違ってるところ6ヶ所あるようです)以上、ご報告まで。 2021年2月13日 20:07 結城永人 さんの投稿… ご報告、ありがとうございます。確かに「.date」が抜けてましたので、修正しました。目が悪くてどうしようもないですが、注意しながら誤りなく載せたいものです。 2021年2月13日 20:25 新しい投稿 前の投稿
細川慎二のどうにも泣けて来てしまうストリートライヴのアルトサックス サックス奏者の 細川慎二 のYouTubeチャンネルの Sax in the Night City で出ているサックスのストリートライヴの動画が美しい音色と相俟った街角の雰囲気の良さで心底と泣けて来るほどの感動を催させる。 細川慎二のアルトサックスの美しい音色が響き渡る街角の...
宜保愛子は本物の霊能力者だと考えられる三つの真実 昭和から平成にかけてテレビや雑誌で何度も大きく取り上げられて物凄く活躍した霊能力者の 宜保愛子 がいた。何気なく昔のテレビ番組を観ていたら霊視は嘘だったと思えない内容で、本当にびっくりした。昔、そんなに引き付けられて観ていたわけではないし、改めて霊能力が本当かどうかを確かめようと...
平田監督の白井球審の誤審への抗議はパワハラへの強力な対処法に他ならない 日本プロ野球で 佐々木朗希が完全試合を実現して 次の試合も八回まで無安打と無失点の状況で、次の試合はどうかと注目した4月24日の対オリックスバファローズ戦は初回の先頭打者の初球にヒットを打たれて五回に二失点を喫して連続の無安打と無失点が両方とも途絶えてしまった。 しかし予想外...
アドセンスのGDPRに日本でも対応しなくてはならない場合がある アドセンスの個人情報のCookieなどの使用に関してサイトの訪問者に同意を得なくてはならない法律としてEU(European Union/欧州連合)の GDPR (General Data Protection Regulation/EU一般データ保護規則)がある。外国の個人情報...
伊良部秀輝が自殺した原因はミッドライフクライシスによる鬱と飲酒だと考える プロ野球選手の 伊良部秀輝 が自殺したと知ってショックを受けたことがあった。もう十年以上前になる。2011年の夏、享年四十二と早過ぎたのに加えて大好きな投手の一人だったので、とても残念に感じた。 目次 伊良部秀輝が大好きだった記憶 負けても自分のスタイルを貫き通した 野球への...
玉置浩二のメロディーは涙腺緩んで総毛立つ名曲中の名曲だ 玉置浩二 のYouTubeの公式チャンネルで、最も気に入りの メロディー のライブ版が追加されていた。曲自体をちゃんと聴いたのは約二十五年振りかも知れないけど、しかし初めての内容から以前にも況して大変な感動を覚えることになった。 玉置浩二 『メロディー』Live at Tok...
日本人がジャニーズ事務所で行われた性加害よりも恐れていること イギリスの公共放送のBBC(British Broadcasting Corporation/英国放送協会)が日本のジャニーズ事務所の創業者の ジャニー喜多川 の性加害について取り上げたドキュメンタリーの J-POPの捕食者:秘められたスキャンダル に衝撃を受けた。 目次 ジ...
Imgurで画像URLと埋め込みコードを取得する方法 Imgur は自分でアップロードした画像については画像URL/直リンクを取得して他のサイトにHTMLのimgタグで表示させられる。 そして自分と他の人たちも含めて画像の埋め込みコードを取得して他のサイトのHTMLに、そのまま、記載して表示させられもする。 目次 Img...
沖雅也の涅槃への自殺と双極性障害 かつて俳優の 沖雅也 の自殺が伝えられたとき、遺書の言葉とされた「おやじ、涅槃でまっている」と共に何なのかと疑問を感じたのを良く覚えている。聞き慣れない「涅槃」という言葉が入っても何十年も過ぎた今振り返っても自殺者の遺書として本当に珍しい表現だったと改めて驚く。 沖雅也が書い...
生島浩の5:55の心の目に光り輝く尊さ 日本の ホキ美術館 は日本人の画家の写真のように細密に描かれた写実絵画を中心的に所蔵している。その中で、絵を印刷したポストカードの売り上げがホキ美術館の設立当初から一位で、常に最高の人気を誇るのが生島浩の 5:55 (五時五十五分)といわれる。僕も一見して忽ち引き付けられる物凄い...
コメント
先日 Blogger にもはてなスターを設置出来ることを知り試してみたのですが、トップページには表示されるものの、記事ページには表示されず。
2019年2月11日 18:16おそらくタイトル(h3)がリンクになっていないと駄目なのではと思い、こちらの記事を参考に記事ページのタイトルにもリンクを付けてみたところ、予想通りはてなスターが表示されました。
https://www.hatena.ne.jp/help/star/guide
はてなスターが表示されて良かったです。
2019年2月11日 19:18ヘルプの設定方法を見ると非常に古くて最初のクラシックテーマで説明されてます。
今の新旧の公式テーマでも記事ページの記事タイトルは見出しのh3付きのリンクなしのデザインですから基本的に変わらないでしょう。
こんばんは。
2021年2月13日 20:07こちらの記事を参考に、当ブログの記事投稿日にアーカイブリンクを付けることを試みてみたですが何故か上手く行かず…どうやらタグの一部が間違っているようです。
data:post.month となっているところを data:post.date.month に直したら上手くいきました。(間違ってるところ6ヶ所あるようです)
以上、ご報告まで。
ご報告、ありがとうございます。確かに「.date」が抜けてましたので、修正しました。目が悪くてどうしようもないですが、注意しながら誤りなく載せたいものです。
2021年2月13日 20:25