search

html5j / 5jcup-site

0 stars 1 forks source link

各賞のページにOGPの設定が欲しい #60

Closed shumpei closed 10 years ago

ega1979 commented 10 years ago

私の方でOGPのイメージとtitle/description/urlのリストをつくりますね。

shumpei commented 10 years ago

ありがとうございます！！ ちなみに、画像って何を元に作りますか？ スポンサーからもらっている元画像が、OGP推奨サイズに達してないんですよね・・・ 参考: http://web-tan.forum.impressrd.jp/e/2013/10/22/16272 もしかすると、詳細画面のスクリーンショットから作るとかかなあ・・・ その場合はお手伝いします！

2014年4月18日 12:01 ega1979 notifications@github.com:

私の方でOGPのイメージとtitle/description/urlのリストをつくりますね。

— Reply to this email directly or view it on GitHubhttps://github.com/html5j/5jcup-site/issues/60#issuecomment-40783296 .

ega1979 commented 10 years ago

私もサイズ1200pxをどうしようかと思っていました。 aiデータなどがあるものは使っていきますが、 とりあえず、詳細画面のが一番大きかったので、それを使って「5jcup」×「スポンサーロゴ」のレイアウトで サイズある程度大きくなるかなと思います。

shumpei commented 10 years ago

なるほどー、じゃ、ちょっとだけ模索してみてもらえますか？ aiは、ある奴はある・・・ってくらいです。言ってくれれば、スポンサーさんから頂いたものをお渡しできるかも。 ただ、一番手っ取り早いのは詳細画面のスクリーンショット撮っちゃう（ロゴ入りで）のが、でかい画像作る一番の近道かもしれませんね。 こんな感じで。 2014-04-18 18 04 34

ega1979 commented 10 years ago

イメージをつくりました。「5jcup×スポンサー」パターンが一つと各社（団体）のロゴのレギュレーション上「×」をNGのケースがあるかもしれないので「×」なしパターンをつくりました！

いくつかシミュレーターのキャプチャを撮りましたのでご確認ください。 以下格納しています。 http://goo.gl/eULZX0

shumpei commented 10 years ago

@halsk さん、賞の各ページで、別々のOGP画像を設定したいのですが、どうやったら実現が容易でしょうか？ 賞のモデル（Award）にOGP画像を表すプロパティを作って、テンプレートで出す・・・とか考えたのですが、OGPはそもそもトップページで設定し、個別ページがextendsしている構成になっているので、どうしたものか・・

halsk commented 10 years ago

@shumpei トップページテンプレートで、

    {% block 'ogp' %}
    <meta property="og:title" content="HTML5 Japan Cup 2014 | by html5j">
    <meta property="og:type" content="website">
    <meta property="og:description" content="HTML5 Japan Cup（5jCup）。それは、Web技術者とか、デザイナーとか、エンジニアとか、そんな風に呼ばれるぼくらが創る、ぼくらのためのアワードです。">
    <meta property="og:url" content="http://5jcup.org">
    <meta property="og:image" content="https://html5jcup.s3.amazonaws.com/sites/533181e1ce4c14c2dd000002/theme/images/html5JC_ogp.png">
    {% endblock %}

と書いてもらえば、下層ページで同じタグで上書きできます

{% extends 'parent' %}
{% block 'ogp' %}
    <meta property="og:title" content="HTML5 Japan Cup 2014 | by html5j">
    <meta property="og:type" content="website">
    <meta property="og:description" content="{{award.description}}">
    <meta property="og:url" content="{{url}}">
    <meta property="og:image" content="{{award.image.url}}">
{% endblock %}

↑みたいな感じです。

shumpei commented 10 years ago

@halsk さん、ありがとうございます！！

あと、そもそも各章のページに、専用のソーシャルボタンが欲しいですね・・。 OGPの設定を行う際、同時に対応します。

shumpei commented 10 years ago

開発環境上でのテンプレート修正、本番環境へのデータ（OGP画像）投入は完了しました。 本日18:00のリリース後、OGPの設定がうまくいったかどうかテストします。

shumpei commented 10 years ago

なぜか、いいね！ボタンがトップのURLを元に生成されている気がする。設定を見直し。

shumpei commented 10 years ago

Facebook側の問題っぽかったです。 Open Graph Object Debuggerに、賞の詳細ページを一件一件放り込んだら、まともに動くようになり始めました。