Interne Seitenverlinkung zur Strukturierung von Internetseiten mit viel Inhalt

Hier erfahren Sie in einer Schritt für Schritt Anleitung wie lange Internetseiten durch ein Seitenmenü strukturiert werden können. Dem Besucher der Webseite sollen darurch die Inhalte in übersichtlicher Form dargestellt und ein benutzerfreundliches Navigieren ermöglicht werden.

Wie das Ganze gemacht wird, finden Sie unter dem folgendem Beispiel (Es darf geklickt werden):

Weitere Themen dieser Seite:

…Überschrift des ersten Abschnittes…

…Überschrift des zweiten Abschnittes…

…Überschrift des dritten Abschnittes…

Überschrift des ersten Abschnittes

Text und Inhalt des ersten Abschnittes

Zur Übersicht

Überschrift des zweiten Abschnittes

Text und Inhalt des zweiten Abschnittes

Zur Übersicht

Überschrift des dritten Abschnittes

Text und Inhalt des dritten Abschnittes

Zur Übersicht

Bevor die Seite durch Ankerlinks strukturiert wird, sollten zuerst alle Anker gesetzt werden. Bei vielen Online-Editoren können diese Verweisziele dann einfach für die Schaffung der Links auf diese Ziele ausgewählt werden, ohne dass man diese erst wieder eintippen muss. Der Name und die Id für jeden Anker müssen genau so bezeichnet werden, wie das spätere Verweisziel im Ankerlink. Im Ankerlink wird diese Bezeichnung durch ein zusätzliches ‘#’ für die Definition eines seiteninternen Links ergänzt.

Den Anker für eine Überschrift setzt man am Besten in eine leere Abschnittsdefinition:

<p><a name=”ankerlink” id=”ankerlink”></a></p>

über die Überschrift. Das hat den Vorteil, dass nach einen Klick auf den entsprechenden Ankerlink die Überschrift nicht ganz oben am Monitor anzeigt wird, sondern ein weing Abstand geschaffen wird.

Natürlich sollte gerade bei langen Seiteninhalten ein Link nach oben angeboten werden. Das funktioniert nach dem gleichen Prinzip und erspart dem Besucher Ihrer Internetseite das ständige Scrollen.

Wenn alle Anker definiert sind, kann das seiteninterne Menü im oberen Bereich der Internetseite platziert werden. Das ‘title’-Attribut hat Relevanz für Suchmaschinen. Hier sollte insbesondere auch Schlagworte zur Beschreibung des Abschnittes notiert werden.

Und hier noch der Quelltext zur Strukturierung langer Internetseiten zum Kopieren:

<p><a name="top_aera" id="top_aera_demo"></a></p>
<h3>Weitere Themen dieser Seite:</h3>
<p><a href="#erster_abschnitt" title="...Überschrift für Suchmaschinen...">...Überschrift des ersten Abschnittes...</a></p>
<p><a href="#zweiter_abschnitt" title="...Überschrift für Suchmaschinen...">...Überschrift des zweiten Abschnittes...</a></p>
<p><a href="#dritter_abschnitt" title="...Überschrift für Suchmaschinen...">...Überschrift des dritten Abschnittes...</a></p>

<p><a name="erster_abschnitt" id="erster_abschnitt"></a></p>
<h2>Überschrift des ersten Abschnittes</h2>
<p>Text und Inhalt des ersten Abschnittes</a></p>
<p><a href="#top_aera_demo" title="...Überschrift für Suchmaschinen...">Zur Übersicht</a></p>

<p><a name="zweiter_abschnitt" id="zweiter_abschnitt"></a></p>
<h2>Überschrift des zweiten Abschnittes</h2>
<p>Text und Inhalt des zweiten Abschnittes</a></p>
<p><a href="#top_aera_demo" title="...Überschrift für Suchmaschinen...">Zur Übersicht</a></p>

<p><a name="dritter_abschnitt" id="dritter_abschnitt"></a></p>
<h2>Überschrift des dritten Abschnittes</h2>
<p>Text und Inhalt des dritten Abschnittes</a></p>
<p><a href="#top_aera_demo" title="...Überschrift für Suchmaschinen...">Zur Übersicht</a></p>
Veröffentlicht unter Webdesign

Hinterlasse eine Antwort

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.

Close