آموزش ایجاد متاتگ در phoenix

سئو
متا-تگ

#1

با درود خدمت شما . متا تگ ها وضایف زیادی در یک صفحه می توانند داشته باشند از جمله این فراداده ها یا داده های اطلاعاتی می تواند در مبحث سئو استفاده شود و همینطور ارتباط صفحه با یک شبکه اجتماعی یا همینطور پویا سازی یک صفحه که برای اطلاعات بیشتر می تونید به گوگل وب مستر مراجعه فرمایید یا همینطور برای درک بهتر سئو آموزش فارسی بنده را از لینک زیر دنبال کنید

قبل از آموزش دادن این بخش باید به این نکته اشاره کنم که برای پیاده سازی متا تگ ها چندین رویکرد فکری وجود دارد و همینطور این رویکرد می تواند بر اساس خلاقیت و نیاز شما باشد صرفا اینکه شما مجبور به پیاده سازی این موضوع به روشی که در ادامه آموزش داده خواهد شد , نیستید.

شما می توانید در لینک های زیر چندین راه حل را پیدا کنید :

سورس این آموزش بر اساس آموزش زیر می باشد
https://www.alexfilatov.com/2016/06/30/add-facebook-open-graph-tags-to-phoenix-framework-web-page/

مرحله اول:

به مسیر views/layout_view.ex بروید و خطوط زیر را در آن قرار بدهید .

  def ogtags(assigns) do
      if assigns[:ogtags] do
        for {key, value} <- assigns[:ogtags] do
            raw("\t<meta property=\"#{key}\" content=\"#{value}\">\n")
        end
      end
  end

  def metatags(assigns) do
      if assigns[:metatags] do
        for {key, value} <- assigns[:metatags] do
            raw("\t<meta name=\"#{key}\" content=\"#{value}\">\n")
        end
      end
  end

این view در حقیقت روی همه ویو ها اشتراک گذاری شده است و جلوی تکرار این کد های بالا را در هر view را می گیرد

در بالا شما دو تابع ایجاد کردید که یکی مخصوص متاتگ هاست و یکی هم مخصوص تگ های og مربوط به فیسبوک می باشد یا همان اپن گراف

مرحله دوم:

به فایل layout/app.html.eex بروید و متا هایی که در آن به صورت فیکس قرار داده شده را پاک کنید و دو خط زیر را یا جدا یا در یک بلاک قرار بدهید

    <%= metatags(assigns) %>
    
    <%= ogtags(assigns) %>

من برای درک بهتر جدا کردم تا خودم و افرادی که با آن ها در آن وب سایت در حال کار کردنم راحت تر بتوانند متوجه این موضوع شوند لازم به ذکر هست شما حتی می توانید در این بخش if نیز قرار بدهید ولی من در خود view این کارو کردم به صورت مثال

if @meta_attrs, do: meta_tags(@meta_attrs)

حال شما هر متایی که بخواهید می توانید وارد head قالب خودتان بکنید . با این کار شما حتی می توانید فانکشن های پویا تر با شرط های بیشتر بسازید

مرحله سوم:

این آخرین مرحله می باشد که بر اساس خلاقیت شما شکل می گیرد به عنوان مثال می توانید

با توضیحات بالا که در پست دیگیری داده شده عمل کنید یا می توانید دو تابع بسازید و هر صورتی که کد های شما تمیز تر و بهینه تر خواهد بود ولی من در یک فانکشن برای نمایش بهتر برای شما در اینجا قرار می دهد .

این مرحله شما می آیید کلید متا ها و همینطور کانتنت آن ها را مشخص می کنید. این بخش دقیقا باید در تابع اکشن شما قرار بگیرید و باید اسم متغییری که می خواهید به view بفرستید هم اسم مرحله دوم باشد .

  def index(conn, _params) do
    ogtags = %{
        "fb:app_id": "430839153628230",
        "og:type": "article",
        "og:site_name": "InstaDreams",
        "og:title": "article",
        "og:description": "article",
    }

    metatags = %{
        "description": "430839153628230",
        "content": "article"
    }
    render(conn, "index.html", ogtags: ogtags, metatags: metatags)
  end

با تشکر
شهریار

این پست به صورت ویکی می باشد در صورتی که مشکلی یا پیشنهادی دارید لطفا پست را ویرایش نمایید