Internal Linking in HTML for Shopify: What Merchants Need to Know Before Editing Content
Learn the exact HTML behind internal links, how Shopify URLs behave, which attributes help or hurt, and how to edit product, collection, page, blog, and Liquid content without creating broken, inaccessible, or confusing paths.
How do internal links work in HTML?
An internal link uses an HTML anchor element to send a visitor from one page on your Shopify store to another page on the same domain. The simplest form is <a href="/pages/example">descriptive anchor text</a>. The href attribute identifies the destination, while the visible anchor text explains what the visitor will find. For SEO, usability, and accessibility, the link should point directly to a live public URL, use wording that accurately describes the destination, and remain understandable without vague phrases such as “click here.”
Shopify creates many links automatically through menus, product cards, collection grids, breadcrumbs, related-product modules, search results, and theme sections. Merchants still edit links manually in product descriptions, collection copy, blog articles, custom pages, app-generated content, and custom Liquid. That is where a small HTML mistake can create a broken path, an unexpected redirect, a giant clickable paragraph, an inaccessible control, or a link to an admin preview rather than the public storefront.
Internal linking in HTML is not only a coding topic. It is a store-architecture decision. Every link tells shoppers what to do next and helps search systems understand how pages relate. A well-placed link can connect a guide to a collection, a product to its parent category, a comparison article to an app page, or an audit guide to a service page. A poorly placed link can send visitors to the wrong intent, strengthen duplicate pages, or bury the most valuable destination behind unnecessary hops.
href should point to the final public URL a visitor is supposed to reach.<a> element creates dependable navigation for browsers, crawlers, keyboards, and assistive technology.The anatomy of a Shopify HTML link
<a href="/blogs/news/shopify-seo-guide">read the Shopify SEO guide</a>This example contains four parts. The opening <a starts the anchor element. The href attribute stores the destination. The words between the opening and closing tags are the clickable anchor text. The closing </a> ends the link. When the closing tag is missing, the browser may treat everything that follows as part of the link, making headings, paragraphs, or images unexpectedly clickable.
The destination is more important than the syntax alone
Correct syntax can still create a bad internal link. A perfectly formed anchor that points to an old handle, a filtered collection URL, a deleted product, or a theme preview is technically valid but strategically wrong. Before editing HTML, decide which page should receive the link and confirm that it is the preferred final destination.
The surrounding sentence supplies context
Search systems and users do not evaluate anchor text in isolation. The sentence around the link explains why the destination matters. “Review the complete Shopify internal linking audit before changing sitewide navigation” gives more useful context than a standalone “Learn more” link. The link should complete the reader’s current task rather than interrupt it.
Ordinary anchors are the safest default
A standard anchor is understandable to browsers, screen readers, keyboard users, analytics systems, and crawlers. It can be styled as text, a card, or a button without changing its navigational meaning. Use more complex JavaScript behavior only when the experience genuinely requires it.
Create content that already has a linking plan
Build product, collection, and blog content around a clear target page, descriptive anchors, and reviewed next steps instead of adding random links after publication.
View SEO Content Generator on Shopify Visit the Shopify SEO Learning HubShopify URL formats merchants need to understand
Root-relative internal URLs
<a href="/pages/shopify-seo-audit">request a Shopify SEO audit</a>A root-relative URL begins with a forward slash and omits the protocol and domain. It is usually a clean choice for links inside Shopify content because it stays on the current domain and remains portable if the store’s primary domain changes. The leading slash matters. A path such as pages/shopify-seo-audit may be interpreted relative to the current page and can create an incorrect nested URL.
Absolute internal URLs
<a href="https://seocontentgeneration.com/pages/shopify-seo-audit">request a Shopify SEO audit</a>An absolute URL includes the protocol and domain. It works when it uses the preferred HTTPS domain and final path. It is useful when a full URL is required by an external system, email, feed, or embedded application. Inside ordinary Shopify content, a root-relative URL is often easier to maintain.
Common Shopify public paths
| Page type | Typical public path | Common use | Check before linking |
|---|---|---|---|
| Product | /products/product-handle |
Send shoppers to one product | Product is active, published, and the handle is current |
| Collection | /collections/collection-handle |
Send shoppers to a category or product group | Collection is public and matches the anchor intent |
| Blog article | /blogs/news/article-handle |
Continue education or comparison | Correct blog handle and article handle are used |
| Page | /pages/page-handle |
Link to services, audits, contact, or resources | Page is published and not a duplicate |
Collection-context product URLs
Shopify themes may generate product links that include a collection path, such as /collections/example/products/product-handle. These routes can be useful for shopper context or breadcrumbs, but editorial links should usually point to the preferred product destination your store consistently uses. Do not mix several paths to the same product without understanding how the theme and canonical setup behave.
Query parameters and filtered URLs
Links can include parameters after a question mark, such as filters, tracking values, variant selections, or search terms. A parameterized URL can be useful for a temporary view, but it may be a poor editorial destination. Before linking to one, ask whether the visitor should land on the stable canonical page or on a specific filtered state. Product variants may need a selected option; a blog link to a collection usually does not need campaign tracking parameters embedded permanently in the article.
Preview, admin, and editor URLs
Never copy the address from the Shopify admin editor and assume it is a public storefront URL. Admin links, theme previews, and editor routes may work only for logged-in staff or may expire. Open the public storefront destination, copy the clean URL, and test it in a private browser window when access is uncertain.
HTML link attributes explained for Shopify merchants
href: the required destination
The href is the core attribute for navigation. Empty values, placeholder hashes, malformed paths, and JavaScript pseudo-links can create confusing behavior. For a normal page-to-page link, provide a valid public path. A fragment such as #faq is appropriate only when it intentionally moves the visitor to an element with the matching ID on the same page.
target="_blank": open a new tab
Most internal links should open in the same tab. This follows normal navigation expectations, keeps the back button useful, and avoids filling a mobile browser with tabs. A new tab can be reasonable when a visitor must keep a form, report, or workflow open while checking another page, but it should be the exception.
<a href="/pages/example" target="_blank" rel="noopener">open the example in a new tab</a>When a new tab is necessary, rel="noopener" is a sensible safety addition. Do not add target="_blank" to every link simply because it appears to keep people on the original page. Users should control ordinary navigation.
rel="nofollow": usually unnecessary internally
Standard internal links normally should not be nofollowed. If a page is useful enough to recommend to visitors, the link should generally function normally. Nofollow is not a substitute for deciding whether a page should be indexed, canonicalized, consolidated, or removed. Manage those decisions at the page level and through the site architecture.
aria-label: supplement, not replacement
An aria-label can clarify a link when the visible text is extremely short or when several identical controls need distinct accessible names. It should not be used to hide keyword-heavy text from visual users. The visible anchor should already make sense whenever possible. Accessible naming must describe the actual action or destination.
title: optional and often unnecessary
The title attribute may show a tooltip on some desktop browsers, but it is not a dependable replacement for clear visible text. Mobile users may never see it, and assistive technologies handle it inconsistently. Write descriptive anchor text instead of placing essential meaning inside a title attribute.
download: for downloadable files, not regular pages
The download attribute suggests that a browser download a linked resource. Use it only when the destination is a file intended for download and when the hosting setup supports it. Do not attach it to internal pages, product URLs, or ordinary documents that should open in the browser.
Image links and alt text
<a href="/pages/shopify-seo-audit">
<img src="audit-preview.jpg" alt="Preview of the Shopify SEO audit workflow">
</a>When an image is the only linked content, the image’s alt text helps communicate the destination or purpose. Describe the image and its function accurately. Do not stuff keywords or repeat nearby text mechanically. When a card contains an image, heading, and description, one well-structured link can provide a cleaner experience than several duplicate links to the same destination.
How to write anchor text that helps users and SEO
Descriptive anchor text tells visitors what they will receive after clicking. It also gives search systems context about the relationship between the source and destination. The wording does not need to repeat the exact target keyword every time. Natural variations usually produce clearer writing and avoid mechanical over-optimization.
Match the anchor to the destination’s intent
A category-level anchor should usually point to a collection, not a single product. A “Shopify technical SEO services” anchor should point to a relevant service page, not a general homepage. A “how to audit internal links” anchor should point to a guide or tool that answers that task. Mismatched intent creates disappointment even when the linked page is related.
Keep the clickable phrase focused
Do not make entire paragraphs clickable. A concise phrase is easier to scan, activate, and understand. Extremely short anchors such as “here” lack context, while extremely long anchors can overwhelm the sentence. Select the words that best name the destination or next action.
Use variation without creating ambiguity
Several natural anchors can point to one page: “internal linking audit,” “audit your Shopify internal links,” and “find orphan pages and redirecting links.” Variation is useful when it reflects the surrounding sentence. However, similar anchors should not point to competing pages unless the difference is clear. Maintain a topic map so the team knows which URL owns each broad intent.
Think about commercial progression
An informational article should not force every reader directly into a sales page. Use a sequence that matches readiness. A beginner guide may link to a checklist, then an audit, then an app or service. A comparison article may link more directly to features or pricing. Internal links should form a journey, not a collection of isolated SEO phrases.
Turn good anchor text into a repeatable workflow
Plan the destination, anchor, CTA, and related resources while creating each Shopify article so new content strengthens the correct product, collection, app, or service page.
Explore the Shopify app Read the Internal Linking AuditLinks versus buttons versus JavaScript navigation
Use an anchor for navigation
<a href="/pages/shopify-seo-audit" class="button">Request a Shopify SEO audit</a>If clicking the control takes the visitor to another URL, an anchor is usually the correct semantic element. CSS can make the anchor look like a premium button without changing its meaning. This preserves keyboard behavior, link previews, open-in-new-tab controls, and normal browser navigation.
Use a button for an action on the current page
A real <button> is appropriate for submitting a form, opening a modal, expanding an accordion, changing a filter, adding an item to the cart, or triggering another action without navigating to a new page. Do not use a button merely because the element is visually shaped like one.
Avoid JavaScript-only links for important architecture
A clickable container built only with an onclick handler may work for a mouse user but can be harder for keyboards, assistive technology, crawlers, and editors to understand. Important internal pathways should exist as real anchors. JavaScript can enhance the experience, but it should not be the only route to a priority page.
Do not nest links
An anchor cannot safely contain another anchor. This often happens when a whole card is wrapped in a link and the card also contains a linked heading or button. The browser may repair the markup unpredictably. Use one clear link for the card or restructure the elements so interactive controls are not nested.
How to add and edit links safely in Shopify content
Use the rich-text editor for ordinary links
The rich-text editor is the safest option for most merchants. Highlight the exact anchor text, choose the link control, enter the final public URL or root-relative path, and save. Then open the storefront page and test the link on desktop and mobile. Confirm that it reaches the intended destination and does not pass through an avoidable redirect.
Choose the destination first
Decide whether the reader needs a product, collection, guide, audit, service, app listing, or another page. Verify that this is the preferred URL for the intent.
Write the sentence before inserting the link
Create a sentence that naturally explains the next step. Highlight only the words that name the destination or action.
Paste a clean public path
Use the final public URL. Remove preview domains, admin routes, unnecessary tracking parameters, and old redirected handles.
Save and inspect the rendered page
Do not assume the editor preserved the intended markup. Check spacing, color contrast, focus behavior, mobile tap targets, and whether the link appears inside the correct paragraph or card.
Test the final response
Click the link, confirm the status and destination, use the browser back button, and test important links in a private window. Record the change when it affects a priority page.
When to use HTML mode
HTML mode is useful when you need precise attributes, structured cards, responsive layouts, custom classes, or code examples. It also raises the risk of broken nesting, missing closing tags, duplicate IDs, inline style conflicts, and malformed entities. Export or copy the original content before a large edit so you have a rollback path.
Be careful with code examples inside article HTML
To display an anchor tag as text rather than execute it, escape the angle brackets as < and >. Otherwise, the browser will create a real link instead of showing the example. Place code inside <code> or <pre> elements and test mobile overflow.
Do not paste unsafe styling from another editor
Copying from word processors or visual page builders can bring hidden spans, font declarations, empty anchors, and excessive inline styles. Paste as plain text when possible, then apply clean structure. A scoped CSS wrapper is safer for a premium long-form article than dozens of unrelated style attributes on every sentence.
Internal links in custom Liquid
Custom Liquid is powerful because it can generate links from Shopify objects rather than hard-coded handles. Theme changes can affect the whole store, so test Liquid edits on an unpublished theme and review representative products, collections, pages, and mobile layouts before publishing.
Normal HTML inside Liquid
<a href="/blogs/news/internal-linking-audit-shopify">run an internal linking audit</a>Static HTML is appropriate when the destination is stable and the section is used in a known context. Keep the path clean and document reusable links so old handles are updated everywhere.
Shopify’s link_to filter
{{ 'Read the internal linking audit' | link_to: '/blogs/news/internal-linking-audit-shopify' }}The link_to filter can generate a basic anchor. It is useful for simple output, though normal HTML may be clearer when several attributes, classes, or nested elements are required.
Use object URL properties for dynamic resources
<a href="{{ product.url }}">View {{ product.title | escape }}</a>When a product, collection, article, or page object is already available, use its URL property instead of retyping the handle. This reduces maintenance when handles change and helps templates stay aligned with the resource being rendered. Escape displayed titles or user-controlled text where appropriate.
Link to a selected collection object
{% assign featured_collection = collections['shopify-seo-tools'] %}
{% if featured_collection %}
<a href="{{ featured_collection.url }}">Explore {{ featured_collection.title | escape }}</a>
{% endif %}Check that an object exists before outputting a link. Otherwise, a renamed or removed resource can create an empty destination or broken module. For merchant-configurable sections, a resource picker setting is generally easier to maintain than hard-coded handles.
Do not edit live theme code casually
Article HTML changes affect one article; theme code can affect hundreds of pages. Duplicate the theme, make one focused change, test common templates, compare desktop and mobile, and preserve the previous version. A sitewide internal-link module should also avoid duplicating links already present in navigation or breadcrumbs.
Audit links before scaling them through Liquid
One incorrect reusable destination can create hundreds of broken or redirecting links. Validate the architecture and final URLs before adding a sitewide module.
Run the complete audit workflow Review the Shopify SEO Audit pageHow internal HTML links should work by Shopify page type
Homepage
The homepage should expose primary collections, core app or service pages, a learning hub, and essential trust routes. It should not become a complete sitemap. Seasonal links can rotate, but permanent priorities should not disappear whenever a campaign changes.
Collection pages
Collection copy can link to useful subcollections, selected products, buying guides, comparisons, or related categories. The links should help shoppers choose. Use concise mobile-friendly cards instead of a desktop-style directory. A collection should stay focused on category intent.
Product pages
Product descriptions can link to the most relevant collection, compatibility guidance, size or care information, and selected educational content. Keep the purchase decision central. A long list of unrelated articles can distract shoppers and weaken the page’s focus.
Blog articles
A long guide can link to a pillar page, two or three genuinely related resources, and a commercial next step. The correct number depends on length and intent. Use descriptive anchors throughout the article and avoid repeating one CTA after every section. For deeper implementation, compare the best internal linking tools for Shopify after completing the audit.
Service and app pages
Commercial pages should link to process explanations, proof, FAQs, pricing or plan details, related services, and educational resources that address objections. Supporting articles can link back when the service or app is a reasonable solution, not simply because the page is commercially important.
Learning hubs
A learning hub should organize resources by task, such as keyword research, content creation, technical SEO, on-page optimization, and conversion. It links to the strongest guides, while those guides link back to the hub. This creates a stable pathway for older content as the archive grows.
For every priority destination, confirm that at least one relevant strong page links to it, the anchor accurately describes it, the destination is no more difficult to reach than its business importance justifies, and the page itself provides a clear next step.
A pre-publish HTML link quality-assurance workflow
Use a repeatable review instead of relying on visual inspection alone. A link can look correct while pointing to a redirect, unpublished resource, wrong domain, or parameterized path. The following workflow is suitable for individual articles and for larger content batches.
| Check | What to verify | Failure to avoid |
|---|---|---|
| Intent | The destination answers the promise made by the anchor | Category anchor points to an unrelated product |
| Public status | Destination is published and accessible without staff login | Preview or admin-only link |
| Final URL | Link reaches the final live URL directly | Old handle or redirect chain |
| Anchor clarity | Visible words describe the destination naturally | “Click here” or misleading keyword text |
| Markup | Opening and closing tags are valid and not nested | Large accidental clickable region |
| Attributes | No accidental nofollow or unnecessary new tab | Inconsistent navigation behavior |
| Accessibility | Keyboard focus, readable label, contrast, and tap target | Mouse-only card or vague icon link |
| Mobile | No overflow, overlap, or cramped linked text | Desktop layout that breaks on phones |
| Architecture | Link supports the correct pillar, collection, product, or commercial page | Strengthening a competing duplicate page |
| Tracking | Analytics requirements do not create permanent messy URLs | Unnecessary campaign parameters in evergreen content |
Test more than the first click
Confirm the final destination, page title, and content match the promise. Check the browser back button. Test links inside sticky elements, accordions, cards, and responsive sections. For a new tab, confirm that the behavior is intentional. For a downloadable file, verify that the file exists and has an understandable name.
Re-crawl after a meaningful batch
After updating many articles or templates, run an internal-link crawl. Compare broken links, redirecting links, orphan pages, click depth, and anchor distribution with the previous report. A crawler will not judge strategy perfectly, but it can find technical patterns that manual review misses.
Keep a change log
Record the source URL, destination URL, previous destination if changed, anchor text, reason, date, and owner. A log makes bulk edits reversible and helps explain later traffic or conversion changes. It also prevents different team members from sending the same broad anchor to competing pages.
Common HTML internal-linking mistakes on Shopify
Build stronger Shopify content connections
Use reviewed HTML links, clear architecture, and consistent publishing rules so every new page strengthens a useful commercial or educational destination.
View SEO Content Generator Compare Shopify SEO audit toolsFrequently asked questions
What is the correct HTML for an internal link?
Use a standard anchor element such as <a href="/pages/example">descriptive anchor text</a>. The path should point to a live public destination, and the visible words should explain what the visitor will find.
Should Shopify internal links use relative or absolute URLs?
Root-relative paths are usually clean and practical inside Shopify content. Absolute URLs also work when they use the preferred HTTPS domain. Consistency and a correct final destination matter more than forcing one format everywhere.
Does anchor text matter for internal links?
Yes. Descriptive anchor text improves scanning, accessibility, and contextual understanding. Use natural wording that matches the destination rather than repeating one exact keyword on every page.
Should internal links open in a new tab?
Usually not. Same-tab navigation follows normal expectations and keeps the back button useful. Use a new tab only when preserving the current workflow clearly benefits the visitor.
Should internal links be nofollowed?
Standard internal links normally should not be nofollowed. Link normally to useful pages and manage indexation, canonicalization, consolidation, or removal through the appropriate page-level strategy.
Can a button be used instead of an anchor tag?
Use an anchor when the control navigates to another URL and a button when it performs an action on the current page. An anchor can be styled to look like a button without losing its navigational meaning.
How do I test internal links after editing Shopify HTML?
Open the rendered storefront page, click each important link, verify the final URL and destination content, test desktop and mobile, check keyboard focus, and confirm there is no avoidable redirect or missing page.
Are JavaScript links bad for SEO?
JavaScript navigation can work, but important store architecture should use standard HTML anchors whenever possible. Anchors are more dependable for browsers, crawlers, accessibility, and maintenance.
Can internal links point to collection pages?
Yes. Collection pages are often important commercial hubs and should receive relevant links from products, guides, navigation, learning hubs, and related content when they match category-level intent.
What is the biggest Shopify HTML linking mistake?
One of the most common mistakes is linking to an old, private, preview, or incorrect URL instead of the final public destination. The link may appear functional for staff while creating a poor path for shoppers.
How many internal links should a Shopify page contain?
There is no universal ideal number. Add enough links to support navigation, explain relationships, and provide useful next steps without distracting from the page’s primary task. Relevance and placement matter more than count.
How should a new article be connected after publication?
Add at least one relevant inbound link from an existing page or hub, link the new article to its pillar and useful next steps, test every destination, and record the update. Do not rely only on the blog archive or XML sitemap for discovery.
Editorial note: internal linking supports crawlability, navigation, context, and conversion pathways, but it is one part of a broader Shopify SEO program. Content quality, technical accessibility, search intent, page experience, product availability, and site governance also influence results.