# SEO

#### SEO Setup in Fast Phoenix

Search Engine Optimization (SEO) is a critical aspect of making sure your application gets the visibility it deserves on search engines. Fast Phoenix comes with a simple yet powerful SEO setup to help you optimize your landing page and other important content. Currently, the SEO setup is centralized in a dedicated `seo.ex` file, where you can manage the SEO title, description, and other metadata for your landing page.

***

**Step 1: The `seo.ex` File**

In Fast Phoenix, SEO metadata is stored in the `seo.ex` file, which provides a centralized place to manage your SEO tags. By default, this file contains the following configuration:

```elixir
defmodule PhxSaas.Seo do
  def title, do: "Fast Phoenix - Build Faster with Elixir and Phoenix"
  def description, do: "Fast Phoenix is a boilerplate for the Phoenix Framework, helping you rapidly develop your web applications with powerful features and seamless integrations."
  def keywords, do: "Phoenix, Elixir, boilerplate, web development, SaaS"
  def author, do: "Your Name or Company"
  def og_image, do: "https://yourdomain.com/images/og-image.png"
  def twitter_card, do: "summary_large_image"
end
```

You can customize this file to fit your app’s SEO needs. Below is a breakdown of the key metadata elements:

* **title**: This will be the title tag displayed in search results and the browser’s tab.
* **description**: This is the meta description tag that will be displayed in search results beneath your title.
* **keywords**: The keywords meta tag is used to provide search engines with relevant keywords for your page.
* **author**: The author meta tag helps indicate the creator of the content.
* **og\_image**: This is the Open Graph image, used for social media sharing (like Facebook).
* **twitter\_card**: This tag defines how your content appears on Twitter when shared.

***

***

**Step 2: Customizing SEO for Specific Pages**

For pages beyond the landing page, you can define custom SEO values. In the controller for each page, you can override the default `title`, `description`, and other meta tags:

```elixir
defmodule PhxSaasWeb.Page do
  use PhxSaasWeb, :live_view

  def mount(_params, _session, socket) do
    {:ok,
    socket
    |> assign(:title, "Welcome to Fast Phoenix")
    |> assign(:description, "Start building your web applications with Fast Phoenix, a powerful Phoenix boilerplate.")}
  end
end
```

Now, when the `index.html.eex` page is rendered, it will use the overridden SEO values.

***

**Step 3: Advanced SEO Optimization (Optional)**

1. **Adding Structured Data (JSON-LD)**\
   Structured data helps search engines understand your content better. You can add JSON-LD structured data to your pages for things like product information, events, or organization details.

   Example:

   ```elixir
   <script type="application/ld+json">
     {
       "@context": "https://schema.org",
       "@type": "WebPage",
       "name": <%= assigns[:title] || PhxSaas.Seo.title() %>,
       "description": <%= assigns[:description] || PhxSaas.Seo.description() %>,
       "author": <%= assigns[:author] || PhxSaas.Seo.author() %>
     }
   </script>
   ```
2. **Open Graph Tags**\
   Open Graph tags help improve the visibility of your content on social media platforms like Facebook and LinkedIn. These can be easily added to the `<head>` section, as shown earlier.

***

**Step 4: Testing SEO**

After setting up your SEO metadata, you can use tools like Google’s Mobile-Friendly Test or Google Search Console to check how your site performs in search engines.

We also like to use Semrush to audit our sites.

You can also test your Open Graph and Twitter Card metadata with:

* [Facebook Sharing Debugger](https://developers.facebook.com/tools/debug/)
* [Twitter Card Validator](https://cards-dev.twitter.com/validator)
* [Semrush](https://semrush.com)

***

With Fast Phoenix’s SEO setup, optimizing your web app for search engines is easy and flexible. Customize the metadata, adjust it on a page-by-page basis, and ensure your app is ready for higher search rankings and better visibility across social media platforms. 🚀


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.fastphoenix.pro/features/seo.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.
