Google startet die AMP HTML Offensive. Accelerated Mobile Pages sind nun offizieller Bestandteil der mobilen Suche

Ende 2015 hatte Google das Projekt AMP gestartet. AMP steht für Accelerated Mobile Pages und der Zweck des Frameworks ist es, mobile Webseiten zu verschlanken und raketenschnell zu laden. Vor allem bei mobilen Newsseiten und Blogs ist dies äußerst interessant. Denn gerade bei Newsseiten wollen Benutzer die Inhalte sofort auf ihrem Smartphone sehen und jede Millisekunde mehr Ladezeit sorgt eher für Unmut.

Seit Februar 2016 begann dann Google die Suchergebnisse in der Rubrik „Schlagzeilen“ hervorzuheben, die mit dem AMP Framework erstellt wurden. Seitdem wächst die Anzahl der Webseiten, die AMP unterstützen sehr schnell. Google beziffert aktuell 600 Mio. Dokumente, die mit AMP erstellt wurden. Es ist kein Nischenprodukt oder eine Randtechnologie, sondern ich bin überzeugt, dass AMP in den kommenden Monaten enorm an Bedeutung für Online Publisher gewinnt. Vor Allem für Verlage, Blogs, Journalisten, Online Zeitungen oder Corporate Publisher wird das Format essentiell werden.

Wie funktioniert AMP?

AMP ist eine Art Untersprache von HTML. Bekannte HTML Tags werden mit einem AMP Präfix gekennzeichnet. Das HTML Dokument enthält zudem ein zusätzliches AMP CSS und ein AMP Script.

Google cacht die Seiten bereits bevor sie aufgerufen wurden. Taucht also ein News Artikel in den Google News auf, wird die AMP Seite von Google gecacht. Klickt der User auf den Artikel, lädt diese blitzschnell.

Das HTML Markup erfordert folgende Bestandteile:

  • start with the doctype <!doctype html>.
  • contain a top-level <html ⚡> tag (<html amp> is accepted as well).
  • contain <head> and <body> tags (They are optional in HTML).
  • contain a <link rel=“canonical“ href=“$SOME_URL“ /> tag inside their head that points to the regular HTML version of the AMP HTML document or to itself if no such HTML version exists.
  • contain a <meta charset=“utf-8″> tag as the first child of their head tag.
  • contain a <meta name=“viewport“ content=“width=device-width,minimum-scale=1″> tag inside their head tag. It’s also recommend to include initial-scale=1 (1).
  • contain a <script async src=“https://cdn.ampproject.org/v0.js“></script> tag inside their head tag.
  • contain the AMP boilerplate code (‚head > style[amp-boilerplate]‘ and ’noscript > style[amp-boilerplate]‘) in their head tag.

(1) width=device-width,minimum-scale=1 is required to ensure GPU rasterization is enabled.

Eine sehr gute Referenz, wir AMP HTML Seiten aufgebaut werden ist hier zu finden.

Wie nutze ich AMP für meine WordPress Webseite

Es gibt bereits erste Ansätze und Plugins um WordPress Webseiten mit AMP HTML zu versehen. Schreiben Sie uns oder rufen Sie uns an, wir unterstützen Sie WordPress Webseiten zu optimieren und schneller zu machen. Google setzt immer mehr auf mobile Webseiten und schon heute ist eine Optimierung der Ladezeit der Webseite extrem wichtig.

Interessante Quellen:

https://www.ampproject.org/

Mobile Webseite werden zum Rankingfaktor bei Google

Seit einiger Zeit kursieren die Gerüchte, dass Google nun auch die Mobilfähigkeit einer Webseite mit in der Bewertung des Rankings aufnimmt. Offiziell hat Google dies nun bestätigt. Mobilfähige Webseite werden zum Rankingfaktor.

Sicherlich macht es Sinn, über den technischen Stand der eigenen Webseite nachzudenken und einen Relaunch oder ein Re-Design zu planen. Denn wenn die eigenen Webseite gepflegt und up to date ist, ist dies immer vorteilhaft für das eigene Ranking bei Google. Panikmache ist jedoch nicht angesagt und es muss nicht jede Webseite neu erfunden werden, um Google gerecht zu werden. Google geht es vielmehr darum, wirklich schlechte Webseiten oder Webseiten mit plattformspezifischen Weiterleitungen zu degradieren.

Das heisst, dass Webseiten die spezielle mobile Versionen haben, unter Umständen andere Inhalte ausgeben, wenn man Sie mit einem Desktop Computer oder einem Smartphone besucht. So kann es z.B. vorkommen, dass es einen Newsartikel nur für eine Desktop Version gibt. Ruft man den Artikel mit einem Smartphone auf bekommt man eine mobile 404 Fehler Seite. Ebenso erwartet Google eine korrekte Weiterleitung von mobilen Seiten. Existieren für mobile Webseiten andere Strukturen, als für Desktop Webseiten ist nicht negativ.

So sollten Weiterleitungen für mobile Endgeräte nicht aussehen. (Bild: Google)
So sollen Weiterleitungen für mobile Endgeräte nicht aussehen. (Bild: Google)

Weiterhin wertet Google zukünftig Webseiten mit Flash Videos ab, oder spezielle Weiterleitungen für iPhones oder Android Phones.

Zu prüfen ist nun, ob die eigene Webseite genannte Techniken verwendet. Diese sollten dann am besten ausgebessert werden. Google stellt ein Tool zur Verfügung, um die mobilfähigkeit einer Webseite zu testen unter

https://www.google.de/webmasters/tools/mobile-friendly

Mit diesem Tool kann recht einfach die Mobilfähikeit einer Webseite getestet werden.

Wie kann ich meine Webseite fit für die Zukunft machen?

Wenn Sie wirklich sicher gehen wollen, dass Ihre Webseite für die Zukunft gerüstet ist und allen Bewertungskriterien von Google gerecht wird, sollten Sie Ihre Webseite im Responsive Design neu erstellen lassen. Responsive Webseite passen sich automatisch an alle Displaygrößen an und stellen die Inhalte optimal für das jeweilige Gerät dar. Es gibt keine speziellen URL´s für mobile Geräte und keine plattformspezifischen Weiterleitungen oder Seiten. Es wird lediglich das Layout und das Design an das jeweilige Gerät angepasst.
Somit ist die Webseite auch für Google gut lesbar und für Ihre Kunden, ob Sie nun Ihre Webseite am Smartphone betrachten oder im Büro vorm PC.

Gerne beraten wir Sie zu diesem Thema und helfen Ihnen Ihre Webseite fit für die Zukunft zu machen.

Mehrere Autoren im Google+ und Authorship

Mit dem Autorenkonzept von WordPress ist es relativ einfach Blogartikel mit Google+ zu verbinden, so dass in den Google Suchergebnissen das eigene Avatar Bild auftaucht.

Als erstes muss in der single.php ein Link zu der eigenen Profilseite enthalten sein.
<a href=“<?php echo esc_url( get_author_posts_url( get_the_author_meta( ‚ID‘ ) ) ); ?>“ rel=“author“>Autor</a>

Auf der author.php Seite muss dann ein Link zum Google+ Profil eingefügt werden.
<a href=“https://plus.google.com/103445588405111185505?rel=author“>Google</a>

Und als letzter Schritt muss auf dem eigenen Google+ Profil ein Link zu der Webseite eingefügt werden. In Webmaster Tools kann man dann mit dem Test-Tool für strukturierte Daten die erfolgreiche Verknüpfung testen.

Das wars.

Kaufen Button Lösung

Ab 1. Juli 2012 tritt das neue „Button“ Gesetz in Kraft. Nach diesem Gesetz sind Betreiber von Online Shop verpflichtet den Bestellbutton am Ende eines Kaufvorgangs besonders zu kennzeichnen. Ein gute Erklärung dazu findet ihr hier: http://www.shopbetreiber-blog.de/2012/03/02/button-losung-verabschiedet/

Für WooCommerce habe ich einen Hook, wie man den Button updatesicher beschriften kann:

[code]

add_filter(‚woocommerce_order_button_text‘, ‚german_order_button_text‘);

function german_order_button_text() {
return __(‚Buy‘, ‚woocommerce‘);
}

[/code]

Diesen Filter fügt ihr in die functions.php eures WordPress Themes ein. Dann müsst Ihr noch die Sprachdatei bearbeiten. Das geht am besten mit dem Plugin CodeStyling Localization.

Beim nächsten Update wird allerdings die Sprachdatei überschrieben. Es wäre also sinnvoll den Code abzuändern:

 

[code]

add_filter(‚woocommerce_order_button_text‘, ‚german_order_button_text‘);

function german_order_button_text() {
return "Kaufen";
}

[/code]

Woocommerce 1.4 mit deutschen Steuerinformationen

Seit der Version 1.4 gibt es bei WooCommerce ein Problem mit meinem Hook zur Anzeige der Steuer auf der Produktseite.
Da die Entwickler die Steuerverwaltung überarbeitet haben funktioniert der Hook nicht mehr.

Die Lösung ist wie folgt:

[sourcecode language="plain"]</del>
<del>add_action( 'woocommerce_single_product_summary', 'woocommerce_template_single_pp', 10);</del>

<del>function woocommerce_template_single_pp() {</del>

<del>global $product;</del>

<del>$_tax = new WC_Tax();</del>

<del>$rates = $_tax->get_rates( $product->get_tax_class() );</del>

<del>if (!isset($rates[0]['rate'])) return;</del>
<del> ?></del>

<del>(inkl <!--?php echo round($rates[0]['rate']); ?-->% Mwst. und zzgl. <a href="<?php bloginfo('url'); ?>/kauf-und-lieferbedingungen/">Versandkosten</a>)</del>

<del><!--?php <br ?--></del>
<del>}</del>
<del>[/sourcecode]

Florian Krüper hat den Hook für die aktuelle Version 1.4.4 angepasst, so dass der jeweils zugeordnete Steuersatz verwendet wird. Vielen Dank dafür

Features:

  • Anzeige des MwSt.-Satzes auf der Produktdetailseite
  • Gibt den für das einzelne Produkt hinterlegten MwSt.-Satz aus (funktioniert auch bei mehreren Sätzen, z. B. 7%, 19%, MwSt.-befreit)
  • Bei 0% MwSt. alternative Textausgabe: „mehrwertsteuerbefreit“
  • FailSafe, für den Fall, dass kein MwSt.-Satz ermittelt werden kann wird „inkl. 19% Mwst.“ ausgegeben.

[sourcecode]

add_action( ‚woocommerce_single_product_summary‘, ‚woocommerce_template_single_price‘, 10);

function woocommerce_template_single_price() {

//Anpassungen
$mehrwertsteuerBefreit     = "Mehrwertsteuerbefreit";                                    //Text wird angezeitg, wenn MwSt. = 0%
$failSafe                 = "inkl. 19% MwSt.";                                        //Text wird angezeigt, wenn Ausgabe der MwSt fehlschlägt (z.B. wegen eines Updates)
$versandText             = "<br>Innerhalb Deutschlands, versandkostenfrei<br>";         //Text zum Versand. Optional. Wird vor dem Link angezeigt. Optional.
$versandLink             = "http://blogDomain.de/versandbedingungen";                //Absoluter (!) Link zu Versandbedingungen. Optional.
$versandLinkText         = "Versandbedingungen";                                        //Verlinkter Text für Versandbedingungen. Optional.

/*————– Unterhalb dieser Zeile sollte nichts angepasst werden müssen ————–*/
global $product;

//Preis anzeigen
woocommerce_get_template(’single-product/price.php‘);

//MwSt.-Satz für Produkt raussuchen
$_tax = new WC_Tax();
$rates = array_shift($_tax->get_rates( $product->get_tax_class() ));

//Den zugewiesenen MwSt-Satz anzeigen
if (isset($rates[‚rate‘])) {
if ($rates[‚rate‘] == 0) {
//Alternativtext, wenn 0% MwSt.
echo "<p>".$mehrwertsteuerBefreit;
} else {
echo "<p>inkl. ".round($rates[‚rate‘])."% MwSt. ";
}
} else {
//FailSafe: Wenn irgendetwas schiefgeht, besser das anzeigen, als gar nichts.
echo $failSafe;
}

// Angaben zu Versandkosten (Anm.: Hier könnte man auch automatisch die jeweiligen Versandkosten auslesen. So ist es aber einfacher und wird in den meißten Fällen genügen)
echo $versandText;
echo "<a href="".$versandLink."">".$versandLinkText."</a></p>";
?>
<?php
}

[/sourcecode]

Woocommerce 1.3 deutsch

Das aktuelle Sprachpaket für die deutsche informelle Version (also DU) gibt´s hier zum Download.

[button link=“https://www.passau-webdesign.com/wp-content/uploads/2011/12/informal.zip“ style=“download“ color=“green“]Download Sprachpaket[/button]

Den Ordner entpacken und unter woocommerce/languages/informal kopieren.

Woocommerce Übersicht über laufende Bestellungen

Woocommerce bietet dem Shopbetreiber eine Übersicht und Bearbeitung von Bestellungen über der WordPress Admin Menü. Manchmal wäre eine einfache Liste mit laufenden Bestellungen ganz sinnvoll.

Eine Lösung ist eine separate Seite im Shop mit einer solchen Liste, die aber nur für Admins sichtbar ist.

Hierfür erstellt man einfach eine neue Template Datei mit folgendem Inhalt.

Dann legt man in WordPress eine neue Seite mit dem erstellen Template an.

WooCommerce rechtskonform programmieren

WooCommerce ist eine moderne und schöne E-Commmerce Lösung für WordPress. Wie so oft bei Produkten aus USA oder wie in diesem Fall Südafrika, genügen die Standard Einstellungen nicht, um einen rechtskonformen deutschen Online Shop zu erstellen. Daher habe ich ein paar kleine Hooks erstellt, um WooCommerce rechtssicher für Deutschland zu machen.

1. Steuer und Versandkosten auf der Produktseite ausweisen

Standardmässig wird nur der Bruttopreis angezeigt. Unter dem Preis sollte die Steuer und ein Hinweis auf Versandkosten ausgewiesen werden.

Dies habe ich mit folgendem Hook gelöst:

[sourcecode language=“plain“]add_action( ‚woocommerce_single_product_summary‘, ‚woocommerce_template_single_pp‘, 10, 2);

if (!function_exists(‚woocommerce_template_single_pp‘)) {
function woocommerce_template_single_pp( $post, $_product ) {

$_tax = &new woocommerce_tax();
$rate = $_tax->get_rate( $_product->get_tax_class() );

?>
<p>(inkl <?php echo round($rate); ?>% Mwst. und zzgl. <a href="<?php bloginfo(‚url‘); ?>/versandkosten">Versandkosten</a>)</p><?php

}
}[/sourcecode]

2. Ein Hinweis auf die AGB beim endgültigen Bestellen

Damit die Bestellung auch reechtssicher ist, empfiehlt es sich, dass der User die AGB´s per Checkbox akzeptieren muss.

Dies habe ich mit folgendem Hook gelöst:

[sourcecode language=“plain“]

add_filter(‚woocommerce_billing_fields‘, ‚custom_woocommerce_billing_fields‘);

function custom_woocommerce_billing_fields( $fields_array ) {
$fields_array[‚agb‘] = array(
’name‘            =>’agb‘,
‚type‘             => ‚checkbox‘,
‚label‘         => __(‚Mit Abgabe einer Bestellung bestätigen Sie, unsere AGB gelesen, verstanden und akzeptiert zu haben.‘, ‚woothemes‘),
‚placeholder‘     => __(‚AGB‘, ‚woothemes‘),
‚required‘         => true,
‚class‘         => array(’notes‘)
);
return $fields_array;
}

[/sourcecode]

Wer Hilfe bei der Integration benötigt, kann sich gerne melden.

 

Edit: 23.05.2012

Der genannte Code funktionierte für die ersten Versionen von Woocommerce. Es gibt aber bereits eine Überarbeitung, die funktioniert und die mehrfach im Einsatz ist. Den Hook zum Anzeigen der Versandkosten gibt’s hier.

https://www.passau-webdesign.com/woocommerce-1-4-mit-deutschen-steuerinformationen/

 

 

WooCommerce deutsche Sprachdatei

Bisher gab es für das WordPress Plugin WooCommerce von Woothemes noch keine deusche ÜbersetzunhMit der deutschen Sprachdatei für WooCommerce, lässt sich das Shop Plugin auf deutsch betreiben. Aktuell befindet sich die deutsche Sprachdatei in der Betaphase. Von den insgesamt 1351 Zeilen fehlen noch 330 Zeilen. Dies sind die Überetzungen der Länder auf deutsch.

Die Datei ist wie gesagt noch Beta und wird noch überarbeitet und komplettiert. Das Archiv enthält die .po und .mo Dateien.

Installation:

Laden Sie die Sprachdatei herunter und entpacken Sie diese. Laden Sie die .po und .mo Dateien in das Verzeichnis wp-content/plugins/woocommerce/languages. Fertig.

[box type=“download“]woocommerce_german_language_beta2[/box]

Hinzugefügt am 11.11.2011:

Die deutsche Sprachdatei wurde offiziell in das WooCommerce Package integriert. Es gibt eine Version mit Sie und Du. Die offizielle Version ist bei Woothemes zu finden

[fbshare url=“https://www.facebook.com/torsten.jerschabek“ type=“button“] [tweetmeme style=“compact“] [google_plusone size=“small“ annotation=“inline“ language=“German“]

Einfaches Einfügen aktueller Javaskript Frameworks

Am Anfang der Entwicklungsphase eines HTML Dokuments verwendet man eigentlich immer die gleichen Elemente, um ein Grundgerüst für das Dokument zu erstellen.  Man erstellt den HTML Rahmen mit <Head> und <Body> und fügt dann CSS Dateien und Javasrkipt Framworks ein.

<script type=“text/javascript“ src=“…“></script>

Ein guter HTML Editor bietet z.B. die Möglichkeit Grundelemente wie den HTML Rahmen mit einigen wenigen Klicks einzubinden. Beim Einbinden der Javaskript Frameworks muss man aber immer darauf achten, die aktuelle Version einzubinden. Ganz bequem funktioniert das mit dem Tool von scriptscr.net

Hier findet man die meist benutzten Javaskript Frameworks von jQuery über Prototype bis hin zum dojo toolkit.

Mit Copy & Paste lassen sich die Tags in das eigene HTML Dokument einfügen.

<script type=“text/javascript“ src=“http://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js“></script>

Ein Klick auf den Info button zeigt die aktuelle Version, den Pfad zu dem Framework und das letze Update des Codes.

[google_plusone size=“tall“ annotation=“inline“ language=“German“] [fbshare type=“button“] [tweetmeme style=“compact“]