Szukasz łatwego sposobu na dodanie odnośników kotwic do twoich wpisów i stron na blogu?
Kotwice odnośników są często używane w sekcjach spisu treści, ponieważ pomagają użytkownikom poruszać się w górę i w dół dłuższego artykułu bez przeładowywania strony. Może to również pomóc w SEO, ponieważ Google może wyświetlać twoją treść w wyróżnionych fragmentach kodu.
W tym przewodniku pokażemy, jak łatwo dodać odnośniki kotwic w WordPressie.
Co to jest odnośnik kotwicy?
Odnośnik z kotwicą to rodzaj odnośnika na stronie, który przenosi użytkownika do określonego miejsca na tej samej stronie. Pozwala użytkownikom przejść do sekcji, która ich najbardziej interesuje.
Jak widać, kliknięcie odnośnika z kotwicą przenosi użytkownika do określonej sekcji na tej samej stronie.
Kotwice odnośników są powszechnie używane w dłuższych artykułach jako spis treści, który pozwala użytkownikom szybko przejść do sekcji, które chcą przeczytać.
Innym zastosowaniem kotwic jest tworzenie odnośników do zakładek na twojej witrynie WordPress. Pozwala to na udostępnienie odnośnika do zakładki w mediach społecznościowych lub biuletynach e-mail, dzięki czemu po wczytywaniu strony twoi użytkownicy natychmiast przechodzą do sekcji, którą chcesz, aby zobaczyli.
Dlaczego i kiedy należy używać odnośników z kotwicą?
Przeciętny użytkownik spędza mniej niż kilka sekund, zanim zdecyduje, czy chce zostać, czy opuścić twoją witrynę internetową WordPress. Masz tylko te kilka sekund, aby przekonać użytkowników do pozostania.
Najlepszym sposobem, aby to zrobić, jest pomóc im szybko zobaczyć informacje, których szukają.
Kotwice ułatwiają to, pozwalając użytkownikom pominąć resztę treści i przejść bezpośrednio do części, która ich interesuje. Poprawia to komfort użytkowania i pomaga zdobyć nowych klientów/czytelników.
Odnośniki kotwic są również świetne dla WordPress SEO. Google może wyświetlać kilka linków kotwic w wynikach wyszukiwania jako odnośnik przeskakujący.
Udowodniono, że zwiększa to współczynnik klikalności w wynikach wyszukiwania. Innymi słowy, uzyskujesz większy ruch na swojej witrynie internetowej.
Jeśli utworzysz spis treści za pomocą odnośników z kotwicą, Google może również wyświetlać nagłówki w wyróżnionych fragmentach kodu.
Powiedziawszy to, przyjrzyjmy się, jak łatwo dodać odnośniki kotwicy w WordPress. Poniżej znajduje się lista wszystkich tematów, które omówimy w tym przewodniku.
Kliknij dowolny z poniższych odnośników z kotwicą, a zostaniesz przeniesiony do konkretnej sekcji:
Jak ręcznie dodać odnośniki kotwic w WordPressie
Jeśli chcesz tylko dodać kilka odnośników do kotwic lub zakładek w twoim artykule, możesz to łatwo zrobić ręcznie.
Zasadniczo, aby tekst kotwicy działał zgodnie z przeznaczeniem, należy dodać dwie rzeczy:
- Utwórz odnośnik ze znakiem # przed tekstem kotwicy.
- Dodaj atrybut
identyfikatorado tekstu, do którego ma zostać przeniesiony użytkownik.
Zacznijmy od części dotyczącej odnośników kotwic.
Krok 1. Tworzenie odnośnika z kotwicą
Najpierw należy edytować lub utworzyć nowy wpis lub stronę. Następnie zaznacz tekst, który chcesz odnośnikiem, a następnie kliknij przycisk wstaw odnośnik w edytorze bloków WordPress.
Spowoduje to wyświetlenie wyskakującego okienka „wstaw link”, w którym zwykle dodajesz adres URL lub szukasz wpisu lub strony, do której chcesz umieścić odnośnik.
Jednak w przypadku odnośnika kotwicy wystarczy użyć # jako przedrostka zamiast HTTP. Następnie wpisz słowa kluczowe dla sekcji, do której użytkownik ma przejść.
Następnie kliknij przycisk wpisz, aby utworzyć odnośnik. Nie będzie on jednak jeszcze nigdzie dostępny. Identyfikator trzeba będzie utworzyć w następnym kroku.
Kilka pomocnych wskazówek dotyczących wyboru tekstu, który będzie twoją kotwicą # odnośnika:
- Używaj słów kluczowych związanych z sekcją, do której umieszczasz odnośnik.
- Twoja kotwica nie powinna być zbyt długa lub skomplikowana.
- Użyj myślników, aby oddzielić słowa i uczynić je bardziej czytelnymi.
- Możesz użyć wielkich liter w tekście kotwicy, aby uczynić go bardziej czytelnym. Na przykład:
#Best-Coffee-Shops-New-York.
Po wybraniu odpowiedniego tekstu odnośnika, nadszedł czas na zakotwiczenie go w obszarze, sekcji lub tekście na stronie, który ma być wyświetlany po kliknięciu przez użytkowników na odnośnik.
Krok 2. Dodaj identyfikator do odnośnika do sekcji
W edytorze treści przewiń w dół do sekcji, do której użytkownik ma przejść po kliknięciu odnośnika kotwicy. Zazwyczaj jest to nagłówek nowej sekcji.
Następnie wystarczy wybrać blok. Następnie w ustawieniach bloku w lewym panelu kliknij kartę „Zaawansowane”, aby ją rozwinąć.
Następnie należy dodać ten sam tekst, który został dodany jako odnośnik kotwicy w polu „Kotwica HTML”.
Upewnij się, że dodajesz tekst bez prefiksu #.
Możesz teraz zapisać swój wpis i zobaczyć twój odnośnik kotwicy w działaniu, klikając kartę podglądu.
Co zrobić, jeśli sekcja, którą chcesz wyświetlić, nie jest nagłówkiem, ale zwykłym akapitem lub innym blokiem?
W takim przypadku należy kliknąć menu z trzema kropkami w ustawieniach bloku i wybrać opcję „Edytuj jako HTML”.
Umożliwi to edycję kodu HTML dla tego konkretnego bloku. Musisz wybrać tagi HTML dla elementu, na który chcesz wskazać. Na przykład <p>, jeśli jest to akapit lub <table>, jeśli jest to blok tabeli itd.
Teraz musisz dodać twoją kotwicę jako identyfikator do tego tagu, tak jak w poniższym kodzie:
<p id="best-coffee-shops-manhattan">
Następnie wystarczy ponownie kliknąć przycisk „Edytuj wizualnie”, a twój odnośnik kotwicy przekieruje użytkownika do tego bloku po kliknięciu.
Jak ręcznie dodać odnośnik kotwicy w edytorze klasycznym?
Jeśli nadal korzystasz ze starszego klasycznego edytora dla WordPressa, oto jak możesz dodać odnośnik kotwicy.
Krok 1. Utwórz odnośnik kotwicy
Najpierw musisz edytować lub utworzyć nowy wpis lub stronę. Następnie zaznacz tekst, który chcesz zmienić w odnośnik kotwicy i kliknij przycisk „Wstaw odnośnik”.
Następnie należy dodać twoją kotwicę odnośnika z prefiksem #, po którym następuje uproszczona nazwa, której chcesz użyć dla odnośnika.
Krok 2. Dodaj identyfikator do odnośnika do sekcji
Następnym krokiem jest wskazanie przeglądarkom sekcji, którą chcesz wyświetlić, gdy użytkownicy klikną na twoją kotwicę odnośnika.
W tym celu należy przełączyć się do trybu „Tekst” w klasycznym edytorze. Następnie przewiń w dół do sekcji, do której chcesz utworzyć odnośnik.
Teraz zlokalizuj tag HTML, który chcesz namierzyć. Na przykład <h2>, <h3>, <p> itd.
Musisz dodać do niego atrybut identyfikatora z uproszczoną nazwą twojej kotwicy bez przedrostka #, tak jak poniżej:
<h2 id="best-coffee-shops-new-york">
Możesz teraz zapisać zmiany i kliknąć przycisk podglądu, aby zobaczyć twój odnośnik w działaniu.
Jak ręcznie dodać odnośniki kotwic w HTML?
Jeśli jesteś przyzwyczajony do pisania w trybie tekstowym starego edytora klasycznego w WordPressie, oto jak ręcznie utworzyć odnośnik kotwicy w HTML.
Najpierw należy utworzyć odnośnik kotwicy z prefiksem # przy użyciu zwykłego tagu <a href="">, jak poniżej:
<a href="#best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</a>
Następnie należy przewinąć w dół do sekcji, która ma być wyświetlana po kliknięciu odnośnika przez użytkownika.
Zazwyczaj sekcja ta jest nagłówkiem, ale może to być dowolny inny element HTML lub nawet zwykły tag <p> akapitu.
Musisz dodać atrybut ID do tagu HTML, a następnie dodać uproszczoną nazwę odnośnika kotwicy bez przedrostka #.
<h2 id="best-coffee-shops-manhattan">Best Coffee Shops in Manhattan</h2>
Możesz teraz zapisać zmiany i wyświetlić podgląd witryny internetowej, aby przetestować odnośnik kotwicy.
Jak automatycznie dodawać nagłówki jako odnośniki do kotwic w WordPressie (zalecane)
Najlepszym sposobem na automatyczne dodawanie odnośników anchor w WordPressie jest użycie wtyczki All in One SEO (AIOSEO). Ta metoda jest odpowiednia dla użytkowników, którzy regularnie publikują długie artykuły i potrzebują stworzyć spis treści z odnośnikami kotwic.
AIOSEO to najlepsza wtyczka SEO dla WordPressa, która posiada wbudowany blok WordPress do dodawania spisu treści.
W tym poradniku użyjemy darmowej wersji AIOSEO Lite, ponieważ zawiera ona blok spisu treści. Istnieje również wersja AIOSEO Pro, która zawiera więcej funkcji pomagających uzyskać lepszą pozycję w wyszukiwarkach.
Pierwszą rzeczą, którą musisz zrobić, jest zainstalowanie i włączanie wtyczki AIOSEO. Aby uzyskać więcej informacji, zobacz nasz przewodnik krok po kroku, jak zainstalować wtyczkę WordPress.
Po włączaniu pojawi się kreator konfiguracji. Wystarczy kliknąć przycisk „Rozpocznijmy” i postępować zgodnie z instrukcjami wyświetlanymi na ekranie.
Aby uzyskać więcej informacji, zapoznaj się z naszym przewodnikiem na temat konfiguracji All in One SEO dla WordPress.
Następnie możesz utworzyć lub edytować nowy wpis lub stronę, na której chcesz dodać odnośniki kotwic. Po przejściu do edytora treści wystarczy kliknąć przycisk „+” i dodać blok „AIOSEO – Spis treści”.
Wtyczka automatycznie wykryje różne nagłówki na twojej stronie i wyświetli je w spisie treści.
Każdy odnośnik kotwicy w bloku można dodatkowo dostosować do własnych potrzeb. Na przykład, panel ustawień po prawej stronie oferuje opcję zmiany „Stylu listy” z punktorów na liczby.
Ponadto można zmieniać nazwy nagłówków, zmieniać ich kolejność w bloku spisu treści i ukrywać określone nagłówki.
Możesz teraz zapisać zmiany i wyświetlić podgląd twojego artykułu. Wtyczka automatycznie wyświetli listę odnośników kotwic jako twój spis treści.
Aby uzyskać bardziej szczegółowe instrukcje, zapoznaj się z naszym artykułem na temat dodawania spisu treści w WordPressie.
Mamy nadzieję, że ten artykuł pomógł ci dowiedzieć się, jak łatwo dodawać odnośniki kotwic w WordPressie. Możesz również zapoznać się z naszymi wskazówkami, jak prawidłowo zoptymalizować twoje wpisy na blogu pod kątem SEO oraz z naszą listą najlepszych wtyczek schema markup.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
Dennis Muthomi
I recently saw a micro SaaS website that had anchor links in their navigation menu. When I clicked on the menu items, instead of going to a new page, it simply scrolled the current page to a specific section.
I think its a clever way of using anchorlinks on nav bars to keep a user on that same page.
Dayo Olobayo
Thanks for this. I also think proper use of anchor links can help in the internal linking strategy of our website. By linking to different sections within the same page or to related content on other pages, we can keep visitors engaged longer and help distribute link equity throughout the site.
Jiří Vaněk
Can I ask, I have several items in the menu where a link with # at the end is set. It’s like this on purpose. I will give an example. In the menu there is an item price list with # which leads nowhere. Only after hovering the mouse will the menu expand, which leads to individual price lists. Google search console is bothered by this practice, because the link does not lead anywhere. Can it be solved somehow?
WPBeginner Support
For that you could look to create a pricing page that links to the subpages in your menu.
Administrator
Jiří Vaněk
That is, instead of #, which leads nowhere, create at least some informative page with some text. Ok, that sounds like a very good yet simple and quick solution. Thanks. I didn’t expect my solution to bother Google as an inactive link.
Pavlína Radochová
Hello, thank you for the post.
I would like to ask you for help: how can I make a html anchor to the page title?
WPBeginner Support
Most page titles should be at the top of the page so unless your theme is placing it elsewhere you should be able to link directly to a page to achieve what you’re wanting without needing an anchor link.
Administrator
Ahmed Abo Rwash
Hello, Dears
I need your help as I made one item from my navigation menu as anchor link, and it works with me only on my home page, but if I browse any other page and try to click this item in the navigation menu, to transfer me to the same area at the home page it’s didn’t work so how can I fix that
WPBeginner Support
If you want the anchor link to work on other pages then you would want to ensure your menu link has the entire URL from https to the end and that should solve this issue.
Administrator
Bushra Muzaffar
Helpful… the new block editor in WordPress has 'advanced’ tab in the right hand side bar
WPBeginner Support
Glad you found our article helpful!
Administrator
Jennifer
Thank you!! Worked perfectly
WPBeginner Support
Glad our guide was helpful!
Administrator
Jo
Not working for me – trying to link to a sidebar widget from another page and this is driving me up the wall
WPBeginner Support
For that issue, when the link is on another page then you would need to put the entire URL for the other page including the #anchor at the end for it to work.
Administrator
Chalvonia Bock
Thank you. after a long struggle and searching for help I got it right after following these instructions.
WPBeginner Support
Glack our guide was helpful
Administrator
Stephen Muiruri
Very useful article. I am intending to include lengthier content to my blog and anchor links will make navigation and usability more efficient. Thank you very much.
WPBeginner Support
Glad our guide was helpful
Administrator
Nico
What an awesome, comprehensive article, thanks!
WPBeginner Support
Glad you found our guide helpful
Administrator
Megan
How do I add an Anchor link from a button to a heading on the same page please?
WPBeginner Support
You may need to use the manual method from this guide for that.
Administrator
Rohit Mehta
Huge help, thank you!
WPBeginner Support
Glad our guide was helpful
Administrator
Robert
Good presentation. I recommend however to suggest a HOME button at the end of each internally linked paragraph.
WPBeginner Support
That is a personal preference but thank you for sharing your recommendation
Administrator
maddy schafer
Super helpful, thank you. Enabled me to code anchor links easily.
WPBeginner Support
Glad our guide was helpful
Administrator
Francesco
HI . The post is very good. How can i create the link from page to another page with anchor? I would like to create the link to another specific part of page.
WPBeginner Support
You would link to the page with the anchor links on it and add the # with the id to the end of the url
Administrator
Sameer
Hi, thank you for this tutorial.
I have a question please. On my homepage I have a few anchors such as about me and contact me. These anchors are on my menu header (using WordPress header).
The issue I’m having is on the mobile website, on the home page the user opens the menu and will select and anchor which basically scrolls down on the same page, but the menu bar remains open.
How do I get the menu bar to collapse on click of an anchor?
Thanks.
WPBeginner Support
You would want to reach out to the support for your current theme for ensuring the menu closes properly.
Administrator
Don Johnson
Where does it say anywhere how to get to the content editor?
WPBeginner Support
You would be able to edit your content when creating or editing a post or page
Administrator
NanPad
I have three anchor links at the top of my page. Once the viewer has clicked on anchor link #1 — and been taken to the place on the page where the link points–, how does the viewer get back to the top, in order to click on anchor links #2 and #3?
WPBeginner Support
That would require custom JavaScript or a plugin to add that to your site.
Administrator
Gopal
Very helpful post
WPBeginner Support
Thank you
Administrator
Diane
This does NOT seem to address the option of linking from one page to an anchor in another page. Is that possible in WordPress?
WPBeginner Support
You can use this guide and then use the anchor link for a specific section on a page anywhere on the web.
Administrator
John
Pretty good article but you left out the step needed to place anchor on a DIFFERENT page! Very important.
WPBeginner Support
You can follow these steps and even if the link is on a different page it should still work.
Administrator
Okila Jaames
Thank you guys, for this post. I am learning every day since I found this platform.
WPBeginner Support
You’re welcome, glad you found our content helpful
Administrator
Sheila
What are these blocks that you speak of? Couldn’t follow this tutorial.
WPBeginner Support
For this tutorial, we are using the Gutenberg/block editor. From the sound of your question, you are likely using the classic editor.
Administrator
Amos Struck
very useful info. It would be good if you can also explain using a video
WPBeginner Support
We will look into creating a video as we are able
Administrator