このリンクタグの「href」は「ハイパーレファレンス」の略で、レファレンスというのは参照という意味です。リンクをすることで他のページに飛び、ハイパーに文章を参照するというニュアンスになります。
参考サイト：https://www.homepage-tukurikata.com/hp/link.html
画像にリンクを付ける
＜a href="参照するリンク先のURL"＞アンカーテキスト＜/a＞
＜a href="参照するリンク先のＵＲＬ" target="_blank"＞アンカーテキスト＜/a＞
独自ドメインでない場合はポータルサイトのトップへと飛ぶ可能性が有ります。
メリットはサイトのURLが変わった場合でも、全ページのURLを変更しなくても良い
- 「ブルゴーニューワインとは」をリンク先とする場合。 ブラウザに表示されているURLをコピーし、上記の「参照するリンク先のURL」の箇所に貼り付ける。
- リンク先のページタイトルを「アンカーテキスト」の部分にコピーして完成。 ＜a href="参照するリンク先のＵＲＬ"＞ブルゴーニューワインとは＜/a＞
リンク先を新しいウィンドーで開く方法
" target="_blank"を付け加える。＜a href="参照するリンク先のＵＲＬ" target="_blank"＞アンカーテキスト＜/a＞
「現在表示されているページを切り替える方法」も「リンク先を新しいウィンドーで開く方法」もどちらにも一長一短が有ります。
「外部リンク」と「内部リンク」
内部リンク
- ホームページ内の他のページにリンクする場合。 ＜a href="自サイト内のＵＲＬ"＞アンカーテキスト＜/a＞
- ページの上部へ移動するpagetopなどの「同一ページ内のリンク」 ＜a href="同一ページ内のname指定した特定箇所"＞more など＜/a＞
外部リンク
- 外部サイトへリンクする場合。 ＜a href="外部サイトのＵＲＬ"＞アンカーテキスト＜/a＞
発リンク
自サイトから他サイトへリンクをする。被リンク
他サイトから自サイトへ貼られるリンク。
リンク切れの心配がない。
ドメインを変更する予定がない場合は、絶対リンクで作成しておくのが無難です。
絶対リンク
ＵＲＬを省略しない場合。リンク切れの心配がない。
ドメインを変更する予定がない場合は、絶対リンクで作成しておくのが無難です。
相対リンク
ＵＲＬを省略する場合。独自ドメインでない場合はポータルサイトのトップへと飛ぶ可能性が有ります。
メリットはサイトのURLが変わった場合でも、全ページのURLを変更しなくても良い
HTMLタグの一覧
- 改行の＜br /＞と段落分けの＜p＞＜/p＞ ＜br /＞は改行したい箇所で単体で使用し、pは開始タグと終了タグの両方＜p＞＜/p＞をセットで囲います。
- リンクのhtmlタグ ＜a href=""＞＜/a＞ 外窓で開く場合は target="_blank" を、アンカーテキストの転送を無効にする場合は rel="nofollow" を挿入する。
- 文字の太さと強調 ＜b＞と＜strong＞ 単純に文字を太くするには＜b＞＜/b＞タグで囲い、論理的にも意味を強調する場合には＜strong＞＜/strong＞タグを使いましょう。 strong は意味を強調するタグですので、SEO対策上、多用するのは避けましょう。
- 画像を表示する ＜img src= alt属性には画像の説明文を記述し、borderで枠線なども指定することができます。
- 見出しを記述する h1,h2タグ h1タグとタイトルタグ＜title＞については、同一の内容か、もしくは関連した内容のものを記述することをおすすめします。
- 箇条書きでリスト化する ＜ul＞＜li＞ 番号付きでリスト化するには、ul、liではなく、ol、liを使う。 グローバルナビゲーションやフッターで横並びにリスト化する場合は、スタイルシートに display: inline; を記述します。
- 表を作成する ＜table＞タグ tableタグは、trとtdとを組み合わせて行と列を指定し、表を作成することができます。
- 横線や破線を引く ＜hr /＞タグ コンテンツ内の文中などでワンポイント的に横線を引く。
- 下線を引く ＜u＞タグ 軽く強調したい箇所やスペルミスの部分などで使いますが、クリックできるリンクと混同されやすいため、できるだけ使用は避ける。
- ブロック分けのhtmlタグ ＜div＞＜/div＞ ページをブロック分けして、その範囲で適用される文字の大きさや色彩、背景の色彩などを指定する。div に個別のidをふってスタイルシートの方で対応させるのがよい。
- HTMLタグに直接スタイルシートを指定する style= スタイルシートは外部に.cssファイルを作成して独立させるのが一般的ですが、その箇所にだけ適用する場合には、そのhtmlタグにstyle属性を指定して直接記述することが出来ます。
- 背景色の指定 ＜div style="background-color:#ffffff;"＞＜/div＞ ホームページの背景色は、background-color を使って指定します。 明るいパステルカラーを指定すると目が疲れてサイトが見にくくなるので、淡い色彩の背景色にしておくのがぶなんです。
- 文字色の指定 ＜span style="color:#ff0000;"＞＜/span＞
- ページのメタ情報を記述する ＜meta タグ メタ（meta）情報というのは、「高次の」とか、「上位の」といった意味になりますが、適切に記述されていないと文字化けしてしまったり、検索エンジンでヒットしなかったりします。重要度で上位にあたる大切なhtmlタグです。
- コメントを挿入する ＜!-- --＞ コメントタグで囲った箇所はサイト上では表示されません。 サイト運営者が自分用、あるいは共同作業者へのメモとして記述するために使います。
- HTMLソースの書き方 HTMLソースにはインデントを挿入して字下げしたり、あるいはコメントアウトするなどして、他の人にも見やすく整形しながら書いていくとよいでしょう。
- HTML5とXHTML 1.0の違い 「html5」ではタグに意味的な要素が加えられており、より「セマンティック」なホームページを作成することが可能になっています。このセマンティックというのは「意味の」とか「意味論的な」を表す言葉ですが、そのタグの内容が何を意味するものなのかを明示できるようになりました。
- ホームページを「xhtml」から「html5」へ修正するには、何らかの「一括置換ツール」を使用してサイト内のファイルを修正するとよいでしょう。 XHTMLからHTML5へ修正する際、コンテンツの部分についてはHTML5から新しく追加されたタグを使って修正していきます。
- アウトラインを明示する ＜section＞ XHTMLでは「h1～h6」タグを使用することで文章のアウトラインを暗黙的に示すことができましたが、HTML5の＜section＞タグを使えば、アウトラインを意図的に明確に示すことができます。
- SNSでの表示を最適化 ＜meta property="og: FacebookやTwitterなどのSNSで自サイトがリンクシェアされた際、OGP関連のmetaタグを設定しておくと画像や説明文などが綺麗に表示されます。「200px × 200px」以上のOGP画像を設定しておくとよい。
#SEO
投稿
0 件のコメント:
コメントを投稿