🔍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:

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:

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:

    <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:

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. 🚀

PreviousThemesNextTheme Selector

Last updated