feat: add meta tags for SEO optimization

- Implement meta tags in ArtsController, CitiesController, HomeController, and WeatherArtsController for better SEO.
- Use translation helpers for titles, descriptions, and keywords to improve internationalization support.
- Update default meta tags in ApplicationHelper for consistent site-wide SEO.

These changes enhance the search engine visibility of the application by providing relevant meta information across various pages. Utilizing translation for these fields promotes better support for multiple languages, aligning with localization efforts.

app/controllers/arts_controller.rb

@@ -17,5 +17,10 @@ class ArtsController < ApplicationController
     end
 
     @weather_arts = @weather_arts.page(params[:page]).per(12)
+
+    set_meta_tags(
+      title: t("meta.arts.index.title"),
+      description: t("meta.arts.index.description")
+    )
   end
 end

app/controllers/cities_controller.rb

@@ -46,6 +46,12 @@ class CitiesController < ApplicationController
         )
       }
     end
+
+    set_meta_tags(
+      title: t("meta.cities.index.title"),
+      description: t("meta.cities.index.description"),
+      keywords: t("meta.cities.index.keywords")
+    )
   end
 
   def show
@@ -58,9 +64,9 @@ class CitiesController < ApplicationController
     }
 
     set_meta_tags(
-      title: "#{@city.name}, #{@city&.country&.name}",
+      title: t("meta.cities.show.title", city_name: @city.name, country_name: @city&.country&.name.to_s),
-      description: "Experience #{@city.name}'s weather through AI-generated art. Daily updates of weather conditions visualized through artificial intelligence.",
+      description: t("meta.cities.show.description", city_name: @city.name),
-      keywords: "#{@city.name}, #{@city.country.name}, ai, ai web, ai art, ai weather, weather art, AI visualization",
+      keywords: t("meta.cities.show.keywords", city_name: @city.name, country_name: @city.country&.name.to_s),
       og: {
         image: @city.latest_weather_art&.image&.attached? ? url_for(@city.latest_weather_art.image) : nil
       }

app/controllers/home_controller.rb

@@ -5,9 +5,9 @@ class HomeController < ApplicationController
     # @random_arts = WeatherArt.includes(:city, :image_attachment).random(3)
     # @featured_arts = WeatherArt.includes(:city, :image_attachment).order(created_at: :desc).limit(5)
     set_meta_tags(
-      title: "AI-Generated Weather Art",
+      title: t("meta.home.index.title"),
-      description: "Experience weather through artistic AI visualization. Daily updated weather art for cities worldwide.",
+      description: t("meta.home.index.description"),
-      keywords: "AI weather art, weather visualization, city weather, artificial intelligence"
+      keywords: t("meta.home.index.keywords")
     )
   end
 end

app/controllers/weather_arts_controller.rb

@@ -15,10 +15,20 @@ class WeatherArtsController < ApplicationController
       event_type: "city_view"
     }
 
+    formatted_date = @weather_art.weather_date.strftime(t("date.formats.default"))
+
     set_meta_tags(
-      title: "#{@city.name} Weather Art - #{@weather_art.weather_date.strftime('%B %d, %Y')}",
+      title: t("meta.weather_arts.show.title",
-      description: "#{@city.name}'s weather visualized through AI art. #{@weather_art.description} at #{@weather_art.temperature}°C.",
+               city_name: @city.name,
-      keywords: "#{@city.name}, #{@city.country.name}, ai, ai web, ai art, ai weather, weather art, AI visualization, #{@weather_art.description}",
+               date: formatted_date),
+      description: t("meta.weather_arts.show.description",
+                     city_name: @city.name,
+                     description: @weather_art.description,
+                     temperature: @weather_art.temperature),
+      keywords: t("meta.weather_arts.show.keywords",
+                  city_name: @city.name,
+                  country_name: @city.country.name,
+                  description: @weather_art.description),
       og: {
         image: @weather_art.image.attached? ? url_for(@weather_art.image) : nil
       }

app/helpers/application_helper.rb

@@ -28,24 +28,25 @@ module ApplicationHelper
 
   def default_meta_tags
     {
-      site: "TodayAIWeather",
+      site: t("site_name", default: "TodayAIWeather"),
-      title: "TodayAIWeather",
+      title: t("meta.default.title", default: "TodayAIWeather"),
-      description: "Experience weather through artistic AI visualization. Daily updated weather art for cities worldwide.",
+      description: t("meta.default.description", default: "Experience weather through artistic AI visualization. Daily updated weather art for cities worldwide."),
-      keywords: "AI weather art, weather visualization, city weather, artificial intelligence",
+      keywords: t("meta.default.keywords", default: "AI weather art, weather visualization, city weather, artificial intelligence"),
       separator: "—".html_safe,
       reverse: true,
       og: {
-        site_name: "TodayAIWeather",
+        site_name: t("site_name", default: "TodayAIWeather"),
         type: "website",
-        keywords: "ai, ai web, ai art, ai weather, weather art, AI visualization, today ai weather",
+        keywords: t("meta.default.og.keywords", default: "ai, ai web, ai art, ai weather, weather art, AI visualization, today ai weather"),
         url: request.original_url
       },
-      alternate: {
+      alternate: available_locales_with_urls
-        "en" => url_for(locale: "en"),
-        "zh-CN" => url_for(locale: "zh-CN"),
-        "ja" => url_for(locale: "ja"),
-        "ko" => url_for(locale: "ko")
-      }
     }
   end
+
+  def available_locales_with_urls
+    I18n.available_locales.each_with_object({}) do |locale, hash|
+      hash[locale.to_s] = url_for(locale: locale)
+    end
+  end
 end

config/locales/en.yml

@@ -117,3 +117,37 @@ en:
       default: "%Y-%m-%d"
       short: "%b %d"
       long: "%B %d, %Y"
+
+  site_name: "TodayAIWeather"
+  meta:
+    default:
+      title: "TodayAIWeather"
+      description: "Experience weather through artistic AI visualization. Daily updated weather art for cities worldwide."
+      keywords: "AI weather art, weather visualization, city weather, artificial intelligence"
+      og:
+        keywords: "ai, ai web, ai art, ai weather, weather art, AI visualization, today ai weather"
+
+    home:
+      index:
+        title: "AI-Generated Weather Art"
+        description: "Experience weather through artistic AI visualization. Daily updated weather art for cities worldwide."
+        keywords: "AI weather art, weather visualization, city weather, artificial intelligence"
+    arts:
+      index:
+        title: "Arts Directory"
+        description: "Explore our AI-generated weather art"
+    cities:
+      index:
+        title: "Cities Directory - Weather Art"
+        description: "Explore our collection of cities with AI-generated weather art. Filter by region, country or search for specific locations."
+        keywords: "city weather, AI visualization, weather directory, global cities"
+      show:
+        title: "%{city_name}, %{country_name}"
+        description: "Experience %{city_name}'s weather through AI-generated art. Daily updates of weather conditions visualized through artificial intelligence."
+        keywords: "%{city_name}, %{country_name}, ai, ai web, ai art, ai weather, weather art, AI visualization"
+
+    weather_arts:
+      show:
+        title: "%{city_name} Weather Art - %{date}"
+        description: "%{city_name}'s weather visualized through AI art. %{description} at %{temperature}°C."
+        keywords: "%{city_name}, %{country_name}, ai, ai web, ai art, ai weather, weather art, AI visualization, %{description}"