Touch-Icon und HTML

Hallo nemessis,

zu den Touch-Icons. Da gibt es kein Widget für. Die entsprechenden Informationen müssen in den <head>-Bereich der Seite.

Ich habe das mal wie folgt gelöst:

• Erstellung aller benötigten Icons. Das habe ich auf der folgenden Website gemacht http://www.favicon-generator.org/
• Die benötigten Icos in die Bilderverwaltung von ZP geladen
• Die entsprechenden <link>-Angaben über das Attribut mobile_script aufgenommen.
  

  Das sieht dann im Head in meinem Fall wie folgt aus:

<link rel="apple-touch-icon" href=oid://image/apple-touch-icon-60x60>
<link rel="apple-touch-icon" sizes="76x76" href=oid://image/apple-touch-icon-76x76>
<link rel="apple-touch-icon" sizes="120x120" href=oid://image/apple-touch-icon-120x120>
<link rel="apple-touch-icon" sizes="152x152" href=oid://image/apple-touch-icon-152x152>

Live kann man sich das auf Hotel Schildow ansehen. Allerdings momentan nur mit einem Apple-Gerät, da ich für andere HErsteller die Icons noch nicht eingebunden habe.

Bei deinen anderen Problemen <> Fragen kann ich leider nicht weiterhelfen.

Hallo'
Ja das mit Apple-Touch-Icon ist für Apple.

Habe deine Seite mal als Link auf den homescreen gelegt. Sieht gut aus.

Hallo Nemesis,

interessantes Thema, dass Du da angesprochen hast, werde ich morgen mal auch bei uns nachbauen. Ob es funktioniert, kann man tatsächlich nur auf Apple Geräten testen. Ich werde da mal auf das I-Pad meiner Holden zurückgreifen und morgen über das Ergebnis berichten. In einem früheren Beitrag hier im Forum wurde die Einbindung aber über additional_meta statt über mobile_script erläutert. Mal sehen, welche Variante hier die bessere ist.
Zu Deinen anderen Fragen:
Canonical wird nicht automatisch gesetzt, den Code kann ich Dir aber morgen liefern, bin gerade nur mit dem Tablet unterwegs. Die bemängelte HTML-Größe hängt vermutlich mit der Einbindung externer Scripts zusammen. Nach meinem Gefühl hat aber die Größe der HTML-Datei keinen relevanten Einfluss auf SEO. Über http://www.betterplace.org habe ich gerade Kontakt zu verschiedenen NGO in Sachen SEO-Optimierung, bei denen fast durchweg einfach die Grundlagen fehlen, die Zeta schon von Haus aus mitliefert, wie eine robots.txt, eine sitemap.xml oder strukturierte Überschriften (H1 bis H3). Die zahlreichen SEO-Tools im Netz sind zwar zum großen Teil hilfreich, letztlich sollen aber alle nur zum Kauf einer kostenpflichtigen SEO-Optimierung verführen. Nach meiner Auffassung bleibt in dieser Hinsicht der Inhalt das wesentliche Element, welches uns keine SEO-Agentur optimieren kann. Die Texte auf der Homepage müssen wir immer noch selber schreiben, je mehr Wörter wir verwenden, um so mehr Möglichkeiten bieten wir Google & Co, auf unseren Homepages auch relevante Wörter zu finden, die in den Suchbegriffen angezeigt werden.
In diesem Sinne, ich melde mich morgen nach dem Test der apple-touch-Icons.

zu den Touch-Icons habe ich einen Generator gefunden, der sowohl die verschiedenen Größen und Dateinamen, als auch den HTML-Code liefert. Der Quellcode ist unter mobile_script bei den Attributen für alle Seiten eingebunden und funktioniert auf W10 als Kachel, auf IPhone und IPad.

Zum DC:

<link rel="canonical" href="<$=page.absoluteUrl$>" />

ist richtig eingegeben unter Attributen (ohne Zeilennummer)

Mit "Webseite erstellen / Veröffentlichen wird aus dieser relativen Angabe die absolute Angabe im HTML-Quelltext

<link rel="canonical" href="https://www.hanabi-pirna.de/index.html">

Wenn der Websitecheck DC meldet, kann das auch damit zusammenhängen, dass Du auf einer der getesteten Seiten im Seitenattribut additional_meta einen Eintrag hast. Das führt dann dazu, dass bei dieser Seite nur die seitenbezogenen, nicht aber die global geschriebenen Attribute in den <Head> übernommen werden.

Wahrscheinlicher ist aber, dass Du die "www" Frage nicht geklärt hast, die Seite also sowohl mit als auch ohne www erreichbar ist (was sie auch sein soll), ohne aber von "kleine-schiffe.de" auf http://www.kleine-schiffe.de weiterzuleiten. Die beiden Adressen werden jetzt als zwei Webseiten mit identischem Inhalt betrachtet. Google selbst sag dazu, dass man solche Seiten inzwischen zuverlässig als Nicht-DC erkennt. Wenn Du es trotzdem ändern möchtest, schaue mal in meiner Signatur auf den Blog .htaccess. Da habe ich die Umleitung beschrieben. Bitte vor jeglichen Arbeiten an einer .htaccess die vorhandene Datei sichern. Fehler in der .htaccess können schnell zur Nichterreichbarkeit der Seite führen.

Ggf. wäre das ja auch ein Feature für ZP 13.x, dass die ganzen Favicon- und Touch-Icon-Dinge (ich vermute bei Android gibt es ähnliche Konstrukte) und vom Programm gehandelt werden.

Also z.B. ein extra Dialog, bei dem der Anwender ein Bild angeben kann und das Programm dann im Head der Seite automatisch alle benötigten Permutationen des Bildes einfügt.

Hallo,
ja das wäre ein nettes Feature.

Der von mir unter Post 2 verlinkte Generator erzeugt nicht nur Apple-Icon's.

Es werden auch android-icon... und ms-icon... erzeugt.

Ich habe jedoch mangels anderer Geräte nur Aplle-Icons eingebunden. Vermutlich würden diese auf den entsprechenden Geräten funktionieren.

Zitat von nemessis

nun heisst sie aber .htaccess.txt - ist das so richtig?

Hallo Nemesis,

da ist nicht richtig. Wichtig ist bereits beim Erstellen folgender Teil:

Zum Erstellen kann man den Editor aus dem Windows Zubehör verwenden. Wichtig ist hier lediglich, dass für das Speichern der Befehl „Speichern unter“ verwendet wird, dann als Dateiname „.htaccess“ eingetragen und als Dateiytp „Alle Dateien“ ausgewählt wird. Als Codierung ist „ANSI“ zu wählen.

DC kann außer über das www-Problem auch noch durch den automatischen Aufruf der index.html entstehen. Unter https://community.zeta-producer.com/www.kleine-schiffe.de wird ja automatisch https://community.zeta-producer.com/www.kleine-schiffe.de/index.html aufgerufen. Die entsprechende Umleitung muss dann ebenfalls in die .htaccess eingefügt werden. Nachfolgend mal die komplette .htaccess von unserer Seite:

# Beginn Fehlerdokument
ErrorDocument 404 /seite-nicht-gefunden.html
# Ende Fehlerdokument
# Beginn UTF-8
AddCharset UTF-8 .html
AddCharset UTF-8 .php
# Ende UTF-8
# Beginn Startseite im Hochwasserfall
# DirectoryIndex hochwasser.html       
# Ende Startseite
# Beginn Umleitung https
RewriteEngine On
RewriteCond %{SERVER_PORT} !=443
RewriteRule ^(.*)$ https://hanabi-pirna.de/$1 [R=301,L]
# Ende Umleitung auf https
# Beginn Umleitung von non-www auf www
RewriteEngine On
RewriteCond %{HTTP_HOST} !^www\.hanabi-pirna\.de [NC]
RewriteRule ^(.*) https://www.hanabi-pirna.de/$1 [R=301,L]
# Ende Umleitung www
# Beginn Umleitung index.html duplicate Content
RewriteEngine on
RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.html\ HTTP/
RewriteRule ^index\.html$ https://hanabi-pirna.de/ [R=301,L]
# Ende Umleitung duplicate Content
# Beginn Umleitung index.php duplicate Content (deaktiviert wegen aktueller index.html)
# RewriteEngine on
# RewriteCond %{THE_REQUEST} ^[A-Z]{3,9}\ /index\.php\ HTTP/
# RewriteRule ^index\.php$ https://www.hanabi-pirna.de/ [R=301,L]
# Ende Umleitung duplicate Content
# Beginn Aussperrung MJ12 Bot
# erfordert auch Eintrag in robots.txt
RewriteCond %{HTTP_USER_AGENT} MJ12bot
RewriteRule .* - [F]
# Ende Aussperrung MJ12 Bot
# Beginn Aussperrung Spbot
RewriteCond %{HTTP_USER_AGENT} spbot
RewriteRule .* - [F]
# Ende Aussperrung spbot
# Beginn Aussperrung Mail.RU_Bot/2.0
RewriteCond %{HTTP_USER_AGENT} Mail.RU_Bot/2.0
RewriteRule .* - [F]
# Ende Aussperrung Mail.RU_Bot/2.0
# Beginn umleitung umbenannter Dateien
# Beginn 123
Redirect permanent /2014-07-06.html https://hanabi-pirna.de/2014/index.html
Redirect permanent /2014-07-07.html https://hanabi-pirna.de/2014/index.html
Redirect permanent /2014-07-23.html https://hanabi-pirna.de/2014/index.html
Redirect permanent /2014-11-08.html https://hanabi-pirna.de/2014/index.html
Redirect permanent /2015.php https://hanabi-pirna.de/2015/index.html 
Redirect permanent /2015-03-21.html https://hanabi-pirna.de/2015/index.html
Redirect permanent /2015-03-29.html https://hanabi-pirna.de/2015/index.html
Redirect permanent /2015-11-13.html https://hanabi-pirna.de/2015/index.html
# Beginn A
Redirect permanent /aktuelles.html https://hanabi-pirna.de/index.html
Redirect permanent /apple-app-site-association https://hanabi-pirna.de/index.html
Redirect permanent /april.html https://hanabi-pirna.de/2015/index.html
Redirect permanent /abteilungen.html https://hanabi-pirna.de/index.html

Ab Zeile 54 geht es nur noch um Dateien, die im Verlauf der Seitenpflege umbenannt wurden oder die nachträglich in Ordnerstrukturen gebracht wurden. Insgesamt bin ich inzwischen bei 128 Zeilen. Für die bessere Übersichtlichkeit arbeite ich aber neben den # Kommentaren auch noch mit Leerzeilen.

Zitat von cgr-berlin

Es werden auch android-icon... und ms-icon... erzeugt.

Da war der Christian schneller beim Beantworten. Android verwendet den apple-touch-icon-precomposed.png, während für die Windows-Kacheln wieder mehrere in unterschiedlichen Größen erzeugt werden.

@Uwe Keim: der Touch Icon Generator von Stephan Heller http://www.web-stuebchen.de läuft als GNU-Lizenz, könnte also eingebunden werden.