ECMAScript-Praktikum 2011: Problemstellung 5 (Tool für Sitmap-Erstellung)

WWW-Surfer können eine zusammen fassende Homepage-Seitenübersicht nutzen, die eine hierarchisch strukturierte Darstellung aller Einzeldokumente (Seitenstruktur der Webseiten, Sitemap) zeigt. Sitemaps sind auch ein effektives Mittel zur Suchmaschinenoptimierung (statische Erreichbarkeit der Seiten). Bei dieser Übung soll ein "robustes, vorzeigbares ECMAScript-Tool" erstellt werden, das die Erstellung einer Sitemap unterstützt und eine kurze Bedienungsanleitung "bei sich" hat.
Hinweise: SEO-Einfuehrung (.pdf) webmasters answer.py webmasters robots.txt Best Practices HTML-Sitemap Sitemaps-XML-Format kanonische url A spider's view of Web 2.0 AJAX + SEO proposal 2009 DMOZ-Links zu Sitemaps
Dieses Tool soll sowohl für Informatik-Anfänger als auch für Fortgeschrittene gut bedienbar und gut verwendbar sein und als Teil der eigenen Homepage eingestellt werden.


Einstieg (allgemeine Infos) Wie fange ich an?

Die Anzahl der verwendeten Internet Media Types (nach IANA, 2010) geben einen Hinweis auf die Bedeutung und Unterschiede zwischen statischen Webseiten und dynamischen Content (es gibt etwa 100 Application Media Types, etwa 100 Audio Media Types, etwa 50 Image Media Types, etwa 20 Message Media Types, etwa 15 Model Media Types, etwa 15 Multipart Media Types, etwa 50 Text Media Types, etwa 70 Video Media Types). Die recht weit gehenden W3C-Empfehlungen (Semantisches Web, RDF-Schema, Description Framework Schema) bedürfen einerseits eines hinreichenden Verständnisses der Seitenersteller und konnten andererseits bisher (2011) noch nicht vollständig von den "großen" Suchmaschinenbetreibern umgesetzt werden ... (siehe z.B. de.wikipedia-Bild: User Interface & applications de.wikipedia-Bild: Semantisches_Web , de.wikipedia: Resource_Description_Framework de.wikipedia: RDF-Schema )

SEO (Aktualität, Stand 2011) Was ist der Stand der Technik 2011?

Etwa nach dem derzeitigen weltweiten Webcrawler-Entwicklungsstand gilt:

Webcrawler (Robot, Spider) schauen beim "weltweiten Durchforsten" zunächst das Stammverzeichnis (Root) einer Domain an. Dort steht i.a. die Datei robots.txt, die Unterverzeichnisse und Dateien (und mehr) für ("standardkonform-kooperierende") Suchmaschinen sperren kann (siehe z.B. de.wikipedia: Robots_Exclusion_Standard , webmasters robots.txt ).

Es darf eine eigene robots.txt-Datei erstellt werden.

Einstieg (Tool-Erstellung) Wie fange ich konkret an?

Hier soll kein engstirniges Konzept vorgegeben werden. Erwartet wird ein "robustes, vorzeigbares ECMAScript-Tool", das die Erstellung einer Sitemap unterstützt und eine kurze Bedienungsanleitung "bei sich" hat.

Für eine zusammen fassende Homepage-Seitenübersicht nutzen Besucher vielfach die hierarchisch strukturierte Darstellung aller Einzeldokumente (Seitenstruktur der Webseiten, Sitemap). Sitemaps sind auch ein effektives Mittel zur Suchmaschinenoptimierung (statische Erreichbarkeit der Seiten).

Das Tool soll nicht nur die "statischen Seitenadressen" sondern auch die dynamischen (AJAX, clientseitige Darstellungssichtweisen mit ECMAScript, Frameset, und weiteres) unterstützen.

Hier ist ein Online-Tool, das eine Sitemap für statische Seiten erstellt Build Site Map online weitere unter DMOZ-Links zu Sitemaps

Was soll das Tool leisten? SEO und dynamischer Content

Hier ein Hinweis, wie eine statische URL zum scannen und (mit Hilfe von ECMAScript) ein "dynamischer MDI-Frameset-Aufruf" für den User geschrieben werden kann:

Code Snippet: SEO und dynamischer Content
  1. <a href="http://www.cilie.org/esa/ecmascript/ecmascript-einfuehrung.htm"
  2.    onclick="window.open('http://www.cilie.org/index.htm?frame=1/esa/ecmascript/ecmascript-einfuehrung.htm','_blank');return false;"
  3.    title="Einleitung zur Master-Veranstaltung ('ECMAScript-Applikationen') der THM Giessen">
  4.    ECMAScript-Applikationen: Einfuehrung
  5. </a>

Teste:

 
    ECMAScript-Applikationen: Einfuehrung 

War das schon alles? Was kann noch berücksichtigt werden?

Wünschenswert ist, wenn das ECMAScript-Tool auch die Erstellung von de.wikipedia: Mikroformate und die Erstellung von wichtigen Metatags ( siehe z.B. de.wikipedia: Meta-Element ) unterstützt.

Beispiele:

Code Snippet: Hinweise für die Tool-Erstellung
  1. <meta name="description" content="Kurze Beschreibung oder Abstract des Inhalts der Webseite" />
  2. <meta name="keywords" content="durch Kommata getrennte Stichwörter, Schlüsselwort, Themen der Webseite" />
  3.  
  4. <link rel="canonical" title="eindeutiger bevorzugter Link" href="..." />
  5. <link rel="alternate" title="..." type="application/...  " href="..." />
  6.  
  7. <a href=... rel=...>...</a>
  8.  
  9. <a href="http://www.cilie.org/esa/ecmascript/ecmascript-einfuehrung.htm"
  10.    onclick="window.open('http://www.cilie.org/index.htm?frame=1/esa/ecmascript/ecmascript-einfuehrung.htm','_blank');return false;"
  11.    title="Einleitung zur Master-Veranstaltung ('ECMAScript-Applikationen') der THM Giessen">
  12.    ECMAScript-Applikationen: Einfuehrung
  13. </a>

Viel Freude bei der Ausarbeitung!