Menu

Katharina Brunner

Bloggin' since 2007

Google News straft Sponsored Content ab: Ein Überblick und eine Lösung

Advertorials, Native Advertising, Sponsored Posts – Werbung, die makellos in das redaktionelle Kleid gewandet ist, scheint der Hoffnungsträger vieler journalistischer Geschäftsmodelle sein*. Doch das mag Google und erst recht Google News nicht.

Die wichtigste Quelle dazu ist ein YoutTube-Video des Google-Mitarbeiter Matt Cutts, der erläutert, welche Konsequenzen es für Webseiten-Betreiber haben kann, wenn sie sich nicht an die Regeln halten. Bezeichenend ist seine Abteilung: „Web Spam Team“.

Cutts spricht ab Minute 2:15 Uhr vor allem zwei Punkte an, die Auswirkungen auf die Sichtbarkeit einer Seite bei Google haben können:

  1. Google Suchmaschine: Bezahlte Beiträge mit Links sind gekaufte Links. Punkt. Die Links müssen also mit einem rel=“nofollow“ versetzt werden und ließen dadurch nicht in den PageRank ein.
  2. Google News: Bezahlte Beiträge sollen bei Google News nicht vorkommen, weshalb damit gedroht wird, dass nicht nur die fälscherlicherweise indexierten Beiträge gelöscht werden, sondern die gesamte Webseite. Google-Mitarbeiter Cutts empfiehlt eine „abundunace of caution“.

Ein Beispiel für eine Bestrafung ist eine Lokalzeitung in England, deren PageRank auf 0 gesetzt wurde, nachdem dort ein Text über einen Blumerlieferdienst veröffentlicht wurde, der zwar als sponsored content gekennzeichnet war, aber der Link zum Lieferdienst aber kein nofollow-Attribut hatte.

Wie soll man nun damit umgehen, wenn journalistische Beiträge und bezahlte Texte auf einer Seite liegen und bei GoogleNews auftauchen möchte?

Eine Lösung beim Content-Management-System WordPress: Das Google News XML Sitemap Plugin erstellt eine spezielle Sitemap für Google News. Besonders praktisch: Dort kann man bestimmte Kategorien ausschließen – also die, in der sponsored content liegt. Die Sitemap für Google News ist dann unter deinedomain.de/google-news-sitemap.xml erreichbar.

Linkliste zum Thema Google News und Sponsered Content/Advertorials:

Google: Separating different types of content on your site

Seokratie: Advertorials und Sponsored Posts: Eine unbequeme Wahrheit

Die juristische Perspektive auf den Konflikt zwischen redaktionellen und werblichen Beiträgen bietet der Blog Recht-Freundlich.de.

PaidContent: If you are running advertorial or sponsored content, Google is watching you

Business Insider: Google Just Threatened To Ban News Sites That Run Advertising It Doesn’t Like

Bueltge: Google News Sitemaps in WordPress

* Man kann natürlich darüber diskutieren, inwieweit das dem journalistischen Ethos dient. Aber hey – Geldverdienen mit Journalismus ist kein Zuckerschlecken.

Mei Dog bam Hog’n

Alter Holzboden, weiße Wände, Dachterrasse: Im dritten Stock eines ehemaligen Brauereigebäudes tummeln sich am Stadtplatz1, Freyung, Bayerischer Wald, die, die man gemeinhin Kreative nennt. Ich besuche für einen Tag den Hog’n, das Onlinemagazin ausm Woid, um die Ecke haben auch eine Web- und eine Designagentur ihre Büros.
(mehr …)

Das CMS ist tot, es lebe das CMS!

WordPress, Drupal und Joomla können eines richtig gut: homogenen Inhalt darstellen, in einer Datenbank ablegen und auffindbar machen. Doch sobald die Darstellung komplexer wird oder trendy Sachen, wie Parallax Scrolling miteingebaut werden, stoßen die gängen CMS an ihre Grenzen. Nicht von ungefähr empfiehlt Aaron Phielhofer von der New York Times, bei Projekten, die sich unter dem Buzzword „Digital Storytelling“ zusammenfassen lassen, Content-Management-Systeme zu vergessen. Den Rat haben wir bei der Lautschrift verfolgt, als wir „In grauer Vorzeit“ erstellt haben: Eine Geschichte aus den Anfangsjahren der Uni Regensburg im Snowfall-Stil.

Dort ist alles hard-gecoded, d.h. der Text wurde dort wirklich in das HTML-Gerüst eingearbeitet und wurde nicht über eine Datenbankabfrage o.ä. eingearbeitet. Das ist nervig und für wiederkehrende Projekte sehr unhandlich – gerade wenn man davon ausgeht, dass viele Redakteure HTML nicht fließend können.

Daraus folgt: Früher oder später muss man doch auf ein wie auch immer geartetes CMS zurück kommen, um verschiedenen Geschichten im Backend einen Rahmen zu geben. Die üblichen Verdächtigen – WordPress, Drupal Joomla – sind dabei oft zu unflexibel, um wirklich geilen Scheiss zu machen. Doch es scheint Abhilfe zu geben:

Open News, eine Platform von Mozilla, die sich mit Datenjournalismus, digital Storytelling und ganz allgemein Onlinejournalismus beschäftigt, stellt vier Systeme vor, die in Redaktionen entwickelt wurden – denen man fehlende Praxistauglichkeit also mal per se nicht absprechen kann:

With the growing number of nerds in the newsroom, it’s only fitting that new technology patterns for building news applications have emerged. The latest rage? Ultralight content management systems.

Am vielversprechensten klingt Tarbell: Gespeichert wird in der Cloud, vorwiegend mit Google Spreadsheet. Vorteil: Auch weniger code-affine Leute können mit Tabellenverarbeitungsprogrammen umgehen, auch um ein Backup braucht man sich nicht mehr groß kümmern. Gehostet wird gerne bei Amazon. Vorteil davon: Dort wird flexibel auf die Zugriffszahlen angepasst. Dennoch bleibt ein fader Beigeschmack: Soll man wirklich den ganzen Content bei Google speichern?

Aber abschreiben sollte man WordPress und Konsorten nicht. Nur einen Klick weiter berichtet Joey Marburger von der Washington Post in einer Case Study davon, wie er und seine Kollegen, das Portal „The Grid“ auf WordPress aufgebaut haben:

We made the decision early to use WordPress as the front-end controller because it allowed us to create multiple instances of The Grid simply by created new “posts” in WordPress. (…) Furthermore, we were using WordPress in a very different way than it was designed for. WordPress did not store or distribute the true content of The Grid. It simply contained The Grid itself with the various options set.

Das klingt ganz nach Matt Muellenweg, dem Mitbegründer von WordPress. In seiner jährlichen Rede „State of the Word“ wünschte er sich 2013, dass WordPress zu einem Framework für Web-Applikationen wird.

Minimalismus ist pareto-optimal

Although I sometimes use the terms ‘minimal’ and ‘simple’ as if they were interchangeable, by definition, minimalism actually refers to the paring down of elements to get to the essence of a thing. This doesn’t mean you practise minimalist design simply by removing ornamentation; it means you ensure that every part of the design works together to the point where nothing else can be added or removed to improve it. It’s not easy to do well

aus: 5 killer ways to use minimalism

Über Bootstrap und WordPress habe ich bei Elmastudio geschrieben. Hier entlang zu Ein WordPress-Theme mit Bootstrap entwickeln – Ein Tutorial für Einsteiger

Theme für Online-Magazin auf WordPress-Basis

Das erste Projekt, bei dem ich mit einer ganz leeren Datei begonnen habe: Die Webseite der Regensburger Studierendenzeitschrift Lautschrift. Ohne ein anderes Theme als Vorlage zu verwenden, konnte ich mein Verständnis von WordPress als Content-Management-System sehr vertiefen. So gibt es auf der Startseite gleich drei Datenbankabfragen: Eine Sache, die es nicht wahrscheinlich nicht so kompliziert gebraucht hätte, aber jetzt schreckt mich im WordPress-Loop nichts mehr.

Als CSS-Framework habe ich Bootstrap der Version 2 verwendet.

Im Frühjahr 2013 habe ich versucht, meine damaligen Vorstellungen eines idealen Online-Magazins umzusetzen: Große Bilder, gute Lesbarkeit, viel Weißraum.

WordPress: How to Add Thumbnails to Google Analytics Popular Post Plugin

Google Analytics Popular Plugin is a great and widely used way to present the most read articles on a website. In its default version it shows the results as an unordered list in the widgets area. Unfortunately adding thumbnails is not included. But there is a workaround.

It takes only a few steps:

1) Open google-analytics-popular-posts.php

2) Look for the code in line 378 – 384 and replace it with the following lines of code:

$titleStr = get_the_title($getPostID);
$post = get_post($getPostID);
$thumb = get_the_post_thumbnail($getPostID);
$dateStr = mysql2date('Y-m-d', $post->post_date);
$contentStr = strip_tags(mb_substr($post->post_content, 0, 60));
$output .= '<ul>'."n";
$output .= '<li>'."n";
$output .= '<div class="popular_post"><a href='.$postPagepath.'>'.$thumb.$titleStr.'</a><br/>'."n";

Explanation: You add a new variable called $thumb by using the get_the_post_thumbnail WordPress function for the specific post via $getPostID. In the $output-variable you call the $thumb variable.

Now you are using the default thumbnail size. If you want to change the size, please look at step 3.

3) To change the thumbnail size, you need to add a new variable that is called $newthumb in this example. $newthumb is equal to the thumbnail size you added via functions.php. Then you have to call $newthumbsize in $thumb.

$titleStr = get_the_title($getPostID);
$post = get_post($getPostID);
$newthumbsize = 'thumbnail-big';
$thumb = get_the_post_thumbnail($getPostID, $newthumbsize);
$dateStr = mysql2date('Y-m-d', $post->post_date);
$contentStr = strip_tags(mb_substr($post->post_content, 0, 60));
$output .= '<ul>'."n";
$output .= '<li>'."n";
$output .= '<div><a href='.$postPagepath.'>'.$thumb.$titleStr.'</a><br />'."n";

Voilá!

(This code is a modified version of a suggestion in the support area of Google Analytics Popular Posts plugin. The piece of code didn’t work for me).

Ich habe mir mein eigenes WordPress-Theme gebastelt

Alles neu! Und grüner als je zuvor!

In den vergangenen Wochen habe ich große Fortschritte darin gemacht, Webseiten in WordPress zu programmieren. Jahrelange hatte ich CSS- und PHP-Dateien zwar nach meinen Wünschen verändert, aber selbst geschrieben – also Start mit leeren Datei – hatte ich solche Dateien nie. Das hat sich nun geändert, denn ich habe einfach mal ein Tutorial von Anfang bis Ende durchgemacht und währenddessen sind mir ein paar Lichter aufgegangen.

1. Child-Themes

Ein Child-Theme bezeichnet ein verschachteltes System von Theme-Dateien. Das Parent-Theme, also die übergeordnete Datei, wird nicht verändert, sondern nur das „Kind“. Konkret habe ich also nie etwas an der originären Bootstrap-CSS-Datei verändert, sondern immer an meiner eigenen CSS-Datei. Schon eine einzige CSS-Datei kann dabei als ein Child-Theme dienen. Das Aussehen der Webseite bestimmt sich dann allein durch die Child-CSS-Datei, nur da werden Veränderungen notiert. Als Vorteil eines solchen Systems wird immer wieder gepriesen, dass sich bei Updates eines Themes nichts ändert. Das war mir immer etwas schleierhaft, denn dieses Problem ist mir in den letzten Jahren nie untergekommen. Den großen Vorteil, den ich sehe ist, dass die CSS-Datei, mit der man arbeitet, einfach nur den Code beinhaltet, der verändert wurde. Ändere ich also zum Original zum Beispiel nur die Größe der Überschrift und die Linkfarbe, dann steht im Child-CSS nur:

h1 {font-size: 1.2em;}
a {color: #ff0000;}

Das macht es sehr viel übersichtlicher, denn der Inhalt der Datei ist weniger und der eigene, also leichter zu lesen, wie ich finde.

Mehr zu Child-Themes, was sie ausmacht und wie man sie erstellt, gibt es bei Elmastudio.

2. Bootstrap Framework

Twitter hat mit Bootstrap  ein Framework veröffentlicht, auf dem man sein eigenes Webdesign aufbauen kann. Ganz leer war die Datei deshalb doch nicht, auf dem diese Seite basiert. Das Boostrap-Framework, das sind ein paar CSS und Java-Script-Dateien, die einen Rahmen für die eigene Seite setzen. Gerade die Tatsache, dass das Bootstrap bereits responsive ist, sich also automatisch an verschiedene Bildschirmgrößen anpasst, fand ich überzeugend. Denn dieses Feature wollte ich, wäre mir aber viel zu komplex, um es selbst zu bauen. Generell besteht eine Bildschirmbreite aus zwölf Teilen, die dann je nach Breite aneinandergebastelt werden. Zum Beispiel: Ich wollte einen breiten Bereich für den Text und eine Seitenleiste. Der breite Teil läuft unter der CSS-Klasse „span9“, die Seitenleiste unter „span3“. Möchte ich eine breitere Sidebar, könnte ich dafür „span4“ wählen, der Textbereich würde sich dann zu „span8“ verschmälern. Wichtig ist, dass sich die horizontalen Bereich immer auf zwölf aufaddieren. Ich könnte also theoretisch bis zu zwölf Blöcke nebeneinander laufen lassen.
Ein sehr gutes Tutorial, wie man Bootstrap und WordPress verbinden kann, gibt es beim Team Treehouse: How to Build a WordPress Theme with Bootstrap

3. WordPress-Templates und functions.php

Mit verschiedenen Templates habe ich bereits bei der Lautschrift angefangen zu arbeiten, ganz neu war mir das Konzept also nicht. Aber richtig systematisch angewandt von Anfang an, hatte ich es noch nicht. Zudem habe ich versucht mir möglichst viele Funktionen direkt in das Theme einzubauen, zum Beispiel mehrere Widget-Bereiche im Theme (Sidebar, Footer und an der oberen schwarzen Leiste). So brauche ich auch nicht so viel Plugins, zum Beispiel um Texte in zwei Spalten darzustellen.

To Do

An ein paar Ecken gibt es noch etwas zu basteln: Die Ansicht auf dem Smartphone scheint noch nicht wirklich top zu sein, einen „Back-to-top“-Button im Footer zum Beispiel oder Formatvorlagen. Anbieten würde sich dazu zum Beispiel die Rubrik Lesenswertes. Auch ein RSS-Button fehlt noch.

Fazit

Mit Vorkenntnissen in CSS und PHP ist das alles gar nicht so schwierig – vorausgesetzt, ich lese die Readmes mal aufmerksam und überfliege sie nicht nur.

Contact Form 7: Conditional Redirecting

Redirecting without a condition

When you use the WordPress plugin “Contact Form 7” you can redirect the user to another page after submitting the answers by the follwing code:

on_sent_ok: "location.replace('http://www.redirectedpage.com');"

The line of code you have to copy into the “settings” box at the end of a specific form you created.

Redirecting on a condition

If you want to make the redirecting depending on a specific answer, you can use the following code:

on_sent_ok: " if (document.getElementById('car').value=='yes') {location.replace('http://www.redirectedpage1.com')}
else { location.replace('http://www.redirectedpage2.com/') } "

The code in bold letters has to be changed by your settings.

For example: The question with the id “car” has two possible answers: “Yes” or “No”. If a person selects “Yes” he or she should be redirected to “http://www.redirectedpage1.com”. If “No” is selected, the user should be redirected to “http://www.redirectedpage2.com/”.

Alles neu! (Ein bisschen)

Schafott.net hat ein neues Design. Das alte mit den grünen Streifen oben hatte ich ja eine ganze Zeit lang. Ich schätze, etwa eineinhalb Jahre (falls es denn reicht). Kurz: Ich hatte mich stattgesehen. Vor allem fand ich mit 400px die Spalte für den Inhalt einfach zu schmal. Anfangs wollte ich das alte umändern, dann war mir aber das zu viel Arbeit und ich fand das “Fifty Fifth Street”-Theme. Daraufhin viel mir ein, als ich die Farbklekse auf dem Bürgersteig der 42nd-Street in New York machte und das passte einfach zu gut.

Es hat ja durchaus ähnlich mit dem Design von Spreeblick. Aber das ist mir egal, denn ich finde es einfach zu toll. Gerade, dass ich jetzt für den Inhalt mehr Platz habe und so Fotos und Videos viel größer einbinden kann. Daneben habe ich die Kategoriennamen leicht geändert. “Politik” allein kam mir einfach viel zu hochtrabend vor. Irgendwann habe ich mal eine Liste mit Ideen gemacht, doch ich kann sie nicht mehr finden.

Gefällt es euch? Passt es an irgendwelchen Ecken nicht?

Und so hat mein Blog in der Vergangenheit ausgesehen – ich tendiere eindeutig zu weiß:

1 2

5 6

Alles neu hier also. Zumindest ein bisschen; es ist wie eine neue Frisur, denn ab jetzt wieder Deutschland. Ich freu mich! (Größtenteils).