在 Next.js 中有效地构建 SEO 和页面格式
<h1 id="在-nextjs-中有效地构建-seo-和页面格式">在 Next.js 中有效地构建 SEO 和页面格式</h1><p><img src="https://qanswer-1251273400.cos.ap-hongkong.myqcloud.com/post_images/eea70a29d9112992a3e3f355a3de5dbd.jpg"></p>
<p>组织 Next.js 应用程序并使用组件。</p>
<p>想象一下，您想使用 Next.js 构建一个应用程序，并且您希望每个页面都有不同的 SEO 策略以及相同的页眉、页脚和导航栏。</p>
<p>你能做到什么？</p>
<p>简单的选择是构建一个在每个页面上重复调用的共享组件。</p>
<p>但是，你可以试试这个</p>
<ul>
<li>
<p>我希望您在阅读本文之前已经开发了 Next.js 应用程序。<br>
如果没有，请访问此页面 https://nextjs.org/docs/getting-started</p>
</li>
<li>
<p>创建两个具有名称的组件 <strong>格式</strong> 和 <strong>SEO设置</strong> 在 src 目录中名为 components 的新文件夹中。</p>
</li>
<li>
<p>这个组件，“ <strong>格式</strong> ,”指的是页面的布局。<br>
在这里，在这种情况下，每个页面的布局将在此流程中导航栏，然后是主要内容，然后是页脚。<br>
而且，我们因此在下面定义它</p>
<p>从“反应”导入 { FC }； 从'../Footer'导入页脚；<br>
从'../Navbar'导入导航栏； const 格式：FC = (props) => {<br>
返回 （<br>
<><br>
<navbar></navbar></p>
<main>{props.children}</main>
<footer>
);
}; 导出默认格式；
</footer></li>
<li>
<p>在 <strong>SEO设置</strong> ，我们实际上是在构建一个通用标签，其中数据作为元和标题标签字段的道具提供。<br>
这样我们就可以利用这个 <strong>SEO设置</strong> 每次我们需要在页面上定义 SEO 相关信息而不是创建一个 <strong>头</strong> 反复标记。</p>
<p>从“下一个/头”导入头； 导出接口元数据 {<br>
标题：字符串；<br>
描述：字符串；<br>
} 常量 SEOSetup: FC<metadata> =（道具）=> {<br>
常量 {<br>
标题，<br>
描述，<br>
} = 道具； 返回 （</metadata></p>
<title>{标题}</title>
);
}; 导出默认的 SEOSetup；
</li>
<li>
<p>最后，在页面上使用它们。这里我们只是用 <strong>格式</strong> 组件并使用我们的自定义设置 SEO <strong>SEO设置</strong> 标签。</p>
<p>从“下一个”导入类型 { NextPage } 从'../components/Format'导入格式；<br>
从“../components/SEOSetup”导入 SEOSetup； 常量主页：NextPage = () => {<br>
返回 （<br>
<format><br>
<seosetup title="这是首页的标题" description="这是主页的描述"></seosetup></format></p>
<div>
这是主页。
</div>
)
} 导出默认主页；
</li>
</ul>
<p>⭐️⭐️结局⭐️️️️️⭐️</p>
<p>我希望你觉得这有帮助。<br>
请在评论中告诉我。<br>
有关更多此类内容，请在 Twitter 上关注我—— @ShubhInTech</p>
<p>版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明</p>
<p>本文链接：https://www.qanswer.top/27090/47231108</p><br><br>
来源：https://www.cnblogs.com/amboke/p/16683485.html
頁:
[1]