Responsive website

Les 7: Op bezoek bij Google en Responsive Design

LES 7 & 8

We behandelen de laatste 2 lessen het volgende:

  1. Mobiel (Responsive)
  2. Google Analytics,
  3. Zoekmachine optimalisatie, (SEO)
  4. Veiligheid,
  5. Social Media.

We beginnen met Responsive

 


1. Mobiel

Werkt jouw website ook als Mobile (Tablet & Smartphone)
Google wil ook dat ook! En test gratis jouw website voor Mobile-vriendelijkhttps://search.google.com/test/mobile-friendly

Let op:

  • verschalen van layout ( Responsive -> uitleghttp://www.lichting98.nl/Responsive )
  • wat doen de knoppen (3 streepjes is een “hamburger”)
  • leesbaarheid van tekst (deze kan kleiner worden)
  • hebben mouse-over effecten 2 x klikken nodig
    (gaat fout bij auto’s van http://188.226.241.135/autorent/  )
  • is een Uitgelichte Afbeelding (featured image) van een bericht aanklikbaar
  • wordt ook video kleiner? (in verhouding)
  • onderverdeling in een menu (de sub-menu’s) werkt dat nog steeds?
  • keuze menu in een dropdown, werkt dat netjes of is dat nu een rolmenu met ‘akkoord’ knop?
  • Hoe eindig ik onderdaan een webpagina?
    Is er een terug naar ’top’ knop (Zie: http://www.jybarchitecten.nl )
  • lange titels
  • Te hoog: Google Maps (kun je nog scrollen)
  • vergrotingen van een afbeelding, hoe werklt dat?

Heb je een online-demo van een WordPress theme?
Bekijk deze dan ook op je Tablet & Smartphone!

2. Google Analytics  = teller van website bezoekers  (meten = weten)

Start met Google Analytics (Website teller)
Inloggen hier:  http://www.google.com/analytics/

login: *********
pass: *******

Nieuw account nodig bij Google?
(hoeft geen Gmail te zijn)
https://accounts.google.com/SignUp?continue=https%3A%2F%2Faccounts.google.com%2FManageAccount

Daar kun je een nieuw Property voor een nieuwe website aanmaken en een Google code + Google Id krijgen.
Voorbeeld v/d tracking Id = UA-2738689 – 68

 

[Update 2021]

Nieuwe versie van Google Analytics met als naam Google Analytics 4
Daar is de tracking code iets dieper verstop in de interface onder Admin.
Ga naar Gegevensstreams -> (dan 4e tab) Internet -> Pijltje naar rechts achter het www-adres
Het zit onder: Algemene sitetag (gtag)

 

 

 

Inloggen

Google Analytics Start

 

Nieuw account aanmaken (website aanmelden).
Alle gegevens netjes invullen, en opslaan.

Google Analytics

 

Je kunt tot 50 websites aanmelden, na de 1e website is het even zoeken naar de “Create new property” knop>
Zie hieronder:

Nieuwe website

 

 

Voorbeeld van de Tracking code:
————–
<script>
(function(i,s,o,g,r,a,m){i[‘GoogleAnalyticsObject’]=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,’script’,’//www.google-analytics.com/analytics.js’,’ga’);
ga(‘create’, ‘UA-2738689-1’, ‘auto’);
ga(‘send’, ‘pageview’);
</script>
————–

(Dit moet op elke webpagina en bericht komen van jouw website.)
Dit kun je het beste doen meteen als je aan de website begint. Gelukkig zijn er plugins die dit kunnen regelen.

Update 2021
Google AnalyticsAan de slag met Google Analytics

(Gebruik bij de nieuwe Google Analytics 4)
Er zijn 3 manieren om een website te volgen
1. Universal Analytics / analytics.js
2. Global Site Tag / gtag.js
3. Legacy / ga.js
Wij maken gebruik van de 2e methode, dus via de functie: Global Site Tag / gtag.js van de plugin GA Google Analytics
Website: www.perishablepress.com/google-analytics-plugin/
Extra hulp: https://support.google.com/analytics/answer/9306384

 

 

Tot 2021
Zie bijvoorbeeld “Super Simple Google Analytics” hieronder, maar uiteraard zijn er nog veel meer van dit soort plugins.
Sommige uitgebreide thema’s hebben zelf een invul-veld voor de Google Analytics (netjes!)

Let op!
Sommige thema’s willen de complete Tracking code hebben, en weer andere thema’s hebben aan het UA-NUMMER (Tracking Id.) genoeg.

 

Plugin voor Analytics code = Super Simple Google Analytics
This is a bare bones option for people who are looking to simply insert the basic Google Analytics tracking code into the head section of every page without any fuss.
Website: http://shinraholdings.com/plugins/super-simple-google-analytics/
Let op! Het kan 1 tot 24 uur duren voordat Google door heeft dat er data binnenkomt bij de Analytics, dus even geduld…

 

(Tracking ID van Lichting98 = UA-2738689-1)

 

 

Google analytics rapportage

Mooi voorbeeld van informatie die je kunt opzoeken is de gebruikte schermresoluties van de bezoeker.
Zie hieronder:

 

Maar er is heel veel info te bekijken bij Google Analytics:

Google Analytics gegevens

 

De Google Analytics op het Dashboard van WordPress? -> Plugin: Google Analytics (door Yoast)
Deze plugin maakt het makkelijker om Google Analytics toe te voegen aan de WordPress site, waarbij vele mogelijkheden toegevoegd worden, zoals een foutpagina, zoekresultaten en automatische uitgaande links en download tracking.
Website: https://wordpress.org/plugins/google-analytics-for-wordpress/
Niet verwarren met de plugin van Yoast hieronder:

—–

3a. SEO (Search Engine Optimalisation) 

Plugin voor SEO (Yoast SEO)
Improve your WordPress SEO: Write better content and have a fully optimized WordPress site using Yoast SEO plugin.

Uitleg: https://yoast.nl/artikelen/wordpress-seo/
De plugin: https://nl.wordpress.org/plugins/wordpress-seo/
Netjes alles invullen.

Yoast SEO Uitleg video’s:  https://www.youtube.com/playlist?list=PL4CtPfBUilirZovJVGPHoMH-JOMWSpWoa

Zie ook SEO handleiding voor beginners: www.yoast.com/beginners-guide-yoast-seo

Maar bedenk zelf: met welke zoektermen wil ik gevonden worden!
En Google wil zelf ook een nette website met duidelijke informatie.
Let op! Van alles telt een klein beetje mee, met de formule om de juiste resultaten aan een zoek-opdracht te genereren. Ook H1, titels, categorien, tags, enz.

Google is van mening dat jij pas een ‘expert’ bent over een onderwerp als je minimaal 300 woorden erover kan schrijven op een webpagina en/of bericht. Dus maak de content van jouw website niet té kort & krachtig.

Was vroeger het aantal links belangrijk, nu is veel meer het gedrag van bezoekers belangrijk.
Maar maak een website nog steeds voor mensen & niet voor zoekmachines

 


3b. Sitemap uploaden naar Google 

Sitemap = een (XML) bestand waar de structuur van jouw website in staat zodat Google in 1 keer op de hoogte is van alle onderdelen (pagina’s en berichten) van jouw website. Dit kun je het beste doen nadat de website helemaal klaar is. Maar je kunt een sitemap altijd later updaten, vergeet niet Google daarvan op de hoogte te brengen m.b.v. Google Search Console

Google Search ConsoleGoogle Search Console
(was webmaster tools) = https://www.google.com/webmasters/tools/home

Wat is Google Search Console uitleg: support.google.com/webmasters/answer/4559176?hl=nl

Sitemap laten maken = http://www.web-site-map.com/
(Dit kan nu door Yoast SEO plugin, wel even de advanced settings inschakelen).
Webmaster tools van Google = https://www.google.com/intl/nl/webmasters/#?modal_active=none

3c. Verder:
Website doorgeven aan Google = http://www.google.com/addurl/?continue=/addurl
Aanmelden bij Google Maps = o.a. https://www.google.com/business/befound.html
Neem een YouTube Kanaal = https://support.google.com/youtube/answer/1646861?hl=nl
Tijd over? Aanmelden bij Google+

 

Betalen kan ook: Google Adwords Zie: https://adwords.google.com/
Info: https://support.google.com/adwords/answer/1704410?hl=nl

 

Gebruik zo veel mogelijk de producten van Google (als je voorstander bent van dit bedrijf).

Google products

 

UpdraftPlus4. Veiligheid op het internet?

Let op met wachtwoorden
+ Gebruik een plugin voor een backup.
Het liefst via de webserver zelf, en anders via deze plugin:
www.updraftplus.com

 

Les 8. Social Media

verder met Social Media en het embeden (koppelen) daarvan met je WordPress Website.
Twitter
Facebook
Linkedin
Pinterest
Youtube (Vimeo)
Instagram
Snapchat

Voorbeelden:
www.koningkikker.nl

www.decultuurschool.nl/

www.topceremonie.nl

En zo kan ook (zie nieuws): www.tomdavid.nl


EXTRA – VRAAG: WordPress verhuizen: Via Plugin: WP Clone by WP Academy

WP Clone is a fast, light-weight plugin that allows you to move or clone a WordPress website from one host to another, or from one domain to another. You can use it to change a site’s host or domain name, move a site up or down a directory level, or to copy to and from development versions of your sites (including sites running under local server hosting).
website http://www.wpacademy.com/software/

Voorbeeld clone file = http://www.tandartspraktijkbeerepoot.nl/wp-content/uploads/wp-clone/wpclone_backup_25th_Nov_2015_11-45PM_Tan_5ogJNd4HtB.zip ( 42.24 MB )

Kan ook via Plugin: All-in-One WP Migration
This plugin exports your WordPress website including the database, media files, plugins and themes with no technical knowledge required. Upload your site to a different location with a drag and drop in to WordPress. (tot 512 MB. gratis)
website: https://wordpress.org/plugins/all-in-one-wp-migration/

 

Voorbeelden van een kloon van website-1 naar website-2 zijn:
http://www.tandartspraktijkbeerepoot.nl/
&
http://www.tandartspraktijkzeeland.nl/

http://www.caribbeanreflections.nl/nl/
&
http://www.latinamericareflections.nl/nl/


EXTRA:
Recaptcha voor Contact formulier (contact 7)
http://contactform7.com/recaptcha/
Administratie van Google: https://www.google.com/recaptcha/admin#list


« Terug naar het overzicht