Stay Positive プログラミング奮闘記

誰かしらに何気ない気づきを!

Twitterにはてなブログを載せたが、画像が反映されなかった件!

https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTkjtyToAEr-7dtz5pV0NKgzk_iwMvrZiUVIxjuFcFMJSTFi1sGCQ

こんばんは!

 

最近、ブロガーが集まるコミュニティを作ったものの、地域がバラバラでオフ会を開催できるかどうかよく分かってないですが・・・

もっと詳しく知りたい方は・・・

 

とりあえず、先に進みます!

についてまとめていきます。

 

Twitterに画像が載らない・・・

今まで、はてなブログで書いた記事は必ずTwitterに拡散しているんですが、

ある日突然、Twitterに記事を載せても画像やブログの説明欄が反映されないことがありました。

 

何故だろう?と思い、原因を探ったことがあるので、それについて書きたいと思います。

TwitterにブログのURLだけしか表示されないということがあり、

それだと・・・

 全然目立たない!
ということで、改善しようと色々調べました。

解決策とは?

少し調べていくうちにこの原因は「metaタグ」という言葉があり、それが原因なようです。

この記事がめっちゃ参考になりました!

ferret-plus.com

今まで、メタタグなんて言う言葉、高校生は全く知らなかったんですが・・・
問題にぶち当たると、ググるという人間なので・・・
(プログラミングを勉強しているとね・・・どうしても)
ググるとこう言う言葉が出てきたという感じです。
 

ということで、このまま良い感じの表示のものをコピペする!

で、解決!と思ったが、、、

 

そうすると・・・

 

 こんな感じで、全く写真も表示されないんです!

これだと台無しやんけ!

ということで、そこから自分でカスタマイズしないといけないということが分かりました!

自分でこれを理解せなあかんということか!

ということで、一緒に理解していきましょう!

自分が作ったのはこれです!

 

<meta name="twitter:card" content="summary" />
<meta name="twitter:site" content="@kobayashinitya" />
<meta name="twitter:title" content="現役高校生のプログラミング奮闘記" />
<meta name="twitter:description" content="高校生の興味のあることを適当に書いてます。よろしく!" />
<meta name="twitter:image" content="https://www.internetacademy.jp/it/images/benefits-attend-web-programming-school.jpg" />
<meta name="twitter:url" content="https://www.flickr.com/photos/unicphoto/sets/72157645001703785/" />

 

これを見ていただけたら、何となくどこに何を入れるのか分かると思いますが、

1番上はいじらなくて、

2番目は自分のTwitterのアカウント名

3番目は自分のブログの名前

4番目はどんな画像を表示したいのかをネットで探してきた画像のURL

最後は特にいじってないです。

 

こんな感じでイケます!

そうすると・・・

 画像もちゃんと表示されるようになりました!

まとめ

高校生が悩んだことは、絶対に誰かも迷って記事にしてくれてます。

そんな感じでネットで、どれが一番自分とよく似た境遇かを探す力は必要かと思います。

 

こんな感じで今回はプログラミング関係?のことについて書きました。

久しぶりにソースコード説明した感じ。。。様になってるんじゃないですか!(笑)

気に入ったら広告クリックしていただけると高校生のやる気につながります!