console.logは、組み込み関数のひとつである。
引数に与えられた変数の内容をログとして表示する。
言い換えると、（）内に指定したものをコンソールにアウトプットする機能をもつ。
（）内には、テキストや数式の計算結果などを指定できる。
たとえば、helloというテキストをアウトプットするときは、「console.log(‘hello’)」と記載する。
シングルクォートは、ダブルクォートでも構わない。
カテゴリー: サイト制作
カテゴリー
JavaScriptでできること
JavaScript でできること
HTMLの書き換え
・タグの中身を書き換えられる
・要素を追加や削除できる
・src属性の値を書き換えられる
CSSの値の変更
・cssの値を書き換えることで、色や背景画像を変更できる
そのほか
var命令とlet
・J a v a S c r i p tの変数は v a r命令で宣言する
・v a r命令は重複を許容する（あとのものにより上書きされる）
・le 命令は、同名の変数を許可しない
const命令
・定数に使う
配列
・配列では、1つの変数に対して複数の値を格納できる
・格納された値は「要素」と呼ばれる
・配列は 、その要素として入れ子に配列を持つことも可能
オブジェクト
・オブジェクトは、名前をキ ーにアクセスできる配列のこと
・オブジェクトは、「ハッシュ 」、「連想配列」などと呼ばれる場合もある
・オブジェクト内の個々のデ ータは、「プロパティ」と呼ばれる
・オブジェクトリテラルの個々のプロパティにアクセスするには 、ドット演算子による方法とブラケット構文による方法の 2つがある。
グーグルのsearch consoleについてのメモ。
一般論として、「クエリ」とは「データベースに対する問い合わせ」という意味。
キーワードのほか、検索条件を指定する記号や「検索演算子」と呼ばれる特殊な単語を含んでいる。
検索エンジンでは、入力されるキーワードを「クエリ」と呼んでいる。
カテゴリー
クロールとインデックスに必要な３つの作業
クロール、インデックスのために必要な作業をまとめました。
Googlebotがサイトをクロールし、インデックスするために、以下の手順を踏みます。
Googlebotのクロールをリクエストする
通常、Googlebotはウェブのリンクをたどってサイトにたどり着きます。
しかし、サーチコンソールの[Fetch. as. Google]から[インデックスに送信]を行うことに よって、Googlebotに、サイトの迅速なクロールをリクエストできます
クロールしやすいサイト構造にする
Googlebotはサイト内のリンクをたどってクロールします。
したがって、どこからもリンクされていない孤立したページがないようにします。
サーチコンソールの[サイトマップ]を利用 すれば、Googlebotがページをより見つけやすくなります。
検索されたくないページのインデックスがされないようにする
インデックスされたくないページや、される必要がないページは、Googlebotのクロールをブロックするなどして、インデックスされないよう にします。
確認する
Search.Consoleの[インデックスステータス]や[クロールエラー]などのレポート機能で、クロールやインデックスの状況がわかります。
なお、要注意なのは「重複」で、間違えてサイト内に同じタイトルのページを複数つくってしまうと、上位表示されないことや、インデックスされないことがあります。
サイトのサーバーの設定によって、1つのサイトが「www」がある場合とない場合の2つのURLでアクセス 可能になっていることがあります。
2つのURLでアクセスできるサイトは、Googleから「重複コンテンツ」(同じコン テンツのページが複数ある状態)として扱われます。
SEOで不利になるため、サーバーの設定を変更してURLを統一しましょう。
その後、Search.Console上で[使用す るドメイン]を設定します。
設定が完了すると、[使用するドメイン]で選択したURLでGoogleのデータベー スにあるサイトの情報が統一されます。
そして、それまで「www」あり、なしの2つのURL で別々に行われていたSEOの評価がまとめられます。
カテゴリー
スタンドアロンAMPページのつくりかた
サイトをAMP対応するためには、通常、非AMPの正規ページとAMPページの２つを作成する必要があります。
これは、仕組み上、AMPページから、非AMPページを正規ページとして指定する必要があるためです。
さらに、非AMPページからも、AMPページを参照しなければなりません。
しかし、両方を作成するのは手間がかかりますし、作成するページが増えれば、それだけコードミスの発生する確率も高くなります。
かんたんなサイトであれば、非AMPページとAMPページの２つを作成して良いことはあまりありません。
そこで、Googleは、AMPページのみ作成しても、インデックス登録できることを明示しています。
これをスタンドアロンAMPと呼びます。
スタンドアロンAMPであることをGoogleに伝えるためには、<head>タグの中に、つぎのコードを挿入します。
<link rel=”canonical” href=”AMPページのURL” />
なお、AMPページのURLは、httpやhttpsから始まる絶対パスで入力します。
これで、スタンドアロン AMP ページも、検出可能な状態であればインデックス登録されます。
AMPサイトを作成したあと、Search Consoleを確認すると、ダッシュボードに「AMP ページへの必須構造化データの追加について 」というメッセージが表示されることがあります。
これは、HTMLコード中に、必須構造化データが存在しないことを警告しています。
このエラーは、AMPサイトのインデックス自体には影響はありません。
しかし、解決した方がいいことは言うまでもありません。
そこで、AMPプロジェクト（https://www.ampproject.org/）などを参考に、わたしが色々と試して、うまくいった解決策を記載しておきます。
みなさんの参考にしてください。
ここでは、HTMLを自分で編集してAMPサイトを作る場合を想定しています。
※ワードプレスでは試していませんので分かりませんが、もしかすると応用できるのかもしれません。
対象は「記事」すなわち「Article」です。
つまり、たとえば、divタグを使って、<div itemscope itemtype=”http://schema.org/Article”>と</div>とで囲まれた範囲内にコードを書いていくときの話になります。
必須の構造化データ
構造化データでエラーを出さないために必要になるのは、以下のものです。
1.見出し（headline）
記事の見出しです。 見出しは 110 文字以内に収めます。
2.名前（name）
記事の名前です。
3.発行日（datePublished）
記事が最初に公開された日時です。
4.著者（author）
著者名です。
5.画像（image）
記事を表す画像です。記事に直接含まれるマックアップ画像のみ指定します。
画像フォーマットは jpg、png、gif のいずれかです。
画像URLはクロールおよびインデックスづけが可能である必要があります。
画像の縦幅と横幅を指定します（ピクセル表記です）。画像の横幅は696ピクセル以上にします。
6.発行者（publisher）
− 名前（name） 記事の発行者の名前です。
− ロゴ（logo） 記事の発行者のロゴです。
それでは、順番に紹介していきます。
1から6までの記載の順序は、好きなようにして構いません。
見出し
たとえば、つぎのように書きます。
<h1 itemprop=”headline”>見出し</h1>
名前
たとえば、つぎのように書きます。
<span itemprop=”name”>記事の名前</span>
発行日
たとえば、つぎのように書きます。
<span>2016.04.01<meta itemprop=”datePublished” content=”2016-04-01″></span>
著者
たとえば、つぎのように書きます。
<span itemprop=”author” itemscope itemtype=”http://schema.org/Person”>
<span itemprop=”name”>著者の名前</span>
</span>
画像
たとえば、つぎのように書きます。
<span itemprop=”image” itemscope itemtype=”https://schema.org/ImageObject”>
<amp-img src=”画像のURL” width=”100″ height=”100″ layout=”fixed”>
</amp-img>
<meta itemprop=”url” content=”画像のURL”>
<meta itemprop=”width” content=”100″>
<meta itemprop=”height” content=”100″>
</span>
発行者(名前とロゴ)
たとえば、つぎのように書きます。
<span itemprop=”publisher” itemscope itemtype=”http://schema.org/Organization”>
<span itemprop=”name”>発行者の名前</span>
<span itemprop=”logo” itemscope itemtype=”https://schema.org/ImageObject”>
<span>
<amp-img src=”ロゴ画像のURL” alt=”” width=”200″ height=”50″ layout=”fixed”></amp-img>
<meta itemprop=”url” content=”ロゴ画像のURL”>
</span>
</span>
</span>
確認方法
これらの構造化データを追加したところで、構造化データテストツールで、確認します。
こちらです。https://search.google.com/structured-data/testing-tool
なお、AMP自体の有効性については、「AMP validator」で確認します。
https://validator.ampproject.org
以上、ご参考までに。
ブラウザのChromeには、AMP（アンプ）のサイトの設定が有効かどうかチェックするデベロッパーツール「AMP Validator」があります。
AMPのサイトを作成し、アドセンスをタグで貼り付けたとき、この「AMP Validator」によって、つぎのようなバリデーションエラーが警告されることがあります。
「The tag ‘amp-ad extension .js script’ is missing or incorrect, but required by ‘amp-ad’. This will soon be an error.」
この警告は、amp-adについてのJS（ジャバスクリプト）が、コード中に存在しないことを警告しています。
すなわち、当該JSを、HTMLコードに記載せよというアドバイスです。
そのJSとは、
<script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script>
というコードです。
このコードを貼り付けることで、エラーが解消されます。
Accelerated Mobile Pages (AMP)でアドセンスを掲載するには、つぎのコードのように、サイズ指定しなければなりません
<amp-ad width=”300″ height=”100″
type=”adsense”
data-ad-client=”ca-pub-0000123456789″
data-ad-slot=”123456789″>
</amp-ad>
すなわち、レスポンシブ広告ユニットを設置することができません。
しかし、レスポンシブ広告ユニットを設置したのと同じような効果を得る方法があります。
それは、広告ユニットにid（あるいはclass）を付け、メディアクエリで表示・非表示を切り替える方法です。
たとえば、id=”adsense1″、id=”adsense2″、id=”adsense3″を使って、以下のように設定します。
＜HTML＞
広告を設置したい場所に広告コードを３つ連続で記載します。
<amp-ad id=”adsense1″ width=”300″ height=”100″
type=”adsense”
data-ad-client=”ca-pub-0000123456789″
data-ad-slot=”123456789″>
</amp-ad>
<amp-ad id=”adsense2″ width=”468″ height=”60″
type=”adsense”
data-ad-client=”ca-pub-0000123456789″
data-ad-slot=”123456789″>
</amp-ad>
<amp-ad id=”adsense3″ width=”728″ height=”90″
type=”adsense”
data-ad-client=”ca-pub-0000123456789″
data-ad-slot=”123456789″>
</amp-ad>
＜CSS＞
そして、CSSでは、メディアクエリで表示を制御します。
<style amp-custom>
#adsense1 {display:none}
#adsense2 {display:none}
#adsense3 {display:block}
/* Tablet view */
@media screen and (max-width:769px)
{
#adsense1 {display:none}
#adsense2 {display:block}
#adsense3 {display:none}
}
/* Mobile view */
@media screen and (max-width:480px)
{
#adsense1 {display:block}
#adsense2 {display:none}
#adsense3 {display:none}
}
</style>
これで、端末の横幅にあわせて、アドセンスの表示が切り替わると思います。