では今日も早速やっていきたいと思います。

開始時刻10時34分

さっそく疑問なんだけど『||』これってなんだ?

調べたけどよーわからなんだw

/と似たような感じなんかな?まー飛ばしてしまおう

んで次!やたら長いコードが現れた

<script>window.NREUM||(NREUM={});NREUM.info={“beacon”:”bam.nr-data.net”,errorBeacon”:”bam.nr-data.net”,”licenaeKey”:”f9a3d2f3bb”,”applicationID”:”124493846″,”transactionName”:”ewpdREVWCVkDRUpOV1pKQ1FQXBYaDlgIXA==”,”queueTime”:0,”applicationTime”:9,”agent”:””}
</script>

window.NREUMがHTMLヘッダー部に自動挿入されるのはNew Relic用

運用している Rails アプリケーションでHTMLソースコードを何気なしに眺めていたら、window.NREUM …という JavaScript コードがHTMLソースのヘッダー部に勝手に挿入されていた。ちょいと調べたところ、これは New Relic を導入して Browser Monitoring(ブラウザ・モニタリング)をオンにしている時に、New Relic が自動で挿入するトラッキング用コードで問題がないものでした。以下のような JavaScript コードが HTML header に挿入される。

まじで書き写してる時、目が痛くなったわ!

ほんで説明を見てみるとどうやらNew Relicさんが勝手に挿入したトラッキング用コードみたいですね。

俺のこの書き写した時間はなんやったんや?w

ほんで次はさっきのトラッキング用コードとは比較にならんほど長いコードがあったんですけど、文頭を見る限り同様の(window.NREUM||(NREUM={})~~)トラッキング用コードっぽいのでそのままコピペしちゃった

ちなみにトラッキングってのはサイト訪問者のデータを取得するためのコードらしいわ

例えでいうと入館証発行するためのシステムってところなんかな?

次!

<meta content=’width=device-width,initial-scale=1,minimum-scale=1′ name=’viewport’>

ここは調べてて面白かった

順序は変わってしまうけど、<meta name=’viewport>ここの部分はHTML5のマークアップ言語で表示領域の設定をしますよーってことらしい。ついでにスマホ向けの設定でHTML5の正式に定義されたものではないらしい。なんか無理やり作りましたよ感があるなw

<meta content=’width~~>に関しては表示領域の詳しい設定みたいで上記のものだと、幅はデバイスの幅に合わせて表示させてくださいね~って命令文と初期ズーム倍率と最小倍率は1にしてくださいね~って命令みたいね。

なんとなくいってる意味が分かる所が出てきてちょっとだけ、面白くなってきたw

でも、他に最大倍率の命令文とかズームを許可するかどうかって命令文もあるみたいなんやけどなんでつけてないんかな?

まーなんかそれはそのうち分かりそうな気がするからいったんおいとこ

次!

<link rel=”shortcut icon” type=”image/x-icon” href=”https://s3-ap-northeast-1.amazonaws.com/flower-production-assets/assets/favicon-da529b35a7e96d30e7754acef1bf5f390573bd7caffef4ce529f1e5bbbe6bc1f.ico”/>

これも調べた感じ古いコードを使ってるみたいね

サイト制作で忘れられがちな印象があるfaviconの設定ですが、とっても重要なので正しい書き方で設定しましょう!

<link>でfaviconを指定することがありますが、以下の記述をよく見かけるかと思います。

<link rel="shortcut icon" href="/path/favicon.ico">

rel属性にshortcutの記述が必要なのは、IE8以下の対応が必要なときのみです。

shortcutは非準拠ですので使わないようにしましょう。

参考:Link types – HTML | MDN

古いブラウザに対応する必要がないサイトであれば、rel属性にshortcutは不要ですし、ファビコンの画像もpngやgifが問題なく使用できます。

 んで何をやっていたかというとfaviconの設定をしてたみたいで、IE8以下の対応をしているコードらしくてIE9以上だとshortcutは使わないみたいね

てことは実例で考えると、一概には言えないけど古いブラウザを使っているであろう層をターゲティングするときは使うかもしれないってことかね~

ついでにファビコンってなんだ?

ファビコンとは

***


ファビコンとは、Webブラウザでページを開いた際、タブ部分に表示されるアイコンを指します。タブブラウザ(1つの画面で複数のページが開けるブラウザ)で複数のタブを開いた時に、ファビコンはページを判別する際の目印となります。

 これか!!これにファビコンなんて名前があったの知らなかったわww

次!

<meta name=”description” content=”あなた好みのお花がポストに届く定期便アプリ”>
<meta name=”keywords” content”お花,花,定期便,お花の定期便,flower,フラワー,ふらわー,おはな,ていきびん,無料,かわいい,可愛い,カワイイ,花瓶,花器,ふらわーべーす,丁寧な暮らし,おしゃれ,女の子,おんなのこ,植物”>

ここは用はSEO対策部分ですね。これもどうやら古いSEO対策を用いているみたいですね

主要なものを挙げると「meta description」「meta keyword」「meta robots」などがあり、それぞれに役割があります。
これらのメタタグをSEO対策に活用するには、正しい書き方を知っておく必要があるため、今後のためにしっかりと覚えておきましょう。

meta description

meta descriptionの役割は、クローラーとユーザーにウェブページの概要を伝えることで、以下のように記述します。
<meta name=”description” content=”これはdescriptionです”>

meta descriptionは検索順位に直接的な影響はない言われていますが、検索結果一覧画面(SERPS)にてスニペットとして表示されるため、ユーザーのクリック率に大きく影響します。
50~100文字程度を目安として、他の検索結果と比べてユーザーの興味を引くテキストを設定します。
また、検索クエリを意識してキーワードを含めておくと、一致する部分が太字になるためより目立ちやすくなるメリットがあります。

meta keyword

Webページのキーワードを指定できるメタタグで、かつてはSEO対策として高い効果がありました。
しかし、現在ではGoogleからランキング決定要因にはならないと明確に言われており、設定してもSEO効果は望めないでしょう。
わざわざ労力を割いてまで設定する必要はありませんし、設定済みのものを削除する必要もありません。

設定する場合は以下のようにキーワードをカンマ区切りで記述します。
<meta name=”keywords” content=”seo,seo対策”>

 こうなると現在有効なSEO対策のコードは何かなー?って気になる所

んでちらみしてみたんですけど、現在はこれが有効だってコードはほぼないといってもいいらしいです。というのも今まではAIもバカだったみたいでキーワード中心に上位表示をさせていたみたいみたいです。ここ最近は賢くなってしまって、無駄なSEO対策をするよりかはユーザーにとって有益なサイトが評価されるようになってるみたいです。

まー小手先のテクニックではなくて根本的な部分を評価してるってことですね

んーなんかオンラインスクールから連絡があってどうやら事前受講ができるみたいなんでちょっとやってみようかね。

というわけでいったん模写に関してはここまでにしたいと思います。

受講の内容は掲載することはできないけど必要そうな内容に関してはこのブログ使ってメモ代わりにしたいと思います(まー非公開になっちゃうけどねww)

載せれそうな箇所に関しては公開にはしていきますが、たぶん読んでてなんだ?ってなると思います。あくまでも自分の日記的な役割のものなんでご了承ください。

現在の時刻12時51分

というわけで今からお昼食べて、午後からは早速事前受講からやってみたいと思います!