Share
WordPress is een softwarepakket dat maar liefst 25% van de websites van het web aanstuurt. Grote websites zoals The New York Times, CNN en Forbes gebruiken allemaal WordPress om hun websites van stroom te voorzien.
Wat WordPress voor webontwikkelaars is, is Adobe Lightroom voor fotografen. In deze tutorial leer je hoe je deze twee krachtige tools samen kunt gebruiken. U leert snel en eenvoudig hoe u uw afbeeldingen vanuit Lightroom naar een door WordPress gestuurde site kunt brengen. Het belangrijkste is dat we het doen op een manier die SEO-vriendelijk is, zodat uw afbeeldingen worden ontdekt.
Zoekmachineoptimalisatie (ook bekend als SEO) is een verzameling onderling gerelateerde ontwerp-, publicatie- en gegevensbeheerpraktijken waarmee webpagina's kunnen worden gevonden. De waarheid is dat er geen echte magie is in SEO als het gaat om afbeeldingen. Het komt allemaal neer op het toevoegen van context aan uw foto's op een manier die logisch is voor computers.
Zie het op deze manier: u voert een zoekopdracht in in de zoekmachine van uw keuze. De zoekmachine toont u een lijst met pagina's die overeenkomen met wat het is denkt je zoekt. Zoekmachines gebruiken crawlers - computerprogramma's en algonrhitmen - die het web automatisch verkennen en lijsten samenstellen van sites die overeenkomen met zoekwoorden.
Een zoekmachine kan zien dat afbeeldingen op een webpagina staan, maar kan niet gemakkelijk bepalen wat een afbeelding weergeeft, dus we moeten deze aanvullen met aanvullende gegevens, een soort die kan begrijpen. Dit soort gegevens wordt semantische informatie genoemd: het is informatie die bijdraagt aan het bouwen van betekenis voor individuele foto's in context aan elkaar en de rest van de webpagina. We gebruiken metadata-velden om deze sematische gegevens te verzenden.
Google kijkt naar enkele van de labels verborgen in onze HTML om afbeeldingen te vinden. We kunnen dingen toevoegen zoals titels, labels, en alt tekst in de code van onze website om een zoekmachine te helpen onze site zo eenvoudig mogelijk te indexeren. Er is geen garantie dat door sematische informatie toe te voegen u uw site naar de eerste pagina met Google-resultaten kunt verplaatsen, maar het nemen van enkele eenvoudige SEO-stappen kan uw kansen zeker helpen. Het is ook gewoon goede datahygiëne!
Hier zijn vier belangrijke stukjes SEO-optimalisatie-informatie die u aan uw afbeeldingen kunt toevoegen:
Als je niets anders doet, zorg er dan voor dat je je foto's hernoemt op een manier die ze beschrijft. Een eenvoudige bestandsnaam als "resizing-images-tutorial.jpg" is een enorme verbetering ten opzichte van "IMG_9052.cr2." Door een bestandsnaam te gebruiken met een paar woorden die dit beschrijven, wordt de kans groter dat deze wordt gevonden.
Bij het exporteren vanuit Lightroom is mijn favoriete manier om dit te doen "Bestandsnaamgeving" gedeelte van het exportvenster. Houd er rekening mee dat we de geëxporteerde afbeelding en niet het oorspronkelijke bestand willen hernoemen. Vind de Bestandsnaamgeving sectie en controleer de Hernoemen naar doos. Kies vervolgens een dropdown-optie die bevat "aangepaste naam" zodat we onze eigen aangepaste tekst kunnen toevoegen.
De laatste stap is om de aangepaste tekst toe te voegen. Voor het web is het het beste om de woorden in een bestandsnaam te scheiden met streepjes in plaats van spaties. Pas de bestandsnaam van elke afbeelding aan voor de beste resultaten.
Gebruik een aangepaste naamoptie om uw bestandsnamen een grotere kans te geven om gevonden te worden. Een paar woorden die de inhoud van een afbeelding beschrijven gaan ver!Alternatieve tekst of "alt-tekst" wordt gebruikt om een tekstbeschrijving van de inhoud van een afbeelding te geven. Vergeet niet dat een zoekmachine (nog) niet kan bepalen wat er in een afbeelding staat, dus we moeten het helpen door alt-tekst te gebruiken.
U zult waarschijnlijk alt-tekst nooit zien; het belangrijkste is dat een zoekmachine dat wel zal doen.
De alt-tekst van een afbeelding moet ook in HTML worden ingesteld. De alt-tekst zou de afbeelding kort moeten beschrijven. We kunnen deze alternatieve tekst instellen in de WordPress Mediabibliotheek en WordPress zal deze automatisch toevoegen.Alt-tekst wordt in hetzelfde bit van HTML geplaatst dat uw afbeeldingen bevat. Gebruik het om een beschrijving van de afbeelding toe te voegen. Een korte beschrijving van de inhoud van een afbeelding is van cruciaal belang voor SEO-vriendelijkheid. Als het schrijven van code niet je ding is, geen zorgen; we zullen kijken hoe deze alt-tekst met behulp van WordPress in het volgende gedeelte van deze handleiding wordt toegevoegd.
Het hebben van alternatieve tekst voor uw afbeeldingen is ook cruciaal voor slechtzienden. Schermleessoftware ontworpen om diegenen te helpen die volledig of gedeeltelijk verlies van gezichtsvermogen hebben, leest de alt-tekst in plaats van een afbeelding. Amherst College heeft een geweldige gids voor het optimaliseren van uw webpagina's voor toegankelijkheid.
De titel van een afbeelding moet ook in de HTML-tag staan. De titel moet een nog kortere versie van de beschrijving zijn, met slechts een paar woorden die de inhoud van een afbeelding aangeven.
U moet ook een afbeeldingstitel in HTML instellen met de tag "title =" in hetzelfde afbeeldingsblok. Nogmaals, WordPress maakt dit eenvoudig toe te voegen.Titels zijn een ander stukje van de puzzel om zoekmachines te helpen onze site te indexeren. WordPress bevat een titelveld dat onze SEO-inspanningen zal helpen.
Beschouw een bijschrift als de tekst die onmiddellijk na een afbeelding wordt weergegeven die meer commentaar levert. Onderschriften worden niet rechtstreeks rechtstreeks aan een afbeeldingstag toegevoegd, maar voegen deze zeker toe. In HTML5, de
Nu we de pijlers van beeld-SEO begrijpen, laten we kijken hoe we ze gemakkelijk en snel kunnen toevoegen aan onze WordPress-gestuurde site. We kunnen doorzetten een afbeelding titel en onderschrift van onze Lightroom-catalogus tot WordPress.
In de Lightroom Bibliotheek module, zoek de metadata paneel aan de rechterkant. U kunt de titel en het bijschrift van de afbeelding zien.
Wanneer u een afbeelding uit Lightroom exporteert, zorgt u ervoor dat u "alle metadata."Dit zorgt ervoor dat de titel en bijschrift worden opgeslagen in de JPEG-afbeelding en worden gelezen en opgenomen door WordPress.
Zorg ervoor dat u bij het exporteren van een afbeelding metagegevens in het bestand opneemt. Dit maakt die metadata beschikbaar in WordPress.Nadat u een netjes afbeeldingsbestand met een titel en bijschriftenset heeft geëxporteerd, kunt u het uploaden naar WordPress. Ga naar de WordPress Mediatheek en upload deze afbeelding zoals je normaal zou doen. De geüploade afbeelding voert dezelfde titel en bijschrift uit die we hebben ingesteld in het metagegevenspaneel van Lightroom!
Eindelijk, de vruchten van onze arbeid! De titel en het bijschrift dat wijU moet alt-tekst handmatig aan afbeeldingen toevoegen zodra ze WordPress bereiken. Helaas is er geen veld in Lightroom dat verwijst naar "alternatieve tekst" in WordPress. Houd er rekening mee dat dit de tekst is die in de HTML-code is verborgen, zodat zoekmachines onze afbeeldingen kunnen vinden en indexeren.
Alt-tekst moet worden toegevoegd aan afbeeldingen in de WordPress Mediabibliotheek.Nadat u de alt-tekst hebt ingesteld, drukt u op Bijwerken om de afbeelding op te slaan. Wanneer u het invoegt in een bericht of pagina, voert WordPress de metagegevens door en neemt de metadata op die we in de HTML-code hebben toegevoegd.
Deze stappen zijn een belangrijk hulpmiddel bij het optimaliseren van een afbeelding voor internet. We kunnen ook een stap verder gaan door afbeeldingen voor het web te verkleinen en te comprimeren.
Het klaarzetten van foto's voor het web gaat over meer dan alleen laden met zoekwoorden en deze in WordPress laten vallen. We moeten ook nadenken over de bestandsgrootte en afmetingen. Vergeet niet dat een groot deel van de internetgerelateerde bevolking niet het geluk heeft om een goede breedbandverbinding te hebben, en we moeten ook hun ervaring overwegen.
mobiForge schreef onlangs dat de gemiddelde bestandsgrootte van de webpagina groter is dan die van het klassieke spel Doom uit 1993. Dit is niet inherent slecht, maar het is een goede herinnering dat webpagina's meer vol staan met multimedia en grote afbeeldingen dan ooit tevoren. Het dient als een goede herinnering dat we altijd de bestandsgrootte van uw afbeeldingen moeten optimaliseren.
Wanneer we klaar zijn om afbeeldingen naar het web te verzenden, zijn er twee belangrijke factoren om te optimaliseren voor: dimensies en kwaliteit. Laten we kijken naar hoe beide te perfectioneren.
De afmetingen van een digitale afbeelding zijn de lengte en breedte van het beeld, gemeten in pixels. Van een afbeelding waarvan wordt gezegd dat het "600 bij 400 pixels" is, wordt geconcludeerd dat het 600 pixels breed is en 400 pixels hoog.
Afbeeldingen die ik met mijn Canon 6D heb gemaakt, zijn 5472 x 3648 pixels. Tegen de tijd dat je ze op Tuts + ziet, zijn ze beperkt in de lay-out tot 850 pixels aan de lange kant. Theoretisch zou ik het volledige beeld kunnen uploaden, maar het maakt niet uit wat het zal worden op een maximum van 850 pixels.
Dit effect is precies waarom ik het formaat van mijn afbeeldingen altijd aanpas in een webvriendelijk formaat. Mijn kijkers hebben geen monitoren die elke afzonderlijke pixel weergeven, dus het is alleen maar logisch om het formaat van de afbeelding aan te passen en ze de laadtijd te besparen.
Deze simulatie illustreert hoe groot een origineel beeld van 10 megapixels is in vergelijking met hoe het op het web zal verschijnen. Het grote voorbeeld van de afbeelding dat u ziet, is een geschaalde versie van de volledige afbeelding van 10 megapixels die ik heb gemaakt. In de inzet is de grootte vergeleken met hoe deze op Tuts + wordt weergegeven. Een 10-megapixel afbeelding op volledige breedte is meer dan 4000 pixels breed, terwijl het verschijnt in Tuts + -artikelen met slechts 850 pixels aan de lange zijde. Dit is een geweldige illustratie van waarom het wijzigen van de grootte zo belangrijk is.Wat is de juiste afmetingen voor een afbeelding op internet? Het antwoord is: "het hangt ervan af waar het naartoe gaat." Als u WordPress gebruikt, raadpleegt u de documentatie bij uw thema voor de ondersteunde beeldbreedten. De ontwikkelaar bepaalt hoe afbeeldingen in een WordPress-thema worden weergegeven. Als er geen documentatie beschikbaar is, probeer dan een site zoals PiliApp om uw eigen metingen te doen op een afbeelding op de site die u gaat publiceren..
Afbeeldingen van hoge kwaliteit gebruiken meer schijfruimte. Hoe gedetailleerder en kleurrijk een afbeelding is, hoe groter het bestand zal zijn. Hoewel ons beeldarchief deze beelden van volledige kwaliteit zou moeten omvatten, betekent het voorbereiden van een afbeelding voor het web een compromis tussen kwaliteit en bestandsgrootte. Het opgeven van een beetje kwaliteit leidt tot een veel snellere laadtijd voor de kijker.
Wanneer u exporteert in Lightroom, kunt u de Kwaliteit schuifregelaar om de uitvoerkwaliteit van een afbeelding aan te passen. Het is een schaal van 0-100, met een beeldkwaliteit van 0 met de kleinste bestandsgrootte. Een afbeelding van 100 kwaliteit maximaliseert zowel de kwaliteit als de bestandsgrootte.
Deze vergelijking van de beeldkwaliteit toont een subtiel verschil tussen de verschillende kwaliteitsinstellingen. Sommige verschillen kunnen worden waargenomen in de fijnere details, evenals de kleuren in de lucht. Merk op dat in de afbeelding met de laagste kwaliteit er enige "banding" in de lucht is (subtiele lijnen) terwijl de beelden van hogere kwaliteit zijn. De 25 kwaliteitsafbeelding gaf me een beeld van 91 kb, terwijl een beeld van 100 kwaliteit een 366 kb afbeelding was. Het gaat allemaal om het vinden van de balans tussen kwaliteit en bestandsgrootte.Een van mijn favoriete manieren om de bestandsgrootte te beheren, is door de "Beperk bestandsgrootte tot" keuze. Ik gebruik deze optie regelmatig wanneer ik afbeeldingen exporteer om te publiceren op Tuts +, aangezien Tuts + een limiet van 150 kilobytes heeft voor afbeeldingen in artikelen.
Met de optie "Beperk bestandsgrootte tot" wordt de schuifregelaar voor kwaliteit helemaal omzeild. In plaats van een kwaliteit tussen 0 en 100 te kiezen, kunt u eenvoudig een maximale bestandsgrootte instellen (in kilobytes) en Lightroom een kwaliteitsinstelling voor u kiezen.
Het vak "Limiet bestandsgrootte tot" kan worden gebruikt in plaats van de schuifregelaar voor kwaliteit. Wanneer u het selectievakje in het exportvenster aanvinkt, kiest u de maximale bestandsgrootte voor uw afbeelding en Lightroom zorgt ervoor dat deze werkt.Uit mijn ervaring, wanneer ik de kwaliteitsschuifregelaar voor webafbeeldingen gebruik, laat ik de kwaliteitsinstelling meestal in de 60-75 range. Dit lijkt de goede plek te zijn voor de bestandsgrootte en de beeldkwaliteit. Het vergroten van de schuifregelaar ver voorbij dat levert een veel groter bestand op zonder veel visueel verschil.
Als u meer wilt weten over de toetsen voor het wijzigen van het formaat van afbeeldingen voor internet, bekijk dan mijn artikel van vorig jaar, JPG's voor het web exporteren vanuit Adobe Photoshop Lightroom. Hoewel de focus van deze tutorial de metadata voor SEO is, is de afbeeldingsgrootte nog steeds een essentieel onderdeel van het zoekvriendelijk zijn.
In deze zelfstudie hebben we besproken hoe u het laaghangende fruit kunt kiezen voor het exporteren van afbeeldingen vanuit Lightroom naar een WordPress-website. Vergis je niet; dit zal uw site niet meteen naar de top van Google schieten voor veel voorkomende termen, maar wel zullen ga een lange weg om iemand te helpen je afbeeldingen te vinden.
Het is vermeldenswaard dat er verschillende WordPress-plug-ins of add-on's zijn die dit proces kunnen automatiseren. Plug-ins die niet vaak worden bijgewerkt, kunnen uw site echter openen voor beveiligingsproblemen. Je moet ook rekenen op een ontwikkelaar die de compatibiliteit van de plug-in met nieuwe versies van WordPress handhaaft. Twee populaire plug-ins zijn WP / LR Sync en LR / Blog.
Als u meer wilt weten over WordPress, bevat de sectie Tuts + code een schat aan inhoud voor het aanpassen en uitbreiden van WordPress. Het gedeelte over foto's en video bevat ook een uitgebreide beschrijving van Adobe Lightroom als u die vaardigheden wilt verbeteren.
Ten slotte is SEO een steeds veranderend onderzoeksgebied. Google werkt voortdurend het algoritme bij dat wordt gebruikt om de pagina's te vinden waarvan zij denken dat deze het beste overeenkomen met de zoekopdracht. Er is een hoop slecht advies en "tips" voor SEO die er zijn. Mijn go-to-source voor SEO is de Moz Blog. De genieën van Smashing Magazine hebben ook een geweldige beschrijving van het bouwen van een voor SEO geoptimaliseerde website.
Wat doe je om je foto's klaar te maken voor het web? Laat het me weten in de comments sectie.
Accentsconagua