At a high level, on page SEO refers to the headings and links that make up the overall structure of the page. Headings indicate importance in the document and links connect the web together.
Headings help users understand the structure of a page and what they are going to read in the next paragraphs. They also facilitate the search engine's job of understanding which parts of the page are the most important.
Headings go from 1-6 and Heading 1 tends to be thought of as the most important. It's recommended to use the H1 heading tag in each page. H1 should represent what the page is about and be similar to your title
tag.
function Page() {
return <h1>Your Main Page Heading</h1>;
}
The internet is connected by links. Without links from one website to another, the internet probably wouldn't exist. Websites that receive more links tend to represent websites that are more trusted by users.
Google started this principle with the invention of the PageRank Algorithm.
The PageRank algorithm, at a high level, is an algorithm that goes through every link on a database and scores domains based on how many links they receive (quantity) and from which domains (quality). Lots of links from spam websites most likely have little to no value.
A link from a big national press website, however, is likely very valuable for search engines. This is why links are important and you should always include them both internally between your page, and also externally to other websites. Links always need to use `href` in order to be used for PageRank calculations.
Next.js provides the Link
component that enables client-side transitions between routes. A simple use case would look something like the following:
function NavLink({ href, name }) {
return (
<Link href={href}>
<a>{name}</a>
</Link>
);
}
export default NavLink;
The href
prop is required and will correctly add the link to the anchor tag, which is vital for SEO. When Google crawls a page, it will crawl and follow this link without relying on JavaScript.
However, if the child of Link
is a custom component that wraps an a
tag, you must add passHref
to Link
. This is necessary if you’re using libraries like styled-components
. Without this, the a
tag will not have the href
attribute, which affects your site’s SEO.
How to use passHref
:
import Link from 'next/link';
import styled from 'styled-components';
// This creates a custom component that wraps an <a> tag
const RedLink = styled.a`
color: red;
`;
function NavLink({ href, name }) {
// Must add passHref to Link
return (
<Link href={href} passHref>
<RedLink>{name}</RedLink>
</Link>
);
}
export default NavLink;
If you use ESLint, Next.js has a rule to protect against this happening.