How do Meta tags and Common SEO facts in the app router? | by Tushar Patel | Mar, 2024

meta tags in app routerPage Titles: Each page should have a unique and descriptive title using the component provided by Next.js. Include relevant keywords in the title to improve search engine visibility.// app routerimport Head from ‘next/head’;function MyPage() {return (<>My Page Title

{/* Page content */}

);}export default MyPage;2. Meta Descriptions: Include a concise and compelling meta description for each page, as it may appear in search engine results. While meta descriptions don’t directly impact rankings, they can affect click-through rates.3. Structured Data: Use JSON-LD or other structured data formats to markup your content, helping search engines understand the context of your pages. This can improve the display of rich snippets in search results.import Head from ‘next/head’;function MyPage() {const structuredData = {“@context”: “https://schema.org”,”@type”: “Organization”,”url”: “https://www.example.com”,”name”: “Example Organization”};return (<>

{/* Page content */}

);}export default MyPage;4. Canonical URLs: Specify the canonical URL for each page to indicate the preferred version of the page to search engines, especially for pages with similar or duplicate content.import Head from ‘next/head’;function MyPage() {return (<>

{/* Page content */}

);}export default MyPage;5. Internal Linking: Use internal linking to connect related pages within your site. This helps search engines discover and index your content more efficiently.import Link from ‘next/link’;function MyPage() {return (

);}export default MyPage;6. Image Optimization: Optimize images for size and include descriptive alt text to improve accessibility and provide additional context to search engines.import Image from ‘next/image’;function MyPage() {return (

Description of Image

);}export default MyPage;7. Mobile Responsiveness: Ensure your site is mobile-friendly, as mobile usability is a ranking factor for search engines like Google.8. Page Speed: Improve page speed by optimizing code, using efficient hosting, and leveraging Next.js features like automatic code splitting and image optimization.9. Robots.txt and Sitemap.xml: Use a robots.txt file to control which pages search engines can crawl and index, and submit a sitemap.xml file to help search engines discover and understand your site’s structure.Same as with the pages router, you can create a static or dynamic sitemap robots.txt. Both of them is about creating a file at the root of your project:static (sitemap.xml || robots.txt)dynamic (sitemap.ts || robots.ts)10. Monitor Performance: Regularly monitor your site’s performance using tools like Google Search Console and Google Analytics to identify and address SEO issues.

https://medium.com/@tushar.tmpatel/how-do-meta-tags-and-common-seo-facts-in-the-app-router-defe15a531cd?responsesOpen=true&sortBy=REVERSE_CHRON

Recommended For You