HTML+CSS アンカーリンクで簡単に始められる
アンカー リンクとは何ですか?
HTML 內(nèi)のリンクの正しい用語は「アンカー」と呼ばれるもので、大きくて扱いにくいコンテンツを含む Web ページによく使用されるアンカー リンク (ブックマーク リンクとも呼ばれます) を指します。名前付きアンカーを使用すると、ドキュメントを指すだけでなく、ページ上の特定の段落を指すこともでき、リンク オブジェクトをフォーカスに近づける「正確なリンク」の便利なツールとしても使用できます。閲覧者にとって、Web ページのコンテンツを表示するのに便利です。これは、本を読むときの目次のページ番號や章のリマインダーに似ています。タグ アンカーは、ページの特定の部分をターゲットにする必要がある場合に最適な方法です。
アンカーリンクの作成方法
ステップ 1: 名前付きアンカーを作成する
名前付きアンカーを作成するには、Dreamweaver 編集ビューで、アンカーに名前を付ける場所にカーソルを置きます。 「レコードの挿入」ツールバーを選択し、「名前付きアンカー」オプションを選択します。 [名前付きアンカー] ダイアログ ボックスが表示されます。
名前付きアンカーの作成ダイアログボックス 「アンカー名」テキストボックスにアンカーの名前を入力します。通常、アンカーが Web ページの上部にある場合は、「top」と入力できます。アンカー名にはスペースを含めることはできず、レイヤー內(nèi)に配置することはできません。
ステップ 2: 名前付きアンカーへのリンク
アンカーを定義した後、名前付きアンカーにリンクできます。 「トップに戻る」というテキストなど、リンクを作成するテキストまたは畫像を選択します。プロパティ パネルの [リンク] テキスト ボックスに、「#top」などの「#アンカー名」を入力します。寫真2に示すように。
アンカーされた保存済み Web ページにリンクした後、F12 キーを押して Web ページをプレビューします。ブラウザでリンク テキスト (トップに戻る) をクリックすると、Web ページは「トップ」とマークされた名前付きアンカーの行に移動します。
追記: 他のドキュメント內(nèi)の「top」という名前のアンカーにリンクするには、ファイルの絶対パス + ファイル名 #top の形式になります。アンカー名では大文字と小文字が區(qū)別されます。
SEOにおけるアンカーリンクの役割
アンカーリンクはWebページに適切なアンカーリンクを追加することで、WebページとそのWebページが指すWebページの重要性を高め、結(jié)果としてWebページに影響を與えます。キーワードランキング。 SEOにおけるアンカーリンクの効果は、主に以下の側(cè)面に反映されます:
アンカーリンクが配置されているページへの効果
通常、ページに追加されたリンクとアンカーリンクには一定の関係があります。したがって、アンカー テキストは、アンカー リンクが配置されているページのコンテンツの評価として使用できます。たとえば、この記事には「SEO」へのリンクが含まれている場合、この記事は SEO と一定の関係があることを意味します。
指されたページにおけるアンカーリンクの役割
アンカーリンクは指されたページの內(nèi)容を正確に記述することができるため、指されたページの評価として利用することができます。
キーワードランキングに対するアンカーリンクの影響
キーワードランキングにおけるアンカーリンクの重要性は、コンテンツページをランダムにリンクできることで、スパイダーがより多くのページをうまくクロールできるようになり、同時(shí)に重みを均等に転送できることです。 、ページの関連性が高まり、最終的には Web サイトのキーワードランキングが向上します。
アンカーリンクとハイパーリンクの違い
1. キーワードランキングの違い。
キーワードの順位差に関して言えば。數(shù)値を使用して、Baidu ランキングの違いを説明できます。アンカーテキスト付きのリンクを作成するとします。たとえば、キーワード「Webmaster Network」を作成します。この外部リンクが Baidu によって含まれている場合。 Baidu によってこのリンクに與えられた重みがアラビア數(shù)字で表されると仮定します。たとえば、5 の場合、この外部リンクには、キーワード Webmaster.com に対して 4 のランキングが割り當(dāng)てられ、Web サイトの他のキーワードに対して 4 のランキングが割り當(dāng)てられる可能性があります。
2. バックリンクの違い
SEO を行うとき、私たちは通常、自分の Web サイトのバックリンクに Yahoo のバックリンクと Baidu ドメインを介してクエリを?qū)g行します。アンカーテキストリンクを作成した場合。 Yahoo にそれを含めるよう依頼すると、Yahoo のバックリンクを通じてアンカー テキスト リンクをクエリできるようになります。このリンクが Baidu によって含まれている場合、Baidu ドメインを通じてクエリを?qū)g行することはできません。 URL リンクを作成し、Yahoo にそれを含めるように依頼した場合、Yahoo のバックリンクを通じてクエリを?qū)g行できます。Baidu にそれを含めるように依頼した場合は、Baidu ドメインを通じてクエリを?qū)g行することもできます。つまり、アンカー テキスト リンクにより、當(dāng)社 Web サイトへの Yahoo のバックリンクの數(shù)が増加する可能性があります。 Baidu ドメインの數(shù)を増やすことはできません。 URL リンクにより、當(dāng)社 Web サイトへの Yahoo のバックリンクの數(shù)が増加し、Baidu ドメインの數(shù)も増加する可能性があります。
アンカーリンクの例: トップに戻る例を作成します。コードは次のとおりです:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>錨點(diǎn)鏈接</title> </head> <body> <a name="top">我們都一樣</a> 推開窗看見星星 一直守在夜空中<br> 心中不免多了些暖暖的感動<br> 一閃一閃的光 努力把黑夜點(diǎn)亮氣氛如此安詳<br> 你在我的生命中是那最閃亮的星<br> 一直在我深夜中守護(hù)著我們的夢<br><br> 這世界那么大我的愛只想要你懂<br> 陪伴我孤寂旅程<br> 你知道我的夢你知道我的痛<br> 你知道我們感受都相同<br> 就算有再大的風(fēng)也擋不住勇敢的沖動 <br><br> 最美的太陽 我的世界 因?yàn)橛心悴艜?lt;br> 我的天空 因?yàn)橛心悴粫?lt;br> 給我快樂 為我傷心流眼淚<br> 給我寬容 讓我能展翅高飛<br> 你的話你的淚 你的笑你的美<br> 在我眼中勝過最美的玫瑰<br> 抱著夢 往前飛 不逃避 不后退<br> 你是我成功路上的堡壘<br> 給我翅膀 讓我可以翱翔<br> 給我力量 是你讓我變堅(jiān)強(qiáng)<br> 不怕受傷 因?yàn)橛心阍谏砼?lt;br> 你的笑 你的淚 是我筑夢路上最美的太陽<br><br> 明天過后<br> 沒有星星的夜空<br> 沒有話題能補(bǔ)充 <br> 太多承諾從指縫中溜走 <br> 不敢奢求什么 <br> 回憶將我們扣留 <br> 一瞬間親吻的時(shí)候 <br> 一切就好像輪回般朦朧 <br> 心動漸漸的失控 <br> 是否兩個(gè)人足夠捕捉愛的鏡頭 <br> 閉上了眼睛記得你的笑容 <br> 幸福的從容將靈魂都掏空 <br> 享受一分鐘的感動 <br> 是否愛上一個(gè)人不問明天過后 <br> 山明和水秀不比你有看頭 <br> 牽著你的手，一直走到最后 <br> 這一刻怎么回頭 <br> 明天過后<br> 沒有星星的夜空<br> 沒有話題能補(bǔ)充 <br> 太多承諾從指縫中溜走 <br> 不敢奢求什么 <br> 回憶將我們扣留 <br> 一瞬間親吻的時(shí)候 <br> 一切就好像輪回般朦朧 <br> 心動漸漸的失控 <br> 是否兩個(gè)人足夠捕捉愛的鏡頭 <br> 閉上了眼睛記得你的笑容 <br> 幸福的從容將靈魂都掏空 <br> 享受一分鐘的感動 <br> 是否愛上一個(gè)人不問明天過后 <br> 山明和水秀不比你有看頭 <br> 牽著你的手，一直走到最后 <br> 這一刻怎么回頭 <br> <a href="#top">頂部</a> </body> </html>
Web ページに多くのコンテンツがある場合、ページを下に見ていき、クリックするとトップに戻ります、ページの先頭に直接移動します
