Optimering av sidan för mobila enheter. Använd sociala knappar

Facebook

Hej kära läsare av bloggsidan. Det är inte första gången jag nämner det i mina artiklar det finns en betydande tillväxt i runet mobiltrafik ... Och detta börjar påverka livet för webbansvariga och SEO:are ganska starkt.

För det första börjar många webbplatsägare fundera på sätt att tjäna pengar på mobiltrafik, vilket blir rikligt (även ett sådant monster erbjuder redan sina egna alternativ för att tjäna pengar på besökare som kommer till din webbplats från mobila enheter).

Men det viktigaste är att vi går "tvåa". Faktum är att en sida som inte är anpassad för att ta emot just den här mobila trafiken allvarligt kan tappa sin position i sökresultaten på grund av försämrade beteendeegenskaper. På mobiltelefon Det är mycket obekvämt att använda horisontell rullning när du läser text eller söker efter menyer, därför lämnar de snabbt sådana resurser och går som regel inte till andra sidor.

Naturligtvis visste jag allt detta ganska länge, men det fanns alltid något viktigare och viktigare, och det kompletta konceptet med att anpassa en webbplats för visning på mobila enheter bildades inte i mitt huvud. Men Google sporrade mig väldigt hårt i går morse genom att skicka ett meddelande som från 21 april vid fastställandet sök ranking webbplats, google kommer att ta hänsyn till om det är bekvämt att surfa på webben på mobila enheter.

Som de säger, de seglade. Jag var tvungen att ta mitt huvud i hand och på en halv dag för att utveckla och implementera konceptet att mobilisera sajten i livet. Naturligtvis påverkade brådskan och den ofullständiga förståelsen av alla alternativ för att lösa detta problem elegansen av lösningen på problemet, men "det som har vuxit har vuxit", och det kommer att vara möjligt att avsluta det längs vägen. huvuduppgiften klar -. Och läs hur det gick till i fortsättningen av denna publikation.

Relevansen av mobilwebbplatsoptimering och utmaningar

Så först kommer jag att beskriva den nuvarande situationen och sedan alternativen för att lösa den som jag har valt. Som nämnts ovan började jag fundera på att optimera sajtsidor för mobila enheter för länge sedan, men ibland för att ta ett steg framåt behöver man någon som ger en ordentlig spark i röven. En sådan kick visade sig vara ett brev från Google Adsense att det var dags att äntligen lösa detta problem.

Egentligen kom sådana brev från den här adressaten regelbundet (de gav vanligtvis exempel på hur bra det var för de sajter som var optimerade för mobiltrafik), men här fanns ett ultimatum:

17 procent av mobiltrafiken är, enligt min mening, ganska anständigt, men för att vara ärlig, utan att nämna en eventuell förändring i algoritmen Google ranking och med hänsyn till faktorn för att optimera webbplatsen för mobila enheter, skulle jag knappast flytta (det finns alltid en viktigare läxa, speciellt när du inte har en specifik plan för att lösa ett problem i ditt huvud).

Förresten, 17 procent av besökarna besöker sidan från mobila enheter, och det kan ses att avvisningsfrekvensen för sådana användare är mycket högre än för de som kom till sidan från en dator eller bärbar dator (dvs problemet är uppenbart ):

Länken i brevet ledde till Google-tjänst, där det var möjligt att utvärdera kvaliteten på mobiloptimeringen av din webbplats enligt principen: allt är bra, eller fullständig skräck. Inledningsvis fanns det för sajten en tråkig dom i rött (larm):

I skärmdumpen använde jag den respekterade Devakis blogg som illustration, för nu har jag en lite annan bild. I mitt fall förefaller det mig att till och med tre skäl har angetts som förhindrar visning av webbplatsen på mobiltelefoner, men den här tjänsten gör faktiskt bara en dom.

Men för att ta reda på detaljerna råder jag dig att använda en annan tjänst från samma Google som heter. Här kommer allt att vara mer eller mindre detaljerat och det är åtminstone klart "i vilken riktning man ska gräva":

De har fortfarande en liknande tjänst, men det ges bara en bedömning, men det finns tyvärr inga rekommendationer till förbättringar. Men du kan prenumerera på ändringar:

I vårt fall, var uppmärksam på betyget "Användarvänlighet" på fliken "För mobil". Det är klart att nedladdningshastigheten också är viktig, men personligen, för mig, vilade allt på serverinställningarna, som jag själv inte kan ändra (eftersom noob är i serveradministrationen), och jag kan fortfarande inte nå ett avtal med den tekniska supporten från Infobox (igen, uppenbarligen, vi behöver en spark i röven för att börja röra på oss). Men detta är förmodligen ett ämne för en separat artikel.

Uppgiften framför mig löstes på kvällen igår och sajten fick 95 och 100 möjliga poäng för bekvämlighet för mobilanvändare... Följaktligen säger Google-tjänsten, till vilken länken gavs i brevet, att allt är i sin ordning nu (tack vare laddning):

Skryt, nu kan du börja beskriva de steg som tagits och strategierna som beskrivs. Så det fanns flera problem som behövde lösas:

Siffrorna i pixlar anger brytpunkterna. Om du börjar minska detta fönster (med webbplatsen https: // webbplats öppen i den) i bredd (i det övre högra hörnet av webbläsaren finns en knapp med två överlagrade rutor - sa "kaptenen är uppenbar"), då det är när man passerar bredden på 1025px och 760px designändringar kommer att ske.

Först kommer sidofältet att falla av (det kommer att falla till botten) och toppmenyn kommer att ändras något (jag vill göra det rullgardinsmenyn för mobil i framtiden, men som vanligt har jag inte nått mina händer än) .

Och vid den andra brytpunkten kommer du att märka att när visningsportens bredd minskar ytterligare, börjar text, bilder och videor att anpassa sig till den nya storleken (anpassa sig till den), och sidofältet nedanför kommer också att genomgå förändringar. Egentligen ökade jag till och med teckensnittet för skärmar som är mindre än 760px breda (för säkerhets skull).

Det första alternativet, enligt min mening, har dock ett betydande nackdel... När sidan laddas laddas alla tre alternativen för stilfilen (inte bara det som kommer att användas för en given visningsportbredd). Eftersom de alla väger ungefär lika mycket, eftersom de innehåller nästan samma antal CSS-egenskaper, så är detta.

Därför bestämde jag mig för att använda det andra alternativet för att skapa en responsiv design för webbplatsen för att optimera den för mobila enheter. Det avslutas i. I det här fallet behöver du inte skapa tre kopior av stilfilen, men det räcker med att lägga till något så här längst ner i huvudfilen:

@mediaskärm och (maxbredd: 1025px) ( CSS-egenskaper som kommer att ändra designen när skärmbredden är mindre än 1025px) @mediaskärm och (maxbredd: 760px) (CSS-egenskaper som ändrar designen när skärmbredden är mindre än 760px)

Tja, i de områden som begränsas av lockiga hängslen räcker det att skriva de CSS-egenskaper som kommer att genomgå förändringar för att anpassa din webbplatsmall för mobila enheter.

Det är sant att jag fortfarande inte helt förstod nyanserna av att ansluta dessa direktiv med webbläsaren, eftersom de helt enkelt inte fungerade. Var tvungen lägg till i din header.php-fil sådana är raderna (inklusive samma stilfil, men med olika upplösningar skärm):

Det är i denna form som allt detta fungerar på den här bloggen det här ögonblicket tid.

I allmänhet valde jag det andra alternativet, men inte omedelbart, så jämför innehållet i filerna small-device-min.css och small-device.css med originalet style.css för att identifiera raderna där jag gjorde ändringar. Sedan satte jag in dessa avlopp lockiga hängslen visas ovan @mediadirektiv (i slutet av huvudformatmallen style.css). Men detta är inte längre meningen.

Vi anpassar mallen för mobilanvändares bekvämlighet

Så du laddade ner din webbplats från Internet, stoppade in den i en lokal server, bekantade dig med principerna som vi kommer att använda. Nu är det dags att börja experimentera. Av förklarliga skäl kan jag inte ge dig entydiga råd (eftersom alla mallar är olika, även för samma motor), vad exakt som behöver ändras i ditt fall och vilka brytpunkter du ska välja.

För enkelhetens skull kan du i allmänhet bara välja en punkt i ordet, till exempel lika med standardbredden på huvuddelen (central, där artiklarna visas), och innan dess ändras ingenting. Men mitt alternativ verkade vara att föredra för mig, även om jag inte hann tänka så mycket på det.

Vad användare kommer att se med skärmar som är mindre i bredd än den första brytpunkten

Se. Att implementera en design med flera kolumner v modern layout används . Till exempel flyter min sidofält till höger om huvudområdet tack vare:

#sidebar (flyta: höger;)

Så för att bryta layouten med två kolumner och göra den till en layout med en kolumn, måste jag byta ut värdet för flytregeln på rätt ställen. Jag petade verkligen på allt, eftersom jag hade glömt strukturen på min mall lite och därför kunde ha hakat på något som inte var obligatoriskt, men det här är specificiteten med att "sätta ihop en design på knäet" utan att ha den lämpliga erfarenheten. Men eftersom experimentet pågick lokal server, sedan efter en och en halv timme famlade jag allt rätt ögonblick(genom försök och misstag), vars resultat du nu kan observera.

Följaktligen, till att börja med, var det nödvändigt att inte vänja mallen för att skrivas in i två kolumner, vilket krävde att man skrev in i @media-direktivet (med första och andra brytpunkter):

#sidebar (flytande: ingen;) #sidebar (flytande: ingen! viktigt;)

Stannade ett problem med topp meny , som inte går sönder särskilt snyggt och tar upp mycket utrymme på en liten skärm, men det finns planer på att göra det nedrullningsbart för mobilversionen av sajten (om jag gör det kommer jag att avbryta prenumerationen om det). Ja, till och med mätarna längst ner i mitt hus byggdes (först nu var jag uppmärksam), men det är svårt att fixa det (det viktigaste är att inte glömma).

Så vi kommer att anta att du kommer att göra lite magi på en lokal server, experimentera och som ett resultat få en lättsmält version av att anpassa din webbplats för mobila enheter för besökare. Det återstår bara att överföra detta ärende till en arbetsplats. Naturligtvis kommer du inte att kopiera alla filer (och ännu mer databasen), eftersom det räcker med att lägga till (kopiera) några rader till header.php-filen och överföra lite fler rader till huvudstilsfilen (dessa) inom @mediadirektiven) ...

Efter det kommer det redan att vara möjligt att kontrollera de ändringar som gjorts (du kan behöva återställa cachen i motorn eller i webbläsaren) på datorskärmen när webbläsarfönstrets bredd minskar och på dina mobila prylar (telefon, surfplatta ). Om något "kommer ut" kommer det att vara möjligt att rätta till detta omgående.

Huvudsaken är att efter förändringar gjorda din hemsida klarade Google-testet för lämplighet för visning på mobila enheter (glöm inte att återställa cachen innan du gör detta). Tja, och avsluta detaljerna med tiden.

Använder koden för responsiva block från Google Adsense på webbplatsen med responsiv design

Låt oss nu prata om Google Adsense. Om du inte arbetar med detta system kontextuell reklam, då behöver du inte läsa vidare. Om du arbetar och använder koden för annonsenheter med fast storlek på webbplatsen måste du ändra den till koden för adaptiva enheter (Google insisterar på detta, som jag förstår det) så att annonser av lämplig storlek laddas på enheter med olika skärmbredder.

Faktum är att det inte alls är svårt att göra det här, men personligen hade jag en gag, som krävde en ansträngning av mitt sinne för att lösa det. Alltså, med en avundsvärd regelbundenhet (för att inte säga att det blir sämre, snarare bättre, men när man inte går in på länge fryser man lite). På grund av detta var jag redan tvungen att skriva om artikeln som citerades från länken ett par gånger, men den är föråldrad igen, vilket gör att dess fjärde inkarnation snart dyker upp (den tröttnar dock).

Okej, inte poängen. För att skapa en ny annonsenhet, klicka på kugghjulet till höger i Adsense-gränssnittet övre hörnet och välj alternativet "Anpassa". På sidan som öppnas behöver vi toppmenyn "Mina annonser", där man skapar ett nytt block, det räcker med att klicka på knappen med samma namn:

På sidan som öppnas kommer det adaptiva blocket att erbjudas dig som standard. Här bör du välja vilken typ av annonser som ska visas (i de flesta fall är det mer lönsamt att visa allt), och så specificera för detta block samma kundkanal vad du har tilldelats för det gamla blocket (som du kommer att ersätta). Faktum är att vissa annonsörer kan rikta sina annonser till din webbplats via just den här kundkanalen, och för att inte tappa bort dem måste du välja samma kanal för en ny annonsenhet.

Den här metoden fungerade inte för mig (någon sorts skräp visade sig), så jag klättrade i Google Adsenses hjälp att leta efter en lösning och hittade den på denna sida.

Det här är exakt versionen av koden jag använde (på olika enheter kommer att visa block av lämplig storlek). Det verkar som att allt visades som det skulle, men inte riktigt. Först märkte jag att efter att ha ändrat koden, slutade visningsstatistiken att ändras. annonser på hemsida Adsense. När jag tittade på statistiken för det nya blocket märkte jag att det praktiskt taget inte fanns några intryck.

För det andra bestämde jag mig för att göra annonstypen (färg, typsnitt) i det nya responsiva blocket likadant som de var i de gamla annonserna. Efter att ändringarna gjordes blev det ännu fler missförstånd. Annonserna som visas i artikeln har inte ändrat sin design. Började jämföra koden originalsidor(i webbläsaren kan du göra detta genom att välja lämplig post från menyn höger knapp mus) och upptäckte att en radbrytningstagg BR på något sätt lades till efter några rader kod.

Därför tog jag bort alla mellanslag och radbrytningar i problemområden där, varefter annonserna omedelbart ändrade design och statistik började räknas. Här är en sådan koppling är möjlig.

Innan dess hade jag en synkron Adsense-kod (jag installerade den redan 2012) och i teorin kunde den minska sajtens laddningshastighet. Modern kod allt asynkront, vilket helt tar bort möjligheten att det kan orsaka en fördröjning av sidladdningen. Jag tycker att det här är bra, men som de säger, vi ska ta en titt.

P.S. Här är en liten rapport om vad jag slutfört efter att ha skrivit artikeln.

Ktonanovenkogo.ru = "">

Lycka till! Vi ses snart på bloggsidans sidor

du kan titta på fler videor genom att gå till

");">

Du kanske är intresserad

Hur man gör en innehållsförteckning (innehåll, meny) för en artikel på sajten

I den här artikeln kommer vi att täcka:

Hur påverkar sajtens anpassningsförmåga rankningen i sökmotorn

Googles position

I november 2016 publicerade den officiella bloggen information om lanseringen av Mobile-first-indexet. Översättning av ett utdrag av uttalandet på den officiella Google-bloggen:

"För att göra våra resultat mer användbara startade vi ett experiment för att göra mobilindex mainstream. Medan vårt sökindex kommer att fortsätta att vara ett enhetligt index över webbplatser och applikationer, kommer våra algoritmer så småningom mestadels att använda mobilversion webbplatsinnehåll för att rangordna sidor från den webbplatsen, för att förstå strukturerad data och för att visa utdrag av dessa sidor i våra resultat."

Kortfattad– Tidigare, vid rankningen av webbplatsen, använde Google desktopversionen, nu kommer den att förlita sig främst på innehållet i mobilversionen. O exakt datum Googles representanter rapporterade inte lanseringen, det är känt att nu testas Mobile-first-indexet på ett begränsat urval. Vi rekommenderar dock att du kontrollerar sajtens beredskap för lansering nu.

Hur man förbereder en webbplats för mobilindexet

Om webbplatsen använder adaptiv design eller dynamisk innehållsplacering, se till att det visas korrekt på alla enheter, att sidor laddas snabbt och att bilder och andra dynamiska element är mobiloptimerade.

Om det finns en separat mobilwebbplats på en underdomän, se till att hela viktigt innehåll och metadata visas på samma sätt på dator och mobil. Det är också viktigt att se till att båda versionerna av webbplatsen använder samma semantiska uppmärkning. Läs mer om hur du förbereder din webbplats för Mobile-first index på Google Webmaster Central Blog.

Yandex position

I Yandex började man ta hänsyn till anpassning för mobila enheter i februari 2016 som en rankningsfaktor i mobila sökresultat.

Hur avgör Yandex om en sida är optimerad för mobila enheter?

Om dessa villkor är uppfyllda anses sidan vara mobilvänlig:

1. Ingen horisontell rullning. Horisontell rullning är det första symptomet på dålig mobilrespons. Allt innehåll på webbplatsen (text, bilder, knappar, menyer etc.) måste anpassas till skärmstorleken.

2. Det finns inga element som inte fungerar på populära mobila plattformar. Sådana element inkluderar till exempel flashfilmer som inte kan spelas på mobila webbläsare. Sådana videor uteslöts från Yandex.Video mobilsökresultat, eftersom användare inte kunde se dem ändå.

Hur man optimerar en webbplats för mobila enheter

Mobilversion av webbplatsen på en underdomän

En separat mobilversion av webbplatsen är fullt implementerad på en annan URL och kan till stor del optimeras för mobila enheter och navigering på dem.

Fördelar: du kan avsevärt förenkla designen av webbplatsen för mobila enheter, vilket kommer att ha en bra effekt på laddningshastigheten mobilsidor.

Brister: den största nackdelen är behovet av att utveckla en annan oberoende version av internetresursen, vilket kräver extra tid och pengar.

Dynamisk innehållssubstitution

Med denna anpassningsmetod analyserar servern vilken typ av enhet förfrågan kommer från och visar den för användare av mobila enheter och datorer olika versioner sidor under samma URL.

Fördelar: URL förblir oförändrad

Brister: komplex utveckling och höga underhållskostnader. Fel vid bestämning av typ av enhet: servern kanske inte känner igen användarens smartphone som en mobil enhet och kommer att öppna skrivbordsversionen.

Adaptiv design

En webbplats som visas korrekt på alla enheter. Vissa element kommer inte att visas på mobila enheter (och vice versa) eller kommer att visas i en mer kompakt form.

Fördelar: URL:en förblir densamma, relativt lätt att utveckla.

Brister: långsam laddningshastighet, och därför rekommenderas att förenkla funktionaliteten för att inte överbelasta den mobila enheten.

För mer information om hur man anpassar sig till mobila enheter, se artikeln "".

I februari 2018 lanserades Google PS nytt format Accelerated AMP Stories mobilsidor. Med dess hjälp kommer webbansvariga att kunna skapa publikationer som består av flera skärmar med bilder och videor.

Yandex analog - Turbo-sidor... Till skillnad från AMP, som kräver att du arbetar med webbplatsen när du skapar, byggs Turbo-sidor manuellt med en mallbaserad konstruktor. Här kan du ladda upp en bild, skapa ett ansökningsformulär med obligatoriska fält och lämna en länk för att gå till sidan.

Begränsning: ingen åtkomst till koden, eftersom alla sidor finns på systemets servrar.

All information om anslutningen finns tillgänglig i panelen hos J.Webmaster

Figur 7. Skärmdump av Ya.Vebmaster-data

Se till att texter och bilder är läsbara utan förstoring

All viktig text på sajten ska vara lätt att läsa. Vi rekommenderar att definiera minsta storlek vid 16 pixlar och se till radavstånd utföra sin funktion genom att separera en rad från en annan. Använd en mängd olika enheter för att kontrollera din typografi och göra ändringar om det behövs.

Gör en stor knapp

Gör det möjligt att bekvämt trycka på knappen både från en smartphone och från en surfplatta. Storleken på knappen bör vara lämplig för ett mänskligt finger.

Användaren ska enkelt kunna ringa från webbplatsen

Se till att en användare som besöker din webbplats på en mobil har möjlighet att ringa dig genom att klicka på ett telefonnummer.

Visa inte din telefon som en bild eller i fel format.

Produktbilder måste skalas

Användaren ska kunna skala produktbilden för att se detaljerna i hög förstoring.

Välj rätt visningsport

Viewporten talar om för webbläsaren vilken storlek viewport vi vill ha. Detta är mycket användbart eftersom, som regel, mobila webbläsare försöker passa hela webbplatsen på visningen av en mobil gadget. Om skärmstorleken är liten ser sidan så liten ut att det blir problematiskt att läsa något. Genom att kontrollera visningsportens korrekthet får du en garanti för att besökarna ser en adekvat version av sajten oavsett vilken enhet de använder för visning.

Ta bort popup-fönster

Stora popup-fönster, registreringsformulär etc. kommer i vägen när användaren vill få den information de vill ha

Slutsats

Andelen mobiltrafik växer ständigt. Om din webbplats inte är optimerad för mobila enheter tappar du redan mobiltrafik, och i framtiden kan du förlora stationär trafik på grund av detta.

Därför, om din webbplats ännu inte är mobilanpassad, är det dags att fixa det!

Du har säkert redan hört att optimering av mobilwebbplatser påverkar hastigheten och effektiviteten i marknadsföringen i mobilsegmentet och attraherar nya kunder, kunder och köpare.

Trafik av mobila enheter i Runet för 2017 enligt Digital Report är det 75 % och 2018. kommer att stiga till 79%.

Utan specialutbildning och mobilwebbplatsoptimering du förlorar hundratals och tusentals idag rikta in sig på besökare- kunder som kunna göra vinst.

Andelen mobilanvändare för olika marknadsnischer och segment varierar, men har en övergripande tillväxttrend.

Så här vet du om du behöver beställa mobiloptimering sida just nu?
Hur kontrollerar man självständigt de mobilvänliga egenskaperna och prestandan för ett webbprojekt?
Hur redo är din webbplats/butik för att ta emot mobiltrafik?

Mobilwebbplatsoptimering: 5 gratis tester

Spendera självkontroll din webbutik, försäljningssajt eller landningssida, att bestämma:

Behöver du mobiloptimering just nu?
Hur bekvämt är det för dina mobila klienter.
Vilka fel döljer din webbplats.

Mobilwebbplatsoptimering ingår i standardutbudet av våra tjänster.

Vi arbetar samtidigt med stationära och mobila (adaptiva) versioner för att maximera marknadsföringen av en webbplats eller en onlinebutik i TOP-10 och föra köpare till dig.

Graden av mobilwebbplatsoptimering visas i två parametrar:

Mobil Friendless (vänlighet, användbarhet - 96/100)
Mobilhastighet (hastighet - 53/100)

I exemplet ovan behöver den testade webbplatsen 100 % mobilhastighetsoptimering. Men med anpassningsförmåga (bekvämlighet) är allt bra. Skärmdumpen visar att projektet också behöver accelerera skrivbordsversionen (Desktop Speed - 66/100).

Om testet visar "röda" eller "gula" siffror i rapporten, korrigera omgående felen.

Mobilwebbplatsoptimering behövs om din webbresurs tar emot mer än 10 % av mobiltrafiken totalt. Kunder kommer från surfplattor och telefoner till din webbplats, men hur förberedd är du för dessa besök?

Du kan se den aktuella andelen mobiltrafik i Yandex.Metrica-statistik:

Rapporter -> Standardrapporter -> Teknik -> Enheter

I detta exempel på kvartalsrapporten kommer 64,9 % av den totala trafiken från datorer (dator personliga datorer), och de återstående 35,1 % är mobilövergångar:

smartphones - 31,6 %
tabletter - 3,5 %

Om mobiltrafiken är mer än 10 %, kommer mobilwebbplatsoptimering att öka försäljningen som ett resultat. Men fullständig frånvaro mobilbesök är ett problem...

Noll mobiltrafik tyder på allvarliga fel. Förmodligen ditt webbprojekt:

klarade inte mobiloptimering
förlorar mobila kunder och vinster
har låg konkurrenskraft i mobila sökresultat Yandex och Google

För att bedöma tillväxttrenderna för mobilbesök över tid och i framtiden måste du bygga om Yandex.Metrica-rapporten något.

På samma sida i rapporten väljer du perioden - "ÅR" och displayen - "Linjer" eller "Areas":

På bilden minskar webbtrafiken på PC:n, och övergångarna från smartphones ökar. Om du har liknande bild, beställ optimering och locka fler mobila besökare. Tjäna på mobilförsäljning redan nu, tills konkurrenterna har gjort det.

Tänk på att konkurrenterna är vakna!

Om konkurrenskraftiga sajter är bättre förberedda för mobilbesök, skräddarsydda för mobiltrafik, bekväma och snabba att använda, förlorar du kunder och pengar. Även 10 % av mobiltrafiken är ett betydande affärsvärde som inte kan försummas.

Mobilwebbplatsoptimering kommer att ge ytterligare potential och konkurrensfördel att erövra det mobila segmentet av marknaden i din tematiska nisch.

5. Granskning av mobilwebbplatsoptimering

Det enklaste sättet att kontrollera din webbresurs för mobilbesöksberedskap är att beställa en revision i vårt företag "OPTIMIZATOR". I det här fallet:

bli av med besväret med analys och analyser i utvecklingsstadiet
spara tid och pengar för ditt företag
få detaljerade rekommendationer om hur man kan förbättra försäljningssidan, vad man ska leta efter

Om 2 dagar kommer vi att djupt, omfattande och professionellt kontrollera alla parametrar för din försäljningskedja, inklusive mobilversionen och trafikstatistik. Vi kommer att sammanställa en detaljerad och steg-för-steg-rapport med en lista med tips från våra bästa webbutvecklare.

Vad består mobilwebbplatsoptimering av?

1. Arbeta med nyckelord

Från telefoner anger de ofta kort (tangentbord) eller mycket lång ( röstuppringning) fraser, och detta måste beaktas. Semantisk kärna anpassad för mobilversionen!

2. Design

Allt onödigt tas bort. Mobilwebbplatsoptimering begränsar eller anpassar visningsporten för att passa viktiga sidelement på små skärmar. Optimering är föremål för:

typsnitt och stilar
block och moduler
färger och bakgrunder
struktur och navigering
menyer och widgets
marginaler och stoppning

3. Acceleration

Fart mobilt internet mobiloperatörer lämnar mycket övrigt att önska. Om sidan saktar ner och laddas i mer än 2-3 sekunder kommer besökarna att gå till konkurrenterna. Därför är det viktigt att påskynda arbetet med resursen.

4. GEO-parametrar

Sökmotorer i mobil SERP för Android-plattformar och iOS tar hänsyn till GEO-platsen, visar användarna de närmaste erbjudandena per region. Mobilwebbplatsoptimering är omöjlig utan att ställa in GEO-parametrar.

Som ett minimum måste du lägga till projektet till populära GEO-tjänster, remisstjänster Yandex och lokala kartor typ 2GIS.

Brister kommer i vägen normalt arbete minska trafiken och inkomsterna. Ta bort fel - viktigt stadium webbplatsoptimering för mobila enheter och prylar.

6. Mobil användbarhet

Du måste bestämma hur bekvämt ditt affärsprojekt är när du öppnar från mobila enheter. Det finns bara två lösningar för att ta emot och betjäna mobila klienter:

- Adaptiv layout(designen anpassas automatiskt till olika skärmar prylar) eller...

- Speciellt version webbplats (mobilversionen skapas på en underdomän och skiljer sig allvarligt från huvudresursen i sin förenklade funktionalitet, specialmeny, design).

Kan du göra detta arbete på egen hand utan professionell hjälp? Hur länge kommer du att förlora mobila klienter och marknadsandelar? Varför fixar du inte situationen just nu och beställer mobilwebbplatsoptimering?

Det är trots allt inte särskilt dyrt, och alla kostnader kommer att betala sig inom de närmaste 2-3 månaderna. Tryck på knappen och gå - till hög försäljning!

God eftermiddag kära bloggläsare! Idag kommer jag att berätta om de svårigheter som många webbansvariga stöter på. Säkert många av er har stött på budskapet i Google SERP, som angav att webbplatssidan inte är optimerad för mobila enheter. Genom att klicka på länken kontrollerar du kompatibilitet med Mobil enheter och du får två visningsfel: innehållet är bredare än skärmen och interaktiva element placeras för snabbt. Idag kommer jag att berätta för dig hur du löser detta problem.

Google SERP inte optimerad sida

Optimering av en separat sida för kompatibilitet med mobila enheter

Problemet är att innehåll som är bredare än skärmen visas på många webbplatser. Det svåraste är att det här problemet dyker upp även om du har responsiv mall webbplats eller gjort en separat mobilversion. Det var genom att skapa en separat mobilversion som jag försökte lösa det här problemet, men allt visade sig vara mycket enklare. Lite om andra försök att lösa detta problem:

Jag har installerat plugin för bild- och mediakomprimering för olika enheter
skapat en separat mobilversion av sajten
ändrade cachinginställningarna för webbplatsen
komprimerade webbplatsens CSS och ändrade visningsinställningarna

Om du läser om lösningen på detta problem på Internet, kan du hitta många lösningar som inte kommer att ge verkligt resultat... För att lösa problemet räcker det att bara lösa en avvikelse. Inget behov av att redigera CSS-kod och PHP ändringar webbplatskod. Min sätt kommer att passa inte bara för en webbplats på wordpress, utan också för andra administratörsområden där inställningen för mediafilstorlek är öppen. Det verkar för mig att de flesta av felen beror på att Google rapporterar fel plats interaktiva element webbplats. Webbansvariga fokuserar just på att lösa det här problemet, men slösar mycket tid på det givet problem sekundärt - det följer just på grund av det bredare innehållet.

Innehåll som är bredare än skärmen är den främsta anledningen till att Google gör anspråk på en sida på en webbplats. Om webbplatsen är optimerad för mobila enheter visas anspråk specifikt för specifika sidor och inte för hela webbresursen. För att eliminera angett skäl, är det nödvändigt att kontrollera alla visade element på sidan. Som regel har Google klagomål på bilder som är bredare än 600 pixlar (tyvärr hittade jag inte de exakta parametrarna i Googles manual). Det första du behöver göra är att ändra storleken på dina mediefiler till 500px (vilket är storleken jag använder för mina webbplatser).

Meddela att ditt innehåll är bredare än skärmen

Den andra orsaken till problemet är innehåll som är bredare än skärmen - bredd grafiska elementöverstiger installerat av google dimensioner för mobila enheter. Dessa kan vara skjutreglage, en webbplatsrubrik eller bakgrundsbilder... Det var problemet med den breda rubriken (trots den responsiva designen) som var orsaken till att mobila enheter inte optimerades. Google parametrar på en av mina sajter. Efter att ha bytt ut headern blev sidan helt mobiloptimerad.

Hur du optimerar din webbplats för mobila enheter på Google

För att optimera webbplatsen för mobila enheter och eliminera problemet med brett innehåll är det nödvändigt att utföra åtgärder enligt följande algoritm:

Låt oss välja alla möjliga mediefiler på webbplatsen, med början från Head-taggen och slutar med Footer.
Låt oss skriva ner storlekarna på varje mediefil
Låt oss göra varje mediefil mindre än 600px

Efter att ha genomfört dessa enkla steg kan du kontrollera sidan i mobiloptimeringsverktyget. Som du kan se kan ändring av interaktiva element endast krävas i sällsynta fall. Jag hoppas att min artikel var användbar för dig och att du kunde lösa problemet med innehåll bredare än skärmen. Om du under beslutet har ytterligare problem, se till att skriva om dem i kommentarerna, vi kommer att försöka ta reda på det.

Dessa dagar, mer och mer fler människor föredrar att surfa på Internet med mobila enheter och surfplattor. Därför är det idag mycket viktigare för designers och utvecklare att tänka på hur deras webbplatser kommer att presenteras på dessa enheter.

1. Tagga meta viewport - sidbredd i mobil webbläsare

Metatagg meta viewportär en HTML-tagg som krävs för att definiera bredden på visningsporten och kontrollera sidskalningen. Med den här taggen kan vi ställa in sidans skala vid initial laddning, ange den högsta tillåtna förstoringen och även inaktivera förstoringen helt.

Nedan vill jag ge ett exempel på hur vanligtvis meta viewport-taggen läggs till inuti taggen.

@ -viewport (bredd: enhetsbredd;)

Meta viewport-taggen är en oumbärlig tagg (tillsammans med Mediafrågor) om du ska utveckla en responsiv webbplats. Däremot kan du tekniskt sett använda taggen i icke-responsiva design också.

2. Mediafrågor

Med Media Queries kan du ändra stilen på din webbplats med hjälp av specifika brytpunkter. När allt kommer omkring kommer inte alla komponenter på din traditionella webbplats att passa på liten skärm mobilenhet.

Med hjälp av Media Queries kan du lägga till specifika stilar för specifika skärmbredder. Vi kan också lägga till olika stilar baserat på enhetens orientering och dess bildpunktstäthet.

Du kan bädda in Media Queries antingen direkt i sidkoden med hjälp av länken:

1	"skärm och (orientering: porträtt) och (min-bredd: 960px), projektion" />

Eller använd nödvändig kod direkt i kaskadformatmallar (detta är den metod som oftast används av utvecklare).

3. Modernizr

Modernizr är ett javascript-verktyg för att upptäcka webbläsare/enhetsfunktioner. Webbläsare skiljer sig från varandra och erbjuder inget identiskt stöd för egenskaper. När du utvecklar en webbplats för mobila enheter kanske du vill dra nytta av de moderna och bekväma egenskaperna hos CSS3 och HTML5, som tyvärr inte stöds av alla webbläsare (idag använder inte alla senaste versionerna webbläsare).

Modernizr låter dig tillhandahålla användare föråldrade webbläsare en reserv i form av en webbplats som saknar olika moderna funktioner och funktioner.

4. Tryck på kontroll på webbplatsen.

TouchSwipe är ett jQuery-plugin som låter dig implementera stöd för pekkontroll på sajten (på mobila enheter eller surfplattor). Den stöder ett urval av deras mest populära gester som svep, nyp, zooma in och rulla.

Sedan idag vägrar nästan alla tillverkare av mobila enheter att göra det fysiska tangentbord och implementera beröringsstöd, bör du definitivt överväga att implementera beröringsstöd på din webbplats.

5.iOS-ikoner

Det första du ser när du låser upp din iPhone (eller iPad) är ikonerna. Förutom appikoner visar iOS även webbplatsikoner som har lagts till på hemskärmen.

För att skapa en sådan ikon för din webbplats också, lägg helt enkelt till följande länk till rubriken i din webbplatskod:

1 2 3

"touch-icon-iphone-retina.png" rel = "apple-touch-icon" storlekar = "114x114" />

Å andra sidan kan du helt enkelt ta bort dessa länkar, se bara till att ikonerna sparas i rotkatalogen och ha prefixet apple-touch-icon- * i namnet.

6. Startskärm

Startskärmen är den första bilden som visas när applikationen startas. Den här skärmen informerar användare om den aktuella nedladdningen av programmet. Det är ofta en bra idé att använda stänkskärmar som även annonserar ditt varumärke.

För att lägga till en startskärm som denna på din webbplats, klistra bara in följande rader i huvudet.

När en användare besöker din webbplats från hemskärmen kommer bilden som anges i denna länk snabbt att visas på enhetens skärm.

Trots det faktum att användningen av en stänkskärm i högkvalitativ reklam är något av ett brott mot reglerna, om du använder en vacker stänkskärm som kommer att visas i bara ett par sekunder, kommer det att skapa ännu mer bra erfarenhet interaktioner.

7. Windows 8-ikoner

Windows 8 och RT erbjuder också möjligheten att lägga till blockikoner på hemskärmen. I Windows 8 kallas dessa block för Pin Icon.

Till skillnad från iOS, som använder ett länkelement, använder Windows 8 en metatagg. Låt oss ta en titt på ett exempel.

Den första metataggen definierar färgen på cellen, den andra är ansvarig för bilden av ikonen. Det finns en sida som heter Build My Pinned Site som låter dig enkelt generera metataggar som denna.

Sammanfattningsvis

Den mobila revolutionen har förändrat hur vi webbutvecklare bygger webbplatser. Och nu bör du överväga åtminstone de komponenter som vi pratade om idag. Naturligtvis, om du vill att dina webbplatser ska se bra ut på enheter som kör iOS och Windows 8.