Gekissimo.net - Opi ansaitsemaan rahaa webilläsi Internetissä!
Blogi

Kuinka käyttää WordPress-koukkuja teknisen hakukoneoptimoinnin parantamiseen

Seuraava artikkeli auttaa sinua: Kuinka käyttää WordPress-koukkuja teknisen hakukoneoptimoinnin parantamiseen

WordPress on maailman suosituin sisällönhallintajärjestelmä (CMS) yli 60 prosentin markkinaosuudellaan.

Suuri tukiyhteisö ja monet saatavilla olevat ilmaisliitännäiset tekevät verkkosivuston rakentamisesta WordPressin (WP) avulla edullista, ja sillä on keskeinen rooli siihen, miksi sen markkinaosuus on niin suuri.

Kuten tiedät, laajennusten asentaminen maksaa kuitenkin.

Ne voivat usein heikentää Core Web Vitals -pisteitäsi; He voivat esimerkiksi ladata tarpeettomia CSS- tai JS-tiedostoja jokaiselle sivulle, jolla niitä ei tarvita.

Korjataksesi tämän, sinun on palkattava ohjelmoija tekemään se puolestasi, ostettava premium-laajennus tai ehkä mentävä pieni oppimispolku ja tehtävä se itse.

Voit myös siirtyä hybridiin ja ratkaista osan ongelmistasi mukautetulla koodauksella ja toiset laajennuksilla.

Tämän artikkelin tarkoituksena on auttaa sinua oppimispolullasi, ja käsittelemme eniten tarvittavia WordPress-koukkuja, joiden avulla voit parantaa verkkosivustosi teknistä hakukoneoptimointia.

Mikä on WordPress-koukku?

WordPress-koukut ovat WP:n avainominaisuuksia, joiden avulla kehittäjät voivat laajentaa CMS:n toimintoja ilman, että heidän tarvitsee muokata WP-ydintiedostoja – mikä helpottaa teemojen tai laajennusten päivittämistä rikkomatta mukautettuja muutoksia.

Ne tarjoavat kehittäjille tehokkaan tavan laajentaa WordPressin toimintoja ja tehdä mukautettuja muutoksia sivustoihinsa.

Mikä on suodatinkoukku?

Koukkusuodatintoimintoa käytetään muokkaamaan funktion lähtöä ennen sen palauttamista. Voit esimerkiksi liittää sivujen otsikot blogisi nimeen käyttämällä wp_title suodatinkoukku.

Mikä on toimintakoukku?

Toimintojen avulla ohjelmoijat voivat suorittaa tiettyjä toimintoja tietyssä vaiheessa WP Coren, laajennusten tai teemojen suorittamisen aikana, esimerkiksi kun viesti julkaistaan ​​tai JS- ja CSS-tiedostoja ladataan.

Oppimalla muutamia perustoimintokoukkuja tai suodattimia voit suorittaa monenlaisia ​​tehtäviä ilman, että sinun tarvitsee palkata kehittäjiä.

Käymme läpi seuraavat koukut:

  • wp_enqueue_scripts
  • wp_head
  • script_loader_tag
  • malli_uudelleenohjaus
  • wp_headers

wp_enqueue_scripts

Tämä on juuri se toimintakoukku, jota käyttäisit tarpeettomien CSS- tai JS-tiedostojen latautumisesta sivuille, joilla niitä ei tarvita.

🔥 Empfohlen:  Kuinka tehdä rahaa mainonnasta yrityksille

Esimerkiksi suosittu ilmainen Yhteydenottolomake 7 Plugin, jolla on yli 5 miljoonaa asennusta, lataa CSS- ja JS-tiedostoja kaikille sivuille – kun taas se tarvitsee vain latautumiseen siellä, missä yhteydenottolomake on olemassa.

Voit sulkea pois CF7 CSS- ja JS-tiedostot muilla sivuilla kuin yhteystietosivulla käyttämällä alla olevaa koodinpätkää.

Function my_dequeue_script(){ //tarkista, jos sivun sivu ei ole yhteyssivumme, vaihtoehtoisesti voit käyttää is_page(25):tä sivutunnuksella, tai jos se on viestisivu is_single(‘my-post’) if ( !is_page (‘contact’) ) { wp_dequeue_script(‘google-recaptcha’); wp_dequeue_script(‘wpcf7-recaptcha’); wp_dequeue_script(‘contact-form-7’); wp_dequeue_style(‘contact-form-7’); } } add_action(‘wp_enqueue_scripts’, ‘my_dequeue_script’, 99 );

Siinä on muutamia keskeisiä kohtia; toimintakoukun prioriteetti on asetettu arvoon 99 varmistaakseen, että muokkauksemme suoritetaan viimeisenä jonossa.

Jos asetat sen esimerkiksi arvoon 10, se ei toimi, koska CF7:n enqueue-funktio käyttää prioriteettia 20. Joten varmista, että omasi suoritetaan viimeisenä ja vaikutat, aseta prioriteetti riittävän suureksi.

Myös koodissa käytimme funktion argumenttitunnisteena “contact-form-7”; saatat ihmetellä, kuinka löysin sen.

Se on melko yksinkertainen ja intuitiivinen. Käytä vain selaimesi Inspect element -työkalua ja tarkista linkki- tai komentosarjatunnisteiden id-attribuutti.

Kuvakaappaus kirjoittajalta, helmikuu 2023

Voit tarkistaa verkkosivustosi lähdekoodin käyttämällä inspect-elementtiä ja aloittaa minkä tahansa JS- tai CSS-tiedoston poistamisen jonosta, jos niitä ei tarvita.

wp_head

Tätä toimintokoukkua käytetään minkä tahansa resurssin JS-, CSS-tiedostojen tai sisällönkuvauskenttien lisäämiseen verkkosivun -osioon.

Tämän koukun avulla voit ladata esilatausresursseja sivun yläosaan, mikä voi parantaa LCP-pisteitäsi.

Esimerkiksi, fontin esilatausjoka on yksi Googlen suosituksista, tai artikkelisivuilla olevat logot ja suositellut kuvat, latautuvat aina sivun yläosaan – ja sinun on esiladattava ne LCP:n parantamiseksi.

Käytä tätä varten alla olevaa koodinpätkää.

function my_preload() { ?>

Kaksi ensimmäistä riviä on tarkoitettu Google-kirjasimien esilataamiseen, sitten esilataamme logon ja tarkistamme, onko artikkelissa esitelty kuva, ja esilataamme sitten suositeltu kuva.

🔥 Empfohlen:  Kuinka lisätä ilmainen toimituspalkki Magento 2:een

Lisähuomautuksena teemassasi tai sivustossasi voi olla webp-kuvat käytössä. siinä tapauksessa sinun tulee esiladata niistä webp-versio.

script_loader_tag

Olet kuullut paljon renderöinnin estävistä resursseista, jotka voidaan korjata viivyttämällä tai asynkronoimalla JavaScript-tunnisteiden lataamista. Se on kriittinen FCP:n ja LCP:n parantamisen kannalta.

Tätä suodatintoimintoa käytetään skriptitunnisteiden HTML-tulosteen suodattamiseen, ja tarvitset juuri tämän suodattimen teeman tai laajennuksen JS/CSS-tiedostojen synkronointiin tai latauksen lykkäämiseen.

function my_defer_async_load( $tag, $handle ) { // async-latauskomentosarjojen kahvat menevät tähän taulukkona $async_handles = array(‘wpcf7-recaptcha’, ‘toinen-plugin-skripti’); // lykkää latausta skriptien kahvat menevät tähän taulukkona $defer_handles = array(‘contact-form-7’, ‘any-theme-script’); if( in_array( $kahva, $async_handles) ){ return str_replace( ‘ src’, ‘ async src’, $ tag ); } if( in_array( $handle, $defer_handles ) ){ return str_replace( ‘ src’, ‘ defer=”defer” src’, $tag ); } return $tag; } add_filter(‘script_loader_tag’, ‘my_defer_async_load’, 10, 2);

Tämä suodatin hyväksyy kaksi argumenttia: HTML-tunnisteen ja komentosarjan kahvan, jotka mainitsin edellä tutkiessani tarkastuselementin kautta.

Voit käyttää kahvaa päättääksesi, mikä komentosarja ladataan asynkronisesti tai lykätään.

Kun olet lykännyt tai asynkronnut latauksen, tarkista aina selainkonsolin kautta, onko sinulla JS-virheitä. Jos näet JS-virheitä, saatat tarvita kehittäjää auttamaan sinua, koska niiden korjaaminen ei välttämättä ole yksinkertaista.

malli_uudelleenohjaus

Tämä toimintakoukku kutsutaan ennen kuin määritetään, mikä malli ladataan. Voit käyttää sitä muuttamaan vastauksen HTTP-tilakoodia.

Sinulla voi esimerkiksi olla roskapostilinkkejä sisäisille hakukyselysivuillesi, jotka sisältävät outoja merkkejä ja/tai yleisiä kuvioita.

Search Engine Journalissa olemme tottuneet roskapostilinkkeihin, jotka osoittavat sisäisille hakusivuillemme, jotka ovat koreaksi – ja olemme oppineet palvelinlokeistamme, että Googlebot indeksoi niitä intensiivisesti.

Kuvakaappaus kirjoittajalta, helmikuu 2023

WordPressin oletusvastauskoodia 404 ei löydy, mutta on parempi heittää 410 kertoaksesi Googlelle, että ne ovat poissa lopullisesti, joten se lopettaa indeksoinnin.

function my_410_function(){ if( on_search() ) { $kw = $_GET[‘s’]; // tarkista sisältääkö merkkijono korealaisia ​​merkkejä if (preg_match(‘/[\x{AC00}-\x{D7AF}]+/u’, $kw)) { status_header(410, ‘Ei löydy’); } }// is_haun loppu } add_action( ‘mallin_uudelleenohjaus’, ‘oma_410_funktio’, 10 );

🔥 Empfohlen:  FMCG-sektorin tulevaisuus pandemian jälkeen

Meidän tapauksessamme tiedämme, että meillä ei ole korealaista sisältöä, minkä vuoksi laadimme ehtomme sellaiseksi.

Mutta sinulla voi olla kansainvälistä sisältöä koreaksi, ja ehdot voivat vaihdella.

Yleisesti ottaen muille kuin ohjelmoijille ChatGPT on loistava työkalu ehtojen luomiseen säännöllisen lausekkeen avulla, jota voit käyttää if/else-ehdon rakentamiseen GSC:n roskapostimallin perusteella.

wp_headers

Tätä toimintakoukkua käytetään WordPressin HTTP-otsikoiden muokkaamiseen.

Tämän koukun avulla voit lisätä suojausotsikot verkkosivustosi vastausten HTTP-otsikoihin.

function my_headers(){ $headers[‘content-security-policy’] = ‘upgrade-insecure-requests’; $otsikot[‘strict-transport-security’] = ‘enintään ikä=31536000; esilataus’; $otsikot[‘X-Content-Type-Options’] = ‘nosniff’; $otsikot[‘X-XSS-Protection’] = ‘1; mode=block’; $otsikot[‘x-frame-options’] = ‘SAMEORIGIN’; $otsikot[‘Referrer-Policy’] = ‘tiukka-alkuperä-kun-ristiperäinen’; $otsikot[‘Link’] = ‘; rel = esilataus; as=kuva’; $otsikot[‘Link’] = ‘; rel=preconnect; risteytys’; $otsikot[‘Link’] = ‘; rel = esilataus; as=kuva’; palauttaa $otsikot; } add_filter( ‘wp_headers’, ‘my_headers’, 100 );

Suojausotsikoiden lisäksi voit lisätä “Link”-tunnisteita (niin monta kuin haluat) minkä tahansa resurssin esiliittämistä tai esilatausta varten.

Pohjimmiltaan se on vaihtoehtoinen esilatausmenetelmä, jota käsiteltiin edellä.

Voit myös lisätä “X-Robots-Tag” (niin monta kuin haluat) HTTP-otsikoihisi tarpeidesi mukaan.

Johtopäätös

Laajennukset on usein tarkoitettu ratkaisemaan monenlaisia ​​tehtäviä, eikä niitä välttämättä ole suunniteltu nimenomaan vastaamaan sinun erityistarpeitasi.

WordPress-ytimen muokkaamisen helppous on yksi sen kauneimmista puolista – ja voit muuttaa sitä muutamalla koodirivillä.

Keskustelimme toimintakoukuista, joiden avulla voit parantaa teknistä hakukoneoptimointia, mutta WordPressillä on suuri määrä toimintakoukkuja voit tutkia ja käyttää tehdäksesi periaatteessa kaiken mitä haluat vähäisellä lisäosien käytöllä.

Lisää resursseja:

Post Views: 26

Table of Contents