dynamischer link, inline-css, header, javascript, viewport

ukgumo

Hallo zusammen,

als nicht so bewanderter Webmaster in Sachen css und php möchte ich gerne meine WP-Seite SEO-fit machen. Ich habe dabei eine hilfreiche Seite zum Check gefunden: http://www.seobility.net/de/seocheck/ww…nzen-sammeln.eu. Einige Sachen habe ich auch schon selbst verbessern können. Zu anderen habe ich jedoch Fragen...

Die Internen Links sind teilweise Dynamisch. Alle Internen URLs (Welche nicht als nofollow markiert sind) sollten dies nicht sein.

so lautet ein Hinweis. Ich habe jedoch die Permalinks entsprechend im Dashboard umgestellt. Trotzdem sind scheinbar noch dynamische Links da. Wie finde ich diese und wie kann ich diese umstellen?

Es befindet sich inline CSS auf der Seite. CSS-Code sollte ausgelagert werden.

was ist inline CSS und wie kann ich den auslagern?

Die Serverversion wird im Header mitgesendet. Das ist sinnlos.

Wie bekomme ich diese raus?

Die Webseite benötigt 6 Javascript Dateien, dies kann die Ladezeit negativ beeinträchtigen.

Kann ich diese auslagern bzw wie?

Es ist kein Viewport angegeben.

Es ist kein Apple-Touch Icon angeben.

Ich finde dazu leider keine verständliche Anleitung

Vielleich habt Ihr zu der ein oder anderen Frage ein paar Tipps. Ich bedanke mich jedenfalls schon mal.

Gruß
ukgumo

Werbepost

Hallo!

Wenn du gerade an deiner Website arbeitest oder dein aktuelles Hosting überdenkst: Wir betreiben mit NetzLiving eine Hosting-Plattform, die speziell auf Performance, Sicherheit und einfache Verwaltung ausgelegt ist.

✔️ Schnelle Ladezeiten (optimiert für WordPress & Co.)
✔️ Deutsche Server & DSGVO-konform
✔️ Persönlicher Support (kein 0815-Ticket-System)

Mehr erfahren

Nevery

Ich kann Dir leider auch nicht bei allem helfen, aber dafür, dass ich die Seite noch nicht kannte und recht gut finde versuch ichs zumindest mal ;-)

Das hier:

HTML

<style type="text/css">.seo-tag-cloud{font-size:1.0em;text-transform:lowercase}.seo-tag-cloud li{display:inline}.seo-tag-cloud div{padding:10px}.seo-tag-cloud em{font-style:normal;font-size:1.1em}.seo-tag-cloud a{color:#8b00ff}.seo-tag-cloud em a{color:#00a}.seo-tag-cloud em em a{color:#00f}.seo-tag-cloud em em em a{color:#0a0}.seo-tag-cloud em em em em a{color:#0f0}.seo-tag-cloud em em em em em a{color:#aa0}.seo-tag-cloud em em em em em em a{color:#ff0}.seo-tag-cloud em em em em em em em a{color:#aa4a00}.seo-tag-cloud em em em em em em em em a{color:#ff7f00}.seo-tag-cloud em em em em em em em em em a{color:#a00}.seo-tag-cloud em em em em em em em em em em a{color:#f00}.credit{font-size:50%}.seo-tag-cloud.ball{visibility:hidden}#sidebar ul ul.seo-tag-cloud.ball{border:none;list-style-type:none;margin:0}.seo-tag-cloud.ball a{border:none}.seo-tag-cloud.ball a:hover{text-decoration:underline}</style>

ist inline-CSS. Das sollte eigentlich in einer .css-Datei stehen, die Frage ist dabei, wie das eingebunden ist - wenns über nen Plugin reingeschrieben ist hab ich keine Ahnung, wenns im Quelltext steht (z.B. in der header.php) kannst Du es von dort einfach in eine css-Datei verschieben.

Javascript-Dateien zusammenzufassen macht meines Erachtens wenig Sinn, wenn Du sie alle brauchst, ist dem halt so. In Anbetracht dessen, dass die Ladezeit Deiner Seite ausgesprochen gut ist, ist das auch kein Problem.

Zum viewport und dessen Anwendung findest Du hier http://www.mediaevent.de/css/viewport-mobile.html nen paar Informationen.

Zu dem Rest kann ich so leider nichts sagen, aber vielleicht hilft Dir das ja zumindest nen bisschen.

ukgumo

Hallo,

freut mich, wenn die Seite dir gefällt und danke für Deine Antwort..

Der zitierte Code ist ein WP-Plugin namens Seo-Cloud. Das liegt im primären Widget-Bereich. Hatte schon überlegt das Ding raus zuhauen da es mit einem weiteren SEO-Plugin irgendwie doppelt gemoppelt ist.

Der Code beginnt mit [COLOR=#800080]<style type=[COLOR=#0000FF]"text/css"[/COLOR]>[/COLOR]Ist also (dank Deinem Tipp) klar als CSS erkennbar. Geht man jedoch die Seite durch, findet man immer wieder Codeschnippsel wie <img class="alignleft" style="margin-top: 30px; margin-bottom: 30px;" title=" oder . Ist das dann auch Inline CSS? Hoffe nicht, denn will nicht die gesamte Seite neu schreiben...

Zum viewport ist das endlich mal ein Link der auf eine verständlich beschriebene Seite führt. Dem Thema nehme ich mich die Tage in Ruhe an. Nur eine Frage vorab... Kommt die Viewportregel nun in die Header.php oder in eine css.-Datei? das geht aus dem Link leider nicht eindeutig hervor.

Nevery

Doppelt gemoppelt ist immer schlecht - dann schmeiss das lieber raus.

Klassenangaben im Text - sowas wie class = "alignleft" - sind gut und richtig, das andere... Naja, unschick, faul programmiert. Eigentlich sollte sowas nicht da sein, eigentlich solltest Du es rausnehmen, aber solange es nur einzelne Punkte sind, ists auch kein Drama. Vielleicht mal nach und nach wenn Du ein wenig Zeit hast entfernen.

Die eigentliche Viewportangabe ist ein Metatag, d.h. sie gehört in den <head>-Bereich. Diesen findest Du aber oft auch in der index.php.
Steuern lässt sich das hingegen per CSS, das kannst Du dann in die CSS-Datei schreiben - hier: http://maddesigns.de/meta-viewport-1817.html steht dazu auch nochmal einiges interessantes, und wenn Du Dich tiefer in das Thema einlesen willst, solltest Du Dir noch die Mediaqueries zu Gemüte führen: http://www.mediaevent.de/css/media-queries.html - ich wünsche viel Spaß und gute Nerven ;-)

Melewo

Zitat von ukgumo

Zu anderen habe ich jedoch Fragen...
Die Internen Links sind teilweise Dynamisch. Alle Internen URLs (Welche nicht als nofollow markiert sind) sollten dies nicht sein.

Kann ich nicht beantworten, weil ich nicht weiß, welche damit gemeint sind. Im Allgemeinen sollte man darauf verzichten, insofern dadurch Double Content entsteht. Entsteht kein DC, ist es eher Jacke wie Hose bei einigen wenigen Seiten, insofern die restlichen WP-Seiten eher mit "http://www.example.com/Beitragsname/" als mit "http://www.example.com/?p=33" auffindbar sind.

Zitat von ukgumo

Es befindet sich inline CSS auf der Seite. CSS-Code sollte ausgelagert werden.

Wenn einige Styles nur in einzelnen Dateien benötigt werden, wäre es Unfug diese mit in einer CSS einzufügen und diese dadurch aufzublähen, die anschließend in 1.000 Seiten eingebunden wird. Wobei nach meinem bisherigen Verständnis mit inline nicht gemeint ist, was in einzelnen Dateien im Head definiert wird, sondern was über den Editor von WP inline (in einer Linie mit den Elementen) eingefügt wird, also so etwas wie

HTML

<p style="...">Text</p>
<span style="...">Text</span>

Mal in einer Datei ist in Ordnung, was sich wiederholt, sollte ausgelagert werden und dafür dann lieber

HTML

<p class="...">Text</p>
<span class="...">Text</span>

benutzt werden.

Zitat von ukgumo

Die Serverversion wird im Header mitgesendet. Das ist sinnlos.

Ich finde es gut, wenn ein Server sich vorstellt, für derartige und weitere Informationen ist ein HTTP-Header letztendlich da und hallte es nicht für sinnlos, sondern zuweilen für sehr hilfreich bei der Beantwortung von Fragen.

Code

Server: Apache/2.2.22 (Ubuntu)

Und somit die Ergebnisse von Tools nie überwerten und zu wörtlich nehmen, denn die können nicht denken und wissen nicht, was Du Dir dabei gedacht hast, nachdem Du Dich in die Grundlagen von HTML und CSS eingearbeitet und Deine eigenen Erfahrungen gesammelt hast.

ukgumo

Nochmals danke für die hilfreichen Links. Denke die Thematik wird noch so manchen Feierabend ausfüllen, aber gut Ding will Weile haben. Spaß werde ich sicher haben, da ich mich als "Dummy" über jede kleine Verbesserung der Seite freue.

ukgumo

Danke für die hilfreiche Antwort.

Die Codeschnippsel werde ich künftig bei neuen Beiträgen / Seiten vorab beachten. Fie bestehenden werde ich nach und nach umschreiben, denke ich.

Das von mir verwendete Tool Seobility halte ich für hilfreich, muss Dir jedoch recht geben dass ich einige Hinweise auch als solche betrachten sollte und nicht überbewerten. Manche Hinweise sehe ich nicht als Fehler, im Gegenteil der Effekt ist gewollt.

Melewo

Hatte mit einem anderen Editor geschrieben, dann eingefügt und dann erst gesehen:

Zitat von ukgumo

Geht man jedoch die Seite durch, findet man immer wieder Codeschnippsel wie <img class="alignleft" style="margin-top: 30px; margin-bottom: 30px;" title=" oder . Ist das dann auch Inline CSS?

Nicht auch, nur das ist inline, denn so sehe es besser aus:

HTML

<img class="alignleft abstand" title="

Und in der style.css dann so oder ähnlich:

Code

img.abstand {margin-top: 30px; margin-bottom: 30px}

Verwende ich relativ häufig, weil nichts übersichtlicher durch Auslagerung würde und so lang ist es ja nicht:

HTML

<p style="text-align: justify;">

Könnte jedoch ebenfalls ausgelagert werden werden.

HTML

<p class="ausrichtung">

Und in der style.css:

Code

.ausrichtung {text-align: justify}

ukgumo

Wie beschrieben bin ich hier noch relativ unbewandert. Aber so wie von Dir beschrieben stellen sich mir nun die Zusammenhänge dar. Grundsätzlich kann ich nun jede Formatierung die ich häufig benötige in der style.css sozusagen als Variable definieren und im HTML mit dem class-Befehl aufrufen. Werde ich auf jeden Fall ausprobieren. Dankeschön!

Melewo

Zitat von ukgumo

sozusagen als Variable definieren und im HTML mit dem class-Befehl aufrufen.

In Worten würde ich es etwa so bezeichnen, nur da bin ich mir ab und an auch nicht richtig sicher:

HTML

<p style="text-align: justify;">
<Element Attribut/e="Eigenschaft: Wert">

Oder ausgelagert:

Code

<p class="Klassenbezeicher">


.Klasse {Eigenschaft: Wert}

ukgumo

Kann da ja experimentieren da ich vor solchen Änderungen die Dateien sicher. Nur eine Frage noch: wenn ich manuell in der css oder im header oder wo auch immer manuelle Änderungen vornehme und es gibt für mein Theme (Hier TwentyTen) ein Update, muss ich dann meine manuellen Sachen neu einfügen, oder werden nur die betreffenden wp-Passagen updatet?

Melewo

Na ja, Du solltest eine komplette Sicherung vor einem Update anlegen. Wie Du das nun machst, es gibt da einige Anleitungen. Im einfachsten Fall ladest Du alle Dateien herunter und speicherst die auf Deinem Rechner oder auf einem anderen Datenträger. Mit dem Inhalt der Datenbank machst Du es nicht anders, entweder mit Plugin oder einfach per Export über phpMyAdmin.

Dann ladest Du die neuste Version herunter, entpackst die und überschreibst per FTP nur die Core-Verzeichnisse und Core-Dateien und nicht die Theme-Dateien bei einem Update. So habe ich das zumindest bisher gehandhabt. Nun sieht das ab Version 3.7 etwas anders aus, wer da automatische Updates möchte, womit ich keine Erfahrungen habe.

Auch die Themes werden in Abständen verändert und wenn ich da sehe, dass Twenty Twelve bereits bei der Version 1.3 angekommen ist, im Sommer war es noch 1.1, dann frage ich mich halt auch, ob ich für WP und WP-Updates lebe oder WP die Webarbeit erleichtern soll. Kaum hat man alles halbwegs eingerichtet, steht das nächste Update vor der Tür, ohne die damit verbundenen Probleme zu kennen. Irgendwann werde ich mir da halt die Dateien anschauen müssen und erst einmal unter Localhost testen, welche Veränderungen mit einem Theme-Update verbunden sind.

Eigentlich sollte so ein Theme schon länger halten als zwei Monate. Ansonsten müsste ich wirklich noch mein eigenes schreiben, was ich nicht vor hatte.

ukgumo

Zitat

Könnte jedoch ebenfalls ausgelagert werden werden.

HTML-Code:
[COLOR=#000080][/COLOR]
Und in der style.css:

Code:
.ausrichtung {text-align: justify}

Alles anzeigen

Ich habe das jetzt mal testweise versucht. Rufe ich die Seite auf, habe ich jedoch keinen Blocksatz mehr. Ich habe den CSS-Code hier eingefügt:

/* =Global Elements
-------------------------------------------------------------- */

/* Main global 'theme' and typographic styles */
body {
background: #f1f1f1;
}
body,
input,
textarea {
color: #666;
font-size: 12px;
line-height: 18px;
.
.
.
.ausrichtung {text-align: justify}

/* =Header
-------------------------------------------------------------- */

#header {
padding: 30px 0 0 0;
}
#site-title {
.
.
.

Ich vermute ich habe an eine falsche Stelle eingefügt.

Bin für einen Hinweis sehr dankbar!

Melewo

Knall das an den Anfang oder das Ende Deiner CSS,

Code

/* Beginn meiner eigenen Styles */


.ausrichtungj {text-align: justify}
.ausrichtungl {text-align: left}
.ausrichtungr {text-align: right}


/* Ende meiner eigenen Styles */

vor allem darf es nicht in einen

{

geklammerten Bereich

}

fallen, es sei denn, Du willst bisherige Styles anpassen, dann selbstverständlich innerhalb der Klammern.

ukgumo

Nochmals danke für den Hinweis. Habe um es zu testen den Beispielcode genommen. HTML-code ausgetauscht und CSS in der style.css ganz am Ende eingefügt. Leider ohne Ergebnis. Entweder mache ich etwas grundlegend falsch oder Änderungen werden nicht sofort sichtbar, was ich mir jedoch nicht vorstellen kann. Denn stelle ich den Urzustand wieder her, sehe ich die Äderung sofort.

Nochmal zur Veranschaulichung die derzeitige Situation:

Artikel in Blocksatz geschrieben:

...

Soll ausgetauscht werden mit
.ausrichtungj {text-align: justify} in der css
und Aufruf [COLOR=#000080]...

Die Seite verändert sich dahingehend das der bisherige Blocksatz in linksbündigen Fließtext erschein.

Hast Du vielleicht noch eine Idee was ich an dieser scheinbar banalen Sache falsch mache? [/COLOR]

Melewo

Ohne Link zur Seite lässt sich da kaum etwas sagen. Die Styles von WP beinhalten ja kaum nur wenige Zeilen, so dass es gut möglich ist, dass es zu gegenseitigen Überschreibungen kommt. Ich würde dabei auch nicht unbedingt mit WP beginnen und dabei eventuell noch den Editor von WP benutzen, in dem nicht einmal eine farbige Syntax zu erkennen ist, sondern eine einfache HTML-Seite erstellen und einen Editor wie den Notepad++ benutzen, den Du noch häufiger gebrauchen wirst.

Wie Du die CSS Klassen bezeichnest, ist eigentlich Deine Sache, wichtig ist nur, dass der Name noch nicht existiert und Du an Hand des Namen unterscheiden kannst, wofür was gut ist. Nun könnte es aber sein, wenn Du gleich an den Anfang der CSS-Datei

Code

/* Beginn meiner eigenen Styles */


.ausrichtungj {text-align: justify}


/* Ende meiner eigenen Styles */

einfügst, diese noch dreimal im weiteren Verlauf durch weitere Klassen überschrieben werden. Du könntest nun erst einmal mit den Browser-Tools suchen, was da wirkt, bei meinem Standard-Theme finde ich da zum Beispiel für p-Tag

Code

.entry-content {text-align:justify}

und änderst diese Angaben nach Deinen Wünschen, was eigentlich der normalen Vorgehensweise entsprechen würde, insofern diese Formatierung auf allen Seiten erwünscht ist oder aber Du aber Du teilst dem Browser mit, dass bereits bestehende Regeln ignoriert werden sollen.

Code

/* Beginn meiner eigenen Styles */


.ausrichtungj {text-align: justify !important}


/* Ende meiner eigenen Styles */

Wie auch immer, das lernt man nicht an einem Sonntag, ein brauchbarer Anfang stellen jedoch diese Tutorials dar:

http://www.css4you.de/wscss/index.html

Wie Du dabei vorgehst, bleibt eigentlich Dir überlassen. Der eine holt sich zwei, drei Bücher und will es gleich von Kopf bis Fuß richtig lernen, ein anderer, so wie ich, kümmert sich um CSS nur immer dann, wenn er keinen Bogen darum machen kann und hat es dann nach 10 Jahren auch soweit gefressen, dass er zwar nicht perfekt in CSS ist, doch irgendwie klar kommt.

HTML5 und CSS3 sind zwar keine Programmiersprachen wie JavaScript oder PHP, sondern nur eine HTML-Auszeichnungssprache plus einer deklarativen Sprache für Stilvorlagen, doch seit HTML5 und CSS3 deutlich komplexer geworden als ihre Vorgänger-Versionen und wie lange würdest Du zum Beispiel benötigen, um Suaheli zu lernen? Plane mindestens die halbe Zeit ein, um Dich erst einmal mit HTML5 und CSS3 mit unterschiedlichen Browser fließend unterhalten zu können.

ukgumo

Danke für Deine ausführliche Antwort. So ist aus einer scheinbar banalen Zeichenkette ein komplexer Zusammenhang geworden. Ich denke ich werde tatsächlich anhand eines Tutorials mir den kompletten Aufbau zu Gemüte führen. Bisher bin ich mit fertigen Templates klar gekommen und für gewünschte Effekte habe ich immer nach Plugins gesucht die das übernehmen. Jetzt aber bin ich an einem Punkt angelangt wo ich in das Skript manuell und individuell eingreifen will. Foren sind eine tolle Sache um vereinzelt nachzuhaken. Diese ersetzen aber nicht die Basics. Na wer weiss, vielleicht gehöre auch ich bald zu denen, die Hilfe geben als sie zu suchen. Ich danke Dir auf jeden Fall für Deine geduldigen Antworten.

Willkommen! Melden Sie sich an oder registrieren Sie sich.

dynamischer link, inline-css, header, javascript, viewport

Jetzt mitmachen!