Disenyo at Layout

Ang disenyo at layout ng iyong site ang nagtatakda kung paano ito makikita sa mga end user. Mahalaga ito dahil ang Google ay pangunahing pinapatakbo ng pilosopiyang "user-first". Ang mga web page na unang tumutugon sa pangangailangan ng user, pinakamabilis, at sa pinakasimpleng paraan ay ginagantimpalaan ng mas mataas na ranggo sa SERP.

Ang disenyo at layout ng iyong site ay tumutukoy din kung gaano kadali itong i-crawl at i-index ng mga web crawler, tulad ng Google bot. Ang isang simple at na-optimize na disenyo at layout ay nangangahulugan ng mabilis at madaling pag-crawl, na siya namang isinasalin sa mas mahusay na ranggo.

2.1.2 Mga Hamong Kinakaharap ng mga Tagapaglathala sa Disenyo at Layout

Kaya ano ang pumipigil sa mga publisher na ipatupad ang mga pinakamahusay na kasanayan sa disenyo at layout? Kadalasan, ang mga publisher ay nahaharap sa mga puntong ito ng paghihirap:

• Kalabuan sa kung anong mga resulta ang maaaring maisakatuparan
• Kawalan ng katiyakan sa mga kinakailangan sa hanay ng kasanayan
• Kalabuan tungkol sa mga kinakailangan sa mapagkukunan

2.1.3 Mahalaga ba ang Disenyo at Layout para sa SEO?

Para masagot ang tanong na ito, nagsagawa kami ng simpleng paghahanap sa Google kung saan inilagay namin ang mga keyword na “Charlie Puth News” sa search bar.

Narito ang lumabas na resulta ng paghahanap:

Nasa ikalawang pwesto sa Top Stories SERP ranking, sa itaas mismo ng isang kuwento mula sa NME, ay ang artikulo ng Daily Illini tungkol sa pinakabagong inilabas ni Charlie Puth.

Ang katotohanan na ang Daily Illini, isang pahayagan ng mga estudyante sa unibersidad, ay nakahigit sa pinakamalaking standalone na website ng musika sa mundo, ay nagbabangon ng ilang mahahalagang tanong

Paano nalalampasan ng isang pahayagan ng mga estudyante sa isang bayan na may humigit-kumulang 40,000 naninirahan sa midwest ng Amerika ang pinakamalaking website ng balita tungkol sa musika sa mundo? Dahil sa aming pagka-interesado, napagpasyahan naming magsaliksik pa nang kaunti.

Una naming binisita ang pahina ng NME tungkol kay Charlie Puth.

Sa simula pa lang, ang unang napansin namin ay ang pop-up video na sinusubukang mag-load sa kanang sulok sa ibaba ng screen. Malinaw na hindi ito mahusay na naglo-load. Itinatago rin ng buffering video ang bahagi ng headline at katawan ng balita.

Susunod, mapapansin natin na ang unang viewport ay kadalasang inookupahan ng mga bagay na hindi nauugnay sa balita. Mayroong isang malaking banner ad na sumasakop sa halos kalahati ng pahina, at siyempre naroon ang video.

Sa katunayan, habang nag-i-scroll pababa sa pahina, mas marami tayong makikitang mga video, mas malalaki at mas detalyadong mga imahe, mas maraming pop-up ad at maraming hyperlink. Dahil sa dami ng media sa pahina, hindi nakakagulat na medyo natagalan bago ito naglo-load.

Sumunod naming sinuri ang Daily Illini at narito ang aming natagpuan.

Maayos, malinis, at walang kalat ang pahina. Marami itong mga ad at malaking button na "Donate" sa itaas, pero walang mga video o pop-up na tumatakip sa viewport o nakaharang sa headline ng balita. Makikita natin agad ang headline, at malamang na ganito rin ang mangyayari sa web crawler ng Google.

Sa pangkalahatan, ang pahina ay magaan, minimalista, at napakabilis mag-load.

Napagpasyahan naming silipin pa nang kaunti ang nakatagong code. Sa pamamagitan ng pag-right click sa pahina at pagpili sa View Source (habang ginagamit ang Chrome), makikita natin ang code ng pahina.

Ito ang nakita namin para sa pahina ng NME:

Dalawang bagay ang nakakuha ng aming atensyon dito:

1. Ang kodigo ng NME ay sumasaklaw sa 5,516 na linya, kumpara sa 1,481 na linya ng Daily Illini
2. Gumagamit ang NMW ng mga script para i-render ang mga pangunahing elemento ng isang pahina — tulad ng breadcrumbs — sa halip na gumamit ng HTML

Hindi ito ang pinakamagandang bagay para sa isang pahina dahil sa dalawang dahilan:

1. Ang mga web crawler ay kilalang nakakaranas ng mga isyu habang nagpapatupad ng mga script
2. Ang code na hindi pangkaraniwang kumplikado ay maaaring makapagpabagal sa interpretasyon at pagpapatupad.

Nang tiningnan namin ang code para sa pahina ng Daily Illini sa kabilang banda, nakita namin ito:

Ito ay napakasimpleng HTML code. Gayundin, walang mga script na tumatakbo sa loob ng<head> seksyon.

Paano nito nalalampasan ng Daily Illini ang NME?

Marahil ay may ilang mga salik na nakakaapekto rito, at isa na rito ang disenyo at layout. Ang pahina ng Daily Illini ay gumagamit ng ilang mga pamamaraan sa disenyo at layout na madaling matutularan kahit ng maliliit na publisher upang mapalakas ang kanilang pangkalahatang estratehiya sa SEO.

Kabilang dito ang paggamit ng malinis at simpleng HTML code, pag-iwas sa mga script sa seksyon ng header, pagpapanatiling magaan at mabilis mag-load ang pahina, at hindi masyadong umasa sa mga pop-up at interstitial ad.

Tinatalakay nang detalyado ng gabay sa ibaba ang bawat isa sa mga ito, habang ipinapaliwanag ang ilang iba pang mga pamamaraan na maaari mong ipatupad upang lubos na mapabuti ang iyong ranggo sa SERP.

2.1.4 Panimula sa Semantikong HTML Markup

Ano ang Semantikong HTML Markup?

Ang semantika ay may kaugnayan sa kahulugan ng mga salita. Ang mga semantikong HTML tag ay ang mga malinaw na tumutukoy sa kanilang mga kahulugan kapwa sa mambabasa at sa isang web crawler.

Halimbawa, kapag gumagamit tayo ng tag tulad ng<header> , alam natin kung ano ang nilalaman nito — impormasyon tungkol sa header.

Katulad nito<h1> ay isang semantic tag na nagsasabi sa Googlebot na ang kasunod ay ang pinakamahalagang heading sa artikulo.

Sa kabaligtaran, kapag gumamit tayo ng tag tulad ng<div> , ang kahulugan nito ay hindi agad nakikita. Sa HTML<div> ay kumakatawan sa dibisyon, at ang ipinahihiwatig lamang nito ay nagsimula na ang isang bagong seksyon ng code, nang hindi kinakailangang ibunyag ang anumang impormasyon tungkol sa mga nilalaman ng seksyong ito.

Bakit Mahalaga ang Semantic HTML para sa Teknikal na SEO?

Ang mga web crawler tulad ng Googlebot ay ginawa gamit ang artificial intelligence at mga algorithm ng machine learning na nagtatangkang gayahin ang paggana ng utak ng tao. Nangangahulugan ito na binibigyang-kahulugan nila ang teksto sa halos parehong paraan tulad ng ginagawa ng utak ng tao.

Ang HTML code na madaling maunawaan ng mga tao ay dapat ding madaling maunawaan ng web crawler ng Google.

Bilang halimbawa, isaalang-alang ang dalawang piraso ng HTML code sa ibaba:

Pinagmulan: https://www.pluralsight.com/guides/semantic-html

Ginagamit ng pahinang ito ang<div> tag para sa lahat, mula header hanggang sa pangunahing nilalaman hanggang sa footer. Hindi agad mahahalata sa pagbabasa ng mga tag kung ano ang nilalaman nito.

Sa kabilang banda, ang pahina sa ibaba ay gumagamit ng semantic markup. Ang header ay nakalagay sa loob ng<header> tag, ang footer sa loob ng<footer> tag, at ang pangunahing katawan ng artikulo ay nasa loob ng<main> tag.

Pinagmulan: https://www.pluralsight.com/guides/semantic-html

Dahil madali itong basahin at intindihin para sa Googlebot, mas malaki ang tsansa ng pahinang ito na mas mataas ang ranggo kaysa sa nauna, kung pantay-pantay ang lahat ng iba pang bagay.

Para makita kung gumagamit ng semantic markup ang iyong pahina, mag-right click lang sa pahina kung gumagamit ka ng Google Chrome, at i-click ang Inspect. Makikita mo ang HTML source code ng pahina. Kabilang sa mga karaniwang semantic element ang<author> ,<video> ,<article> ,<form> ,<header> , atbp.

Alam na natin ngayon kung ano ang Semantic Markup at kung bakit ito mahalaga. Ngunit paano natin ito gagamitin upang mapabuti ang SEO?

Simple lang — palaging gumamit ng semantic markup upang markahan ang mahahalagang impormasyon tungkol sa disenyo at layout ng iyong artikulo. Kabilang dito ang sumusunod na impormasyon ng artikulo:

• Pamagat ng Balita
• Mga Header
• Mga Talata
• Alt text ng larawan.

Tiyaking maayos ang pagkakaayos ng layout ng iyong pahina upang mapabuti ang pag-crawl

2.1.5 Ang Mga Pangunahing Kaalaman sa Disenyo at Layout

Dinidisenyo mo ang iyong site upang mabasa ng parehong tao at web crawler at, dahil dito, dapat ipakita ng iyong disenyo at layout ang katotohanang ito.

Nasa ibaba ang ilang tip upang matulungan kang makamit ang masusukat na mga resulta para sa iyong website.

Gumamit ng Plain HTML Kapag Gumagawa ng mga Artikulo

Maaari mong gamitin ang HTML, CSS, Javascript o anumang iba pang frontend language upang lumikha ng mga pahinang mayaman at interactive. Gayunpaman, tandaan na mas advanced ang wika, mas kumplikado ito, at mas malaki ang posibilidad na mahirapan ang isang web crawler na basahin, bigyang-kahulugan, at i-compile ito.

Anumang naka-code sa HTML ay maaaring hindi ang pinakamagandang tingnan, ngunit mas mabilis itong maglo-load at mas ma-o-optimize para sa mga search engine dahil sa simpleng dahilan na mas mabilis itong mababasa at mauunawaan ng mga search engine.

Isipin ang simpleng HTML bilang ang balangkas ng iyong web page. Maaari kang magdagdag ng CSS at Javascript para mas maging kaakit-akit at pabago-bago ang itsura nito, ngunit mas makabubuting panatilihin ang pinakamahalagang nilalaman sa loob ng balangkas kaysa ilagay ito nang laman.

Kaya paano natin ipatutupad ang plain HTML? Isang simpleng paraan para gawin ito ay ilagay ang pangunahing katawan ng iyong nilalaman sa loob ng<article> Mga tag ng HTML.

Sa ganitong paraan, kapag naranasan ng mga web crawler ang<article> tag, alam nila agad na ang kasunod ay ang pinakamahalagang nilalaman sa iyong pahina — ang artikulo ng balita. Nakakatulong ito sa search engine na maunawaan na ang nilalamang nakabalot sa loob ng tag na ito ay kailangang bigyan ng mas malaking bigat.

Mga Plain HTML<article> Ang tag ay isang semantic marker na ganito ang hitsura:

Pinagmulan: https://en.wikipedia.org/wiki/Article_element

Ang susunod na malinaw na tanong? Kung gumagamit ako ng CMS tulad ng WordPress, saan ko ilalagay ang mga tag na ito?

Paano Ito Gawin: Kung gagawa ka ng custom na website gamit ang HTML, maaari mong suriin ang source code upang matiyak na gumagamit ito ng plain HTML, lalo na sa mga kritikal na aspeto. Iminumungkahi naming makipag-usap nang mas detalyado sa isang developer upang matiyak na hindi mo aksidenteng maaapektuhan ang functionality.

Kung gumagamit ka ng WordPress, sumangguni sa gabay na ito . Maaari mo ring makita ang gabay na ito kung paano maglagay ng HTML sa mga post at pahina bilang isang kapaki-pakinabang na mapagkukunan ng sanggunian.

Ang mga tagubiling ito ay para sa WordPress dahil ang WordPress pa rin ang pinakasikat na CMS para sa mga publisher. Kung gumagamit ka ng ibang CMS tulad ng Wix, mangyaring sumangguni sa pahina ng suporta o dokumentasyon para sa iyong CMS.

Kung mayroon kang access sa isang pangkat ng mga web developer, mainam na sila ang gumawa nito dahil ang pag-eedit ng HTML code ay maaaring matagal.

Subukan ang Nilalaman sa Iba't Ibang Plataporma

Subukan upang matiyak na ang iyong nilalaman ay lumalabas nang tama sa lahat ng browser, device, at laki. Ito ay mas halata ngunit madalas na napapabayaan. Kung ang iyong nilalaman ay hindi lumalabas sa paraang gusto mo sa lahat ng browser at device, makakaapekto ito sa karanasan ng gumagamit, at sa katagalan, sa iyong mga ranggo sa SERP.

Paano Ito Gawin: Para subukan ang nilalaman sa iba't ibang platform, kailangan mong buksan ang iyong pahina sa iba't ibang device at sa iba't ibang browser para makita kung paano ito nire-render.

Sa pinakamababa, dapat mong subukan ang mga sumusunod:

1. Buksan ang pahina sa desktop/laptop para makita kung ang disenyo at layout ay ayon sa gusto mo.
2. Buksan ang pahina sa isang mobile device upang makita kung ang lahat ng elemento ng pahina ay nai-render nang tama o gamitin ang Chrome DevTools ng Google upang gayahin ang isang mobile device .
3. Buksan ang pahina sa maraming browser — Google Chrome, Mozilla Firefox at Microsoft Edge — para makita kung maayos at maayos itong naglo-load.

Gumamit ng Nakabalangkas na Datos

Nakakatulong ang mga HTML markup na i-highlight ang iba't ibang elemento ng iyong pahina. Nakakatulong ang structured data sa mga search engine na mabasa kung ano ang nasa loob ng iba't ibang elemento ng iyong pahina at mas maunawaan ang nilalaman nito.

Ang structured data ay isang serye lamang ng mga tagubilin na nakasulat sa isang simpleng wika, tulad ng JSON-LD, na maaaring ipasok sa loob ng umiiral na HTML code ng iyong webpage. Isipin ito bilang isang meta description, ngunit para sa mga indibidwal na piraso ng nilalaman sa iyong pahina.

Sa halimbawa sa ibaba, ang nakabalangkas na datos ay tumutulong sa Google na matukoy ang limang katangian tungkol sa isang pahina ng dbpedia tungkol kay John Lennon:

• Konteksto: Ang pahina ay tungkol sa isang tao.
• ID: Kung saan matatagpuan ang pahina sa internet. Sa kasong ito, ito ay dbpedia.org
• Pangalan: Ano ang pangalan ng taong paksa ng pahinang ito? Sa kasong ito, ito ay si John Lennon.
• Ipinanganak: Kailan ipinanganak ang taong ito?
• Asawa: Ano ang pangalan ng kanilang asawa?

Pinagmulan: https://json-ld.org/

Gaya ng nakikita mo, ang code ay nasa simpleng wika na madaling maunawaan ng isang mambabasa at ng isang web crawler.

Narito ang isa pang halimbawa na nagpapakita kung paano maaaring magkasya ang nakabalangkas na datos sa umiiral na HTML code ng iyong web page. Ang mga tagubilin sa nakabalangkas na datos ay naka-highlight sa berde.

Pinagmulan: developers.google.com

Sa halimbawang ito, sinasabi ng structured data sa Googlebot na ito ay isang pahina ng recipe tungkol sa coffee cake mula sa isang taong nagngangalang Mary Stone.

Ang paggamit ng structured data sa layout ng iyong website ay naghahatid ng masusukat na resulta. Halimbawa, ang paggamit ng structured data ay maaaring magpataas ng click-through rate (CTR) ng isang website nang hanggang 30%.

Ang paggamit ng structured data ay nakakatulong din na mas mataas ang ranggo ng iyong page sa mga carousel, featured snippet, video, at feature ng Google tungkol sa knowledge panel.

Para sa Google News SEO, mahalagang isama ang mga sumusunod na elemento kapag lumilikha ng nakabalangkas na datos upang magbigay ng karagdagang halaga:

• Petsa ng Paglalathala: Petsa kung kailan unang inilathala ang balita gamit ang format na ISO 8601.
• Petsa ng Pagbabago: Petsa kung kailan ito pinakahuling binago o na-update.
• Pamagat: Huwag lumagpas sa 110 karakter.
• Larawan: Isang link patungo sa larawang kasama ng artikulo. Dapat markahan ang larawan gamit ang mga HTML tag.
• isAccessibleForFree: Ipinapahiwatig ng field na ito kung ang balita ay nasa likod ng isang paywall o hindi.
• author.url: Magsama ng link sa bio o profile ng awtor ng artikulo. Mainam na kasanayan din na isama ang mga social media handle ng awtor sa bio.

Paano Ito Gawin: Maaari kang magdagdag ng structured data/schema sa iyong nilalaman nang manu-mano o sa pamamagitan ng paggamit ng plugin para sa iyong partikular na CMS.

1. Magsimula sa paglalagay ng URL ng iyong pahina sa Structured Data Testing Tool . Sasabihin nito sa iyo kung gumagamit ka na ng anumang structured data at, kung gayon, kung saan ito matatagpuan sa iyong pahina. Ito naman ay magbibigay sa iyo ng ideya kung anong uri ng structured data ang kailangan mo pang idagdag at kung saan.
2. Kung plano mong manu-manong magdagdag ng nakabalangkas na datos, kakailanganin mong magkaroon ng pangunahing pag-unawa sa schema.org. Isa itong magandang mapagkukunan upang matuto nang higit pa tungkol sa schema.org. Kung hindi ka komportable sa pag-edit ng HTML code sa iyong pahina, inirerekomenda namin ang pagkuha ng tulong sa isang web developer.
3. Kung gumagamit ka ng CMS tulad ng WordPress, maaaring hindi mo direktang ma-edit ang HTML code. Sa ganitong sitwasyon, mas mainam na gumamit ng plug-in tulad ng Schema Pro , Schema App Structured Data o anumang iba pang mahusay na WordPress plug-in. Kung gumagamit ka ng iba pang CMS tulad ng Wix, tingnan ang naaangkop na plug-in. Paalala: Mangyaring kumonsulta sa iyong hosting provider upang maiwasan ang mga potensyal na conflict sa plug-in.

Istruktura ang Iyong Nilalaman

Dapat ayusin ang lahat ng elemento ng iyong artikulo sa isang tiyak na pagkakasunud-sunod upang mas mabilis at mas madaling mabasa. Ang pagkakasunud-sunod ay ang mga sumusunod:

• Pamagat ng Balita
• Larawan (may alt text)
• Talambuhay at petsa ng may-akda
• Katawan ng artikulo

Karanasan sa Pahina

Ang karanasan sa pahina ay isang sukatan kung paano nararanasan ng mga user ang iyong pahina. Ang Google ay may hanay ng mga parameter upang masukat ang karanasan sa pahina. Naglaan kami ng isang buong module sa mga salik ng karanasan sa pahina , kaya sandali lamang naming titingnan ang bawat isa rito.

• Core Web Vitals (CWV): Ang CWV ay isang sukatan ng Google na sumusukat sa tatlong bagay — kung gaano kabilis mag-load ang iyong website, gaano ito interactive at kung gaano ito katatag sa paningin. Ginagawa ito sa tulong ng tatlong iba pang sukatan — largest content paint (LCP), first input delay (FID) at cumulative layout shift (CLS).
• Mobile Friendly: Dapat na responsive ang iyong site sa mga mobile device.
• Iskema ng HTTPS: Ang HTTPS ay ang ligtas na bersyon ng HTTP na ginagamit upang maglipat ng data sa internet. Ine-encrypt ng HTTPS ang data na ipinapadala sa isang network at tinitiyak ang pagiging tunay at privacy.
• Walang Nakakasagabal na Interstitial: Ang mga interstitial ay mga pop-up tulad ng mga ad o dialogue box na sumasakop sa malaking bahagi ng screen ng user, kaya nakakagambala sa kanilang karanasan sa panonood. Pinahihirapan din ng mga nakakasagabal na interstitial ang Google na maunawaan ang nilalaman sa pahina.

Paano Ito Gawin: Maaari mong subukan ang karanasan sa pahina nang manu-mano at sa pamamagitan ng paggamit ng mga plugin o mga third-party na app. Halimbawa, ang Page Speed ​​Insights ay isang madaling gamiting tool na tumutulong sa iyong suriin ang pagganap ng iyong site batay sa CWV at iba pang mga parameter at nagtatalaga ng iskor batay sa pagsusuri nito. Sinusuri rin nito ang parehong mobile at desktop responsiveness.

Mga Natatangi at Permanenteng URL

Hindi dapat maglathala ang mga tagapaglathala ng balita ng maraming artikulo ng balita sa ilalim ng iisang URL. Makakahadlang ito sa Google sa pag-index ng mga ito. Dapat may kanya-kanyang natatanging URL ang bawat artikulo ng balita.

Bukod pa rito, dapat permanente ang mga URL na ito. Nangangahulugan ito na ang parehong balita ay dapat ipakita sa isang partikular na URL. Kung ang balitang nauugnay sa isang partikular na URL ay madalas na nagbabago, hindi ito ma-crawl at ma-index ng Google. Gayunpaman, dapat i-update ng mga publisher ang balita nang madalas hangga't kinakailangan.

Mga Pag-redirect ng URL

Kung kailangang gamitin ang mga redirect para sa mga artikulo ng balita, dapat itong ipatupad ayon sa mga sumusunod na pinakamahusay na kagawian:

• Gumamit ng pinakamakaunting mga redirect hangga't maaari para mag-link mula sa isang pahina patungo sa isa pa
• Siguraduhing magre-redirect ka sa isang wastong pahina
• Kung gumagamit ka ng redirect timer na nagre-redirect ng user sa ibang page pagkatapos lumipas ang isang partikular na oras, siguraduhing i-minimize mo ang window na ito
• Siguraduhing hindi nagre-redirect ang isang pahina sa sarili nito
• Para sa mga permanenteng pag-redirect, gumamit ng 301 redirect
• Iwasan ang paggamit ng &ID= bilang parameter ng URL

2.1.6 Masarap Magkaroon

Bagama't ang mga aytem ng aksyon na nakalista sa seksyong ito ay hindi kasinghalaga ng mga nasa itaas, inirerekomenda pa rin namin ang pagpapatupad ng pinakamarami sa mga ito hangga't maaari kapag natugunan na ang mga kritikal na punto ng misyon na nakalista sa itaas.

Malinis<head> Kodigo

Ang<head> Ang elemento ng isang pahina ay naglalaman ng mahahalagang impormasyon tungkol sa pahinang hindi talaga ipinapakita sa pahina. Kasama rito ang metadata na tumutulong sa Googlebot na matukoy ang mga nilalaman ng pahina at uriin ito.

Bilang tuntunin, ang<head> Dapat isama lamang ng elemento ang pinakamahalagang mga tag at wala nang iba pa, para ma-crawl at ma-render nang maayos ang isang post. Kabilang dito ang:

• pamagat
• <style>
• <meta>
• <link>
• <script>
• <base>

Anumang iba pang nakapaloob sa<head> elementong ito ay malamang na makalito sa mga web crawler.

Halimbawa, karaniwan para sa mga baguhan na mapagkamalan ang title tag sa<h1> at ilagay ang huli sa loob ng<head> elemento. Gaya ng naipaliwanag noon, ang<head> Ang elemento ay maaari lamang maglaman ng metadata na hindi ipinapakita sa pahina.

Kahit na ang titulo at<h1> dapat maglaman ng halos parehong impormasyon, ang nauna ay metadata na para sa mga web crawler at ipapakita sa loob ng mga resulta ng SERP at tab ng browser, habang ang huli ay impormasyong ipapakita sa pahina.

Ang code sa ibaba ay nagpapakita kung paano maglagay ng pamagat sa loob ng<head> elemento.

Pinagmulan: developer.mozilla.org

Paglikha ng isang User-friendly na UX

Ang paggamit ng mga elemento ng pahina na nagpapadali sa pag-scan ng nilalaman at ginagawang madali ang nabigasyon para sa gumagamit ay nakakaapekto rin sa SEO.

Ang isang madaling i-navigate na pahina ay maglalaman ng mga elementong ito:

• Pahina ng Bahay
• Menu
• Maghanap
• Mga Pahina ng Kategorya
• Mga Pahina ng Artikulo ng Balita
• Mag-sign up/Mag-subscribe

Maliban na lang kung ikaw ay isang batikang web developer, mainam na kumonsulta sa isang eksperto sa pinakamahusay na paraan upang maipatupad ang isang user-friendly na UX.

Paglikha ng Magandang Karanasan sa Ad

Nais ng Google na magpakita ang mga publisher ng mga ad nang hindi naaapektuhan ang karanasan ng user. Dahil dito, maaari nitong parusahan ang mga website na nagpapakita ng napakaraming nakakaabala na mga ad. Bagama't ang karanasan ng user ay isang subhetibong sukatan, may ilang mga alituntunin at pinakamahusay na kasanayan ang Google pagdating sa mga ad.

Ang ilan sa mga ito ay may kaugnayan sa:

• Paglalagay ng ad: Pagtiyak na ang iyong pahina ay hindi masyadong maraming ad
• Nilalaman ng ad: Pagtiyak na ang iyong mga ad ay hindi nakakasakit o hindi naaangkop
• Ratio ng ad sa nilalaman: Panatilihing hindi hihigit sa 30%
• Iwasan ang mga nakakaabala na interstitial: Pag-iwas sa mga ad na nagpa-pop-up at sumasakop sa malaking bahagi ng screen ng user.

Para sa karagdagang impormasyon tungkol sa mga ad at popup, sumangguni sa aming detalyadong modyul .

2.1.7 Iwasan ang mga Karaniwang Patibong na Ito

Huwag Gumamit ng Javascript Kapag Gumagawa ng mga Artikulo

Mahusay ang Javascript para sa paglikha ng dynamic at interactive na nilalaman ngunit maaaring mahirapan ang mga web crawler sa pag-render nito.

Ito ay dahil:

• Karaniwang nire-render ang Javascript sa client side sa halip na sa server. Bilang pangkalahatang tuntunin, anumang na-render sa server side ay kadalasang mas mabilis na naipapatupad.
• Gumagamit ang Googlebot ng dalawang-hakbang na proseso ng pag-i-index kung saan ini-index nito ang nilalamang HTML ng isang pahina sa unang bugso, at ang Javascript naman sa ikalawang bugso. Hindi lamang nito maaaring maantala ang pag-i-index, kundi minsan ay maaari pa ngang magresulta sa tuluyang hindi pagpansin ng Googlebot sa nilalamang Javascript.
  Kaya, bagama't hindi ito nangangahulugan na hindi mo dapat gamitin ang Javascript sa iyong pahina, siguraduhin lamang na ang seksyon ng artikulo ay walang Javascript.

Iwasan ang mga Pagkaantala sa Artikulo

Sa mga artikulo ng balita, mainam na kasanayan na iwasan ang mga pagkaantala tulad ng mga carousel ng kaugnay na artikulo o mga gallery ng larawan.

Subaybayan ang Iyong Site Pagkatapos ng Muling Pagdisenyo

Maraming publisher na nakakapag-isip nang maayos ang nababahala kapag muling inilulunsad/muling dinisenyo ang kanilang site, dahil kinakailangan ng Google na muling i-crawl ang site. Sundin ang mga pinakamahuhusay na kagawian na ito upang matiyak ang maayos na paglipat sa normal pagkatapos ng muling pagdisenyo/muling paglulunsad:

• Tiyaking maa-access ng web crawler ng Google ang lahat ng iyong mga pahina sa pamamagitan ng paglalagay ng mga URL sa tool sa inspeksyon ng URL ng Google
• Kung ayaw mong i-crawl ng Google ang ilang partikular na pahina, harangan ang access sa mga ito gamit ang robots.txt o mga noindex tag
• I-update ang iyong sitemap. Sinasabi nito sa Google kung aling mga pahina sa iyong site ang kailangang i-crawl at i-index
• Kung binago mo ang istruktura ng iyong website habang binabago ang disenyo, i-update ang mga talaang nauugnay sa iyong mga webpage gamit ang publisher center . Para sa higit pang impormasyon tungkol sa Google Publisher Center, tingnan ang aming detalyadong modyul ng kurso .

Iwasan ang Mabigat na HTML sa mga Pahina ng Artikulo

Panatilihing magaan hangga't maaari ang mga pahina ng iyong artikulo. Napag-aralan na natin ang pag-iwas sa Javascript sa mga artikulo, ngunit mainam din na iwasan ang paggamit ng mabibigat na nilalamang HTML.

Ito ay dahil kapag kino-crawl ng Googlebot ang iyong pahina, maaari lamang itong mag-download ng maximum na 15 MB ng data ng pahina sa unang pag-crawl. Para sa karamihan ng mga pahina, hindi ito isang malaking isyu dahil ang mga mabibigat na item tulad ng mga video at imahe ay hiwalay na tinutukoy sa loob ng code na ini-index ng Googlebot sa ibang pagkakataon, at samakatuwid ay lampas sa saklaw ng limitasyong 15 MB na ito.

Gayunpaman, muli nitong itinuturo ang katotohanan na mas magaan ang iyong pahina, mas madali para sa Googlebot na i-crawl at i-index ito.

Tip: Kung gusto mong suriin ang laki ng iyong pahina, pumunta sa pahina ng Mga Tool ng Developer ng iyong browser, lumipat sa tab na Network, pagkatapos ay i-reload ang pahina. Ipapakita nito ang lahat ng kahilingan na ginawa ng iyong browser upang ganap na i-render ang pahina. Ang unang kahilingan sa listahang ito ay nagpapakita ng laki ng iyong pahina sa ilalim ng kolum na Sukat. Para sa karamihan ng mga pahina sa internet, ang bilang na ito ay karaniwang nasa kilobytes.

Ayusin ang Maling mga Snippet ng Artikulo

Ang mga snippet ng artikulo ay nagbibigay sa mga mambabasa ng preview ng nilalaman sa pahina bago nila ito i-click. Tinutukoy ng Google ang snippet na sasama sa bawat artikulo sa pamamagitan ng pag-crawl sa teksto sa pangunahing katawan ng artikulo sa ibaba lamang ng pamagat.

Para maiwasan ang posibilidad na magsama ang Googlebot ng mga maling snippet, siguraduhing:

• Sa HTML code ng pahina, walang karagdagang teksto ang inilagay sa pagitan ng pamagat at ng pangunahing katawan.
• Ang mga byline ng may-akda, talambuhay ng may-akda, at petsa ng paglalathala ng artikulo ay malinaw na naiiba mula sa simula ng pangunahing katawan ng artikulo. Para sa mga pinakamahusay na kasanayan kung paano ipatupad ito, sumangguni sa mga alituntunin sa structured data at semantic markup na tinalakay dati.

Pigilan ang mga Nawawala o Maling Larawan

Minsan, maaaring hindi ma-index ng Googlebot ang iyong larawan o kaya naman ay hindi nito ma-index ang ibang larawan kumpara sa gusto mong itampok sa iyong artikulo. Para maiwasan ito, sundin ang mga pinakamahuhusay na kagawian na ito:

• Gumamit ng schema markup upang matulungan ang Googlebot na mas matukoy ang iyong mga larawan. Nagbibigay ang Schema.org ng semantic markup code na makakatulong sa Googlebot na mas matukoy ang iyong larawan. Ang Opengraph (OG) ay isa pang tool na ginagamit para sa katulad na layunin. Ang structured data ng Schema.org ay nagmula sa isang kolaborasyon sa pagitan ng mga pangunahing search engine — Google, Yahoo!, Bing at Yandex — upang gawing mas tumpak at madali ang pagtukoy at pag-index ng mga elemento sa isang pahina.
• Gumamit lamang ng mga format ng larawan na sinusuportahan ng Google tulad ng Jpeg, GIF, PNG, BMP, WebP at SVG. Siguraduhin din na ang mga larawan ay may sukat na hindi bababa sa 90 x 60 pixels.
• Mag-ingat sa pag-inline ng mga imahe. Mayroong dalawang paraan ng pagsasama ng mga imahe sa iyong code — inline o pag-refer sa isang panlabas na mapagkukunan. Kapag gumamit ka ng inline na imahe, binabawasan nito ang bilang ng beses na kailangang sundan ng web crawler ang isang panlabas na link kaya binabawasan ang oras ng pag-crawl. Gayunpaman, ang pag-inline ng mga imahe ay may disbentaha sa pagtaas ng laki ng pahina. Kaya naman mayroong tradeoff sa pagitan ng pag-inline at pag-refer, at ang pinakamahusay na landas na susundin ay pagpapasyahan ng iyong mga prayoridad. Kung ang iyong mga imahe ay hindi masyadong mabigat, i-format ang mga ito nang inline.
• Siguraduhing ang iyong itinatampok na larawan ay nakalagay malapit sa pamagat ng artikulo at ang pag-access sa larawan ay hindi naharangan ng robot.txt tag o metadata

Pigilan ang mga Hindi Tumpak na Pamagat ng Artikulo

Ginagamit ng Googlebot ang pamagat ng iyong artikulo upang matukoy at mai-index ito nang tama. Gamitin ang mga sumusunod na pinakamahusay na kasanayan upang matiyak na nababasa nito nang tama ang iyong pamagat:

• Tiyaking ang nilalaman sa loob ng pamagat at<h1> pareho ang tag ng artikulo mo
• Iwasan ang paglalagay ng mga hyperlink sa pamagat ng artikulo
• Sikaping iwasan ang paggamit ng petsa o oras sa loob ng pamagat ng iyong artikulo
• Kung ili-link mo ang iyong artikulo sa ibang seksyon ng iyong website, siguraduhing ang anchor text na nagli-link sa iyong artikulo ay kapareho ng pamagat ng artikulo

2.1.8 Mga Halimbawa ng mga Site na Mahusay na Ginawa

Tingnan natin ang dalawang case study ng mga site na nagpatupad na ng mga hakbang na tinalakay sa artikulong ito.

Ang mga modernong website ng balita ay masalimuot at mayaman, at hindi makatotohanang asahan silang mahigpit na susunod sa mga alituntuning ito. Gayunpaman, sa seksyong ito ay sinusubukan naming ipakita kung paano ang pagsunod sa mga alituntunin ay maaaring magresulta sa mahuhulaan at masusukat na mga resulta.

Pag-aaral ng Kaso 1: Manly Observer

Ang Manly Observer ay isang hyperlocal news website na nagsisilbi sa mga mambabasa sa isang sikat na suburb sa tabing-dagat ng Sydney, Australia. Nasa ibaba ang hitsura ng isang tipikal na artikulo ng balita sa site:

Sa unang tingin, nakikita natin ang mga sumusunod na elemento ng disenyo nang malinaw at naroon:

1. Pamagat
2. Pangalan at larawan ng awtor
3. Petsa ng paglalathala
4. Itinatampok na larawan na may kaugnayan sa pamagat
5. Katawan ng artikulo

Sa susunod na pagtingin sa HTML code ng pahina, makikita natin ang paggamit ng semantic markup.

• Ang title tag ay naglalaman ng pamagat ng artikulo ng balita.
• Madaling basahin ang mga parameter ng viewport ng pahina.

Ito ay isang code na madaling basahin ng isang tao. Ligtas na ipagpalagay na ang isang web crawler ay makakabasa at makakapag-interpret ng code na ito nang may pantay na kadalian.

Gumagamit ang website ng https:// scheme at walang mga pop-up ad o interstitial na naglo-load sa loob ng unang viewport.

Pag-aaral ng Kaso 2: Negosyante

Ang Entrepreneur ay isang sikat na magasin para sa mga negosyante at negosyo. Ganito lumalabas ang homepage nito.

Napakabilis mag-load ng website at walang mga pop-up ads o video sa mismong homepage. Karamihan sa mga ad placement ay nangyayari sa mga indibidwal na artikulo ng balita.

Kapag pinindot natin ang "view source", makikita natin ang sumusunod na HTML code:

Sa isang sulyap, makikita natin ang sumusunod mula sa code na ito:

1. Paggamit ng Semantic Markup: Kapag binasa natin ang code na ito, posible para sa atin na maunawaan kung ano ang nilalaman ng bawat tag. Halimbawa, makikita natin ang title tag na naglalaman ng pamagat ng pahina.
2. Clean Napag-usapan na natin kung paano dapat maglaman lamang ang elementong head ng mga sumusunod na tag — title, style, meta, link, script, base. Sa code sa itaas, ang mga elementong ito lamang ang makikita natin at wala nang iba. Ito ay isang clean

Habang nag-i-scroll pababa, makikita natin ang sumusunod na elemento ng code:

Napag-usapan na natin ang paggamit ng schema.org at Opengraph (OG) para sa mga imahe. Bilang buod, ang schema.org at OG ay mga uri ng nakabalangkas na datos na tumutulong sa mga web crawler na mas madaling matukoy ang mga partikular na elemento ng code. Makikita natin ang schema.org at OG na ipinatupad dito.

Sa ibaba pa, makikita rin natin ang mga structured data tag gaya ng ipinapakita sa ibaba:

Gaya ng ating nakaraang halimbawa, ginagamit din ng entrepreneur.com ang https:// scheme sa link nito, walang nakakagambalang mga interstitial o pop-up, at mabilis itong i-load. Ang mga artikulo ng balita ay sumusunod sa isang takdang format ng pamagat, larawan, pagpapatungkol ng may-akda, petsa at pangunahing nilalaman. Nagreresulta ito sa mas mahusay na karanasan sa pahina at sa gayon ay pinahusay na teknikal na SEO.

2.1.9 Mga Aksyon at Pundasyon

Matapos pag-aralan ang araling ito, dapat ay kaya mo nang repasuhin at i-update ang mga kasalukuyang pahina ng balita upang ma-optimize ang disenyo at layout ng mga ito upang sumunod sa mga teknikal na pinakamahuhusay na kagawian sa SEO.