Kategorie: Webdesign

Veröffentlicht am

Mehrsprachiges SEO mit WPML – 8 Tipps vom Entwickler

Während im Internet andauernd von SEO (Search Engine Optimization) gesprochen wird, sind sehr viele Mehrsprachige Seiten noch nicht dafür optimiert und Informationen dazu sind rar. Und die meisten Informationen, die man findet, sind sehr vage oder schwer verständlich.Aus diesem Grund hat der Entwickler von WPML 8 hilfreiche Tipps zusammengetragen, welche helfen sollen, Ihr Ranking mit den bekannten Suchmaschinen zu verbessern. Diese Hinweise wurden sehr praktisch gehalten, so das sie gleich verwendet werden können um die SEO Ihrer Seite zu verbessern oder zu optimieren.Gerade Tipp #2 finden wir sehr interessant für Blogger und Betreiber von Regionsübergreifenden Blogs sollten sich Tipp #7 sehr genau anschauen und keine Scheu davor haben, ihren Content zu duplizieren, wenn es Sinn ergibt. Selbst Google empfiehlt diese Arbeitsweise! 

#1 Betrachte deine Seite wie Google

Wenn Google deine Seite liest, sieht dies anders aus als wenn Du dir die Seite im Browser ansiehst. Dabei achtet Google nicht auf ein ausgefallenes Design, Schriftarten, Farben, Animationen oder Bilder. Gut strukturierter Inhalt ist das einzige, was zählt!

Nutze die Webentwickler-Erweiterung für Google Chrome (oder Firefox), deaktiviere CSS und Bilder (stelle nur die ALT-Tags dar). Immer noch zufrieden?

#2 Überprüfe deine Überschriften

Die Struktur der Überschriften auf deiner Webseite ist einer der wichtigeren Aspekte des On-Page-SEO (Quelle: The heading structure for your blog by yoast.com)

Installiere die Chrome-Erweiterung HeadingsMap. Diese zeigt dir die Hierarchie deiner Überschriften auf jeder beliebigen Seite. Überprüfe auch die übersetzten Seiten. Nach einer H1 sollte eine H2 kommen, dann eine H3 usw. Es dürfen hier keine Brüche geben, heißt es darf keine H1 genutzt werden und dann eine H3. Die Überschriften müssen immer hierarchisch absteigend sein. Ebenso darf nur eine H1 definiert werden.

#3 Sprachen sauber setzen

Google wird versuchen die Hauptsprache jeder einzelnen Seite zu erkennen. Alle Sprachauszeichnungen (wie lang-Attribute) werden hierfür ignoriert. Um hier Suchmaschinen wie Google nicht zu verwirren, sollte nur eine Sprache je Seite genutzt werden. Man sollte davon Absehen einen Text untereinander zu übersetzen.

Überprüfe, dass Du hiergegen nicht verstößt. Ein „Kontaktieren Sie uns/Contact us/Contáctenos“ ist genau so etwas, was vermieden werden muss.

#4 Stelle sicher, dass alle Sprachvarianten einfach zu finden sind

Vermeide eine automatische Weiterleitung auf Basis der Benutzersprache. Diese Weiterleitungen können verhindern, dass Nutzer (und Suchmaschinen) die Seite nicht mehr sehen können.

Nutze stattdessen Sprachschalter und stelle sicher, dass der Nutzer diese an üblichen Stellen (Header, Footer) findet und barrierefrei nutzen kann.

Nutzt du eine browserbasierte Sprachweiterleitung prüfe, ob Google alle Sprachvarianten deiner Seiten kennt. Dies kannst Du einfach herausfinden, indem Du bei Google eine Suche nach „site:“ also „site:coding-pioneers.com“ durchführst. Hierbei müssen dann Ergebnisse zu allen Sprachvarianten auftauchen.

Bitte einen Freund den Sprachschalter zu finden, dauert dies mehr als ein paar Sekunden, solltest Du die Position bzw. das Design überdenken. Icons (wie Flaggen, Weltkugeln) können hier helfen, um aus Text hervorzustechen.

#5 Ergänze ALT-Attribute und Captions für Bilder und denk an die Übersetzungen!

Akkurate Auszeichnungen können deine Webseite sichtbarer im Web machen! Der Unterschied zwischen Platz 1 und 2 in den SERPs können 90% Besucherunterschied ausmachen!

Bild-Beschreibungen (Captions) sind Texte, die sichtbar unter dem Bild stehen und zusätzliche Informationen liefern. Diese sog. Captions werden deutlich häufiger gelesen als der Hauptinhalt. Besucher neigen dazu eine Webseite nur noch zu Scannen. Untersuchungen haben gezeigt, dass Besucher besonders häufig an Bildern und den Beschreibungen dazu stoppen, um diese zu lesen. Somit ist es auch wichtig, genau diese Captions zu übersetzen.

Zusammengefasst: Prüfe ob deine Bilder ALT-Tags haben und in korrekter Sprache gesetzt sind. Hierzu hilft die Web Developer-Erweiterung (das Tool aus #1). Prüfe auch, ob die Captions Sinn ergeben und in der richtigen Sprache gepflegt sind!

Benutze hreflang-Attribute und regionale URLs richtig

Das hreflang-Attribut sagt Google was für alternative Übersetzungen es zu der entsprechenden Seite gibt. So kann Google zu jedem Ergebnis auch die korrekte Sprache bzw. lokale URL ausspielen.  Wenn dies korrekt genutzt wird kann es die Positionierung in der Suchmaschine dramatisch verbessern.

Das schöne ist, wenn man WPML nutzt, um seine mehrsprachige Seite zu bauen, werden die Attribute automatisch auf der Seite platziert!

Tipp: Ob du Tags mit hreflang-Fehlern hast, findest Du in der Google Search Console (ehemals Webmaster Tools).

Veröffentlicht am

WPML 4.0 Beta veröffentlicht!

Das Team rund um WPML hat die Veröffentlichung der Beta zu WPML 4.0 bekannt gegeben. Inhalt des großen Updates sind eine verbesserte Aufteilung zwischen Administration der Webseite und der Übersetzungen.

Zusätzlich werden allgemeine Verbesserungen für den  Übersetzungsvorgangs implementiert. Dazu wird ein neuer Medien- und Übersetzungseditor eingefügt, der auf dem Stand mit führender Übersetzungssoftware ist. Mehr Informationen und der Download der 4.0 Beta wurden vom WPML-Team in einem Ankündigungs-Beitrag veröffentlicht, zusammen mit einigen Beispielen.

Das Team von WPML sammelt derzeit noch Feedback zur Beta und strebt eine Veröffentlichung der Version 4.0 in etwa 2 Wochen an. Tests der Beta sollten nicht ohne ein Backup vorher vorgenommen werden, da noch einige Fehler bis zur Veröffentlichung ausgemerzt werden müssen.

Veröffentlicht am

Lösung für: [] operator not supported for strings in wp-content/plugins/revslider/includes/framework/base-admin.class.php:71

WordPress umgezogen und dann das „[] operator not supported for strings in /home/kinkusr/public_html/wp-content/plugins/revslider/includes/framework/base-admin.class.php:71“.

Die Lösung ist ganz einfach. Hier muss in Zeile 21 in wp_content/plugins/revslider/includes/framework/base-admin.class.php die folgende Zeile geändert werden:

private static $arrMetaBoxes =''; //option boxes that will be added to post

in

private static $arrMetaBoxes = array(); //option boxes that will be added to post

Alternativ hilft auch ein Upgrade des Revolution-Sliders. Hierfür muss ggf. ein Update des Themes oder des Revolution-Sliders ausgeführt werden:


Quelle:
[1] xtemos.com: Forum xtemos.com/forums/topic/revolution-slider-error-crashes-admin-cp/

Veröffentlicht am

Was ist ein Favicon und wie füge ich das Favicon zum WordPress Blog hinzu

Webseiten haben in der Regel ein Icon, das normalerweise am linken Rand des jeweiligen Tabs angezeigt wird und helfen unter verschiedenen Tabs die jeweilige Webseite besser identifizieren zu können. Auch in den Favoriten wird dieses Icon genutzt, daher heißt es Favicon. In diesem kurzen How-To erkläre ich Dir, wie Du das Favicon auch in deinen Blog bekommst.

Was ist das Favicon?

Favicon ist Ein Kofferwort aus dem englischen „Favourite-Icon“. Es ist auch als Shortcut-Icon, Website-Icon oder Bookmark-icon bekannt. Es ist ein rechteckiges Bild, das bei vielen Browsern vor dem jeweiligen Webseiten-Namen erscheint.

Erstmalig wurde dieses 1999 durch den IE5 unterstützt. Heutzutage unterstützen die meisten Browser dieses Favicon. Die Größe beträgt ursprünglich 16 x 16 Pixel. Heutzutage werden auch 32 x 32 Pixel und 48 x 48 Pixel von vielen Browsern unterstützt. Auf mobilen Geräten wird das Icon auch als Shortcut-Icon für den jeweiligen Screen genutzt. Daher sind von 56 bis 310 Pixel im Quadrat nötig.

Hauptsächlich wird über das Favicon die Benutzerfreundlichkeit gesteigert, da so der Tab oder der Favorit schneller gefunden werden kann.
Ebenfalls zeigt es häufig das Markenlogo, das als eine Art Siegel für den Nutzer fungiert und Vertrauen aufbaut:

Bekannte Symbole werden so mit Vertrauen vorbelegt und als Nutzer weiß man wo man hinzuklicken hat.

Ebenfalls zeigt es häufig das Markenlogo, das als eine Art Siegel für den Nutzer fungiert und Vertrauen aufbaut:

Bekannte Symbole werden so mit Vertrauen vorbelegt und als Nutzer weiß man wo man hinzuklicken hat.

Wie erstelle ich ein Favicon?

Die Erzeugung von Favicons ist angenehmer Weise kinderleicht. Du brauchst keinen Entwickler von uns Coding Pioneers engagieren. Du kannst ein individuelles Icon mit PhotoShop oder verschiedenen Online-Tools erstellen. Wenn Du die Grafik selber erstellst, dann beachte, dass immer eine Datei am besten mit dem Namen „favicon.ico“ dabei generiert wird in der Größe von 16 x 16 Pixeln.

Mit WordPress in der Version 4.3 (und folgende) ist das Seiten-Icon bereits als Feature im System und man muss nur noch eine Datei, die optimaler Weise 512 x 512 Pixel hat hochladen:
WordPress Dashboard > Design > Customizer: Hier in den Website Informationen das Website-Icon.

Ansonsten kann auch ein Generator, wie favicomatic genutzt werden, um die gewünschten Versionen eines Favicons zu erstellen. Diese werden dann auf den FTP-Server am besten in das root-Verzeichnis der WordPress-Installation gelegt oder entsprechend in das Theme-Verzeichnis unter wp-content > themes > ‚Theme Name‘.

Zurück im WordPress Backend muss noch eine Kleinigkeit an der header.php-Datei des Themes geändert werden. Dazu unter WordPress Dashboard > Design > Editor die header.php Datei öffnen (oder entsprechend über das FTP-Programm. Nun muss folgender Code nach dem <head> ergänzt werden:


<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/favicon.ico">

Wenn Du hingegen das favicon.ico im Template-Verzeichnis in die assets gelegt hast, musste du den Pfad entsprechend ergänzen:


<link rel="icon" type="image/x-icon" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/favicon.ico">

Wenn Du die Datei favicon.ico in das WordPress Root-Verzeichnis gelegt hast:

<link rel="icon" type="image/x-icon"href="http://www.deinewebseite.de/favicon.ico">

Wenn Du hingegen ein paar mehr Icons nutzen möchtest, könnte es auch entsprechend wie folgt aussehen:



<link rel="apple-touch-icon-precomposed" sizes="57x57" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apple-touch-icon-57x57.png" /><br>
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apple-touch-icon-114x114.png" /><br>
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apple-touch-icon-72x72.png" /><br>
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apple-touch-icon-144x144.png" /><br>
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apple-touch-icon-60x60.png" /><br>
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apple-touch-icon-120x120.png" /><br>
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apple-touch-icon-76x76.png" /><br>
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/apple-touch-icon-152x152.png" /><br>
<link rel="icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/favicon-196x196.png" sizes="196x196" /><br>
<link rel="icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/favicon-96x96.png" sizes="96x96" /><br>
<link rel="icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/favicon-32x32.png" sizes="32x32" /><br>
<link rel="icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/favicon-16x16.png" sizes="16x16" /><br>
<link rel="icon" type="image/png" href="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/favicon-128.png" sizes="128x128" /><br>
<meta name="msapplication-TileImage" content="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/mstile-144x144.png" /><br>
<meta name="msapplication-square70x70logo" content="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/mstile-70x70.png" /><br>
<meta name="msapplication-square150x150logo" content="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/mstile-150x150.png" /><br>
<meta name="msapplication-wide310x150logo" content="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/mstile-310x150.png" /><br>
<meta name="msapplication-square310x310logo" content="<?php echo get_stylesheet_directory_uri(); ?>/assets/images/mstile-310x310.png" /><br>

Nach dem Editieren musst du die Änderungen nur noch speichern. Es kann sein, dass es einige Stunden/Tage Bedarf, bis das Icon sichtbar ist (alternativ kannst du auch deinen Browsercache leeren).

Viel Spaß mit deinem neuen Favicon, solltest du darüber hinaus noch Fragen haben, schreib uns gerne.

Veröffentlicht am

WordPress Starter Themes für Ihre mehrsprachige Website

Mögen sie eher „alles inklusive“ Themes, wie Divi oder Avada, oder mögen Sie minimalistische Themes, welche mit einem schlanken Design aufwarten?Beide Varianten bieten viele Vorteile, es gibt einfach kein „richtig“ oder „falsch“. Auf WPML.org wurde ein Beitrag veröffentlicht, welcher 3 minimalistische Themes vorstellt, die vom WPML Team getestet und für gut befunden wurden. In diesem Beitrag werden Sie einen direkten Vergleich zwischen allen 3 Themes finden, welcher einen Überblick über alle Add-Ons und Features liefert. Der Link zum Beitrag: https://wpml.org/2018/01/wordpress-starter-themes-to-consider-for-your-multilingual-sites/Falls Sie nach einem minimalistischen Starter Themes für Ihr nächstes Projekt suchen, kann dieser Beitrag Ihnen helfen, eine Entscheidung zu treffen.

Veröffentlicht am

WPML 3.9 ist erschienen und setzt der Duplikation ein Ende

Direkt nach Ende der Feiertage hat das Team rund um WPML einige neue Features und Verbesserungen veröffentlicht, die alle in dem Update 3.9 vereint werden.

WPML 3.9 bietet einige Neuheiten, neben den üblichen Verbesserung der Leistung und Stabilität. Unter anderem kann der Benutzer nun Inhalt in seiner Standardsprache anlegen, und solange keine Übersetzung für eine Sprache vorhanden ist, wird der Originaltext angezeigt. Dadurch entfällt das lästige kopiere in die anderen Sprachen, bis ein Übersetzer gefunden wurde.

Diese und weitere Informationen finden sich im offiziellen Ankündigungsbeitrag auf der offiziellen WPML Homepage.

Veröffentlicht am

WPML Contractors – Die neue Art der Hilfe

Brauchten Sie jemals Hilfe bei der Erstellung Ihrer Mehrsprachen Website? Oder sind Sie ein erfahrener Entwickler, der nach neuen Aufträgen sucht?

Das neue WPML Contractor System ist genau die Lösung und es ist nun gestartet. Das System erlaubt es Ihnen, erfahrene Entwickler zu finden, die Ihnen helfen können, Ihre Webprojekte zu realisieren.

Sofern Sie WPML für mehr als 6 Monate nutzen, werden Sie in Ihrem Benutzeraccount auf WPML.org eine Einladung finden, dem System beizutreten. Dort sehen Sie die weiteren Schritte, die benötigt werden, um dem System beizutreten als Entwickler. Eine der Vorraussetzungen besteht aus 3 Mehrsprachigen Websites, die Sie oder Ihr Team entwickelt haben müssen. Das WPML Team wird Ihre Bewerbung dann prüfen und, sollte sie angenommen werden, in der neuen Contractor Search veröffentlichen.

Für mehr Informationen, oder um Feedback zu geben, besuchen Sie bitte den offiziellen Veröffentlichungsbeitrag.

Veröffentlicht am

Erste Beta Version von WPML 3.9 erschienen

Für WPML 3.9 ist die erste Beta Version nun verfügbar. Neben zahlreichen kleinen Änderungen wurde auch eine große Änderung im Bereich der Inhaltsübersetzung angekündigt. So erlaubt ein neuer Modus, getauft „Translatable“, nicht übersetzte Einträge anzuzeigen in allen Sprachen anzuzeigen, ohne den Inhalt per Hand duplizieren zu müssen. Sobald eine Übersetzung für den Inhalt erstellt wurde, wird automatisch der Inhalt in der gewünschten Sprache angezeigt.

Wer die neue Version gerne ausprobieren möchten, kann in seinem WPML – Account unter Beta-Channel die benötigten Dateien herunterladen. Zur Sicherheit empfiehlt sich vorher ein Backup der WordPress-Datenbank zu erstellen.

Weitere Information zum neuen Update finden sich in der Ankündigung auf WPML.org.

Veröffentlicht am

WordPress: Advanced Custom Fields und WPML

Das Plugin „Advanced Custom Fields“ bietet die Möglichkeiten, bestimmten Seiten-Typen (z.B. Page, Post oder auch Custom) benutzerdefinierte Felder hinzuzufügen. Soll die Webseite jetzt mit Hilfe von WPML mehrsprachig gemacht werden, stößt man auf eine Überraschung: Beim Anlegen der Seiten für eine andere Sprache, werden die Custom-Fields nicht mit dupliziert. Das würde bedeuten, dass der gesamte Inhalt dieser Felder auf die Seite der anderen Sprache manuell übertragen werden muss, da dieser sonst nicht Bestandteil der neuen Seite ist und im Frontend nicht angezeigt wird (auch wenn dieser nicht übersetzt werden muss).

Es entspricht dem standardmäßigen Verhalten von WordPress, dass die Custom-Fields beim Duplizieren nicht kopiert werden. Um die Custom-Fields beim Duplizieren der Seite ebenfalls mit zu übernehmen, sind folgende Einstellungen notwendig:

1. Benutzerdefinierte Felder übersetzbar machen

Zunächst müssen in den Einstellungen von WPML (Im Menü: WPML – Übersetzungsmanagement – Einrichtung des mehrsprachigen Inhalts) die benutzerdefinierten Felder ausgewählt werden, welche übersetzt werden sollen. Diese Einstellungen befinden sich unter „Übersetzung benutzerdef. Felder“ und dort muss für jedes Feld die Option „Übersetzen“ ausgewählt werden. Die Anzahl der Felder kann, je nach Seitenumfang, sehr groß sein. Damit nicht jeder Radio-Button manuell angeklickt werden muss, kann in der Browser-Konsole folgender JavaScript ausgeführt werden:

$('#icl_cf_translation td').each(function() {if($(this).attr('title') === 'Übersetzen'){$(this).find('input[type=radio]').prop('checked',true);}});

2. Übersetzen der ACF-Gruppen

Die benutzerdefinierten Felder (ACF) werden beim Duplizieren übernommen, jedoch beim Bearbeiten der übersetzten Seite nicht angezeigt. Damit diese auch im Backend sichtbar werden, muss in den Einstellungen von WPML (Im Menü: WPML – Übersetzungsmanagement – Einrichtung des mehrsprachigen Inhalts – Benutzerdefinierte Beiträge) der Beitragstyp „Felder-Gruppen“ auf „Übersetzen“ gestellt werden. Jetzt ist es möglich, die Felder-Gruppen unter „Eigene Felder“ (Custom Fields) zu bearbeiten und für jede Gruppe eine Übersetzung in der entsprechenden Sprache anzulegen. Beinhalten die benutzerdefinierten Felder (ACF) keinen vordefinierten Inhalt, reicht hier das einfache Duplizieren der Felder-Gruppen aus. Nachdem alle Gruppen erstellt wurden, werden diese auf den Seiten der neuen Sprache angezeigt.

3. Seiten duplizieren

Beim Duplizieren der Seiten ist es wichtig, den Inhalt nicht über den Button „Inhalte von Deutsch kopieren“ zu übernehmen. Die Seite muss in der Bearbeiten-Ansicht der deutschen Seite über die rechte Meta-Box Sprache dupliziert werden, damit alle Inhalte übernommen werden (Checkbox anklicken und Duplizieren wählen).

Veröffentlicht am

WordPress: Inhalts-Editor auf bestimmten Template-Seiten verstecken

Manche WordPress-Seiten benötigen aufgrund des Templates keinen Editor für den Seiteninhalt. Dieser ist beispielsweise über sog Custom-Fields, die bspw. mit dem Plugin ACF gepflegt. Damit Benutzer den Inhalt der Seite nicht trotzdem über den Editor pflegen wollen und sich wundern, warum dieser nicht angezeigt wird, empfiehlt es sich diesen auszublenden.

Um den Inhalts-Editor für Seiten eines bestimmten Tepmlate-Typs auszublenden wird folgende Action in die Datei functions.php des Themes eingefügt.

add_action( 'admin_init', 'hide_editor' );

function hide_editor() {
      global $pagenow;<br>
    if( !( 'post.php' == $pagenow ) ) return;
<br>
    global $post;
    //ID des Posts
    $post_id = $_GET['post'] ? $_GET['post'] : $_POST['post_ID'];
    if( !isset( $post_id ) ) return;
<br>
    // Verstecken des Editors auf einer Seite mit einem bestimmten Titel
    $homepgname = get_the_title($post_id);
    if($homepgname == 'Seitentitel'){ 
       remove_post_type_support('page', 'editor');
    }
    // Verstecken des Editors auf Seiten eines bestimmten Seitentemplates
    // Ermitteln des Names des Seitentemplates
    $template_file = get_post_meta($post_id, '_wp_page_template', true);
    if($template_file == '[Seitentemplate].php'){
       remove_post_type_support('page', 'editor');
      }
}


Dabei muss der Titel der Seite oder der Name der Template-Datei festgelegt werden. Wird diese Seite nun editiert, ist der Editor für den Inhalt der Seite nicht mehr sichtbar.