Archive - Fight With Tools

Notes from WordCamp US 2015

December 04 Comments Off on Notes from WordCamp US 2015 Category: Feed, Fight With Tools, Wordpress

Notes from the grab bag of sessions that I attended at WordPress US 2015.

Friday

First Lightning Talk – Project Management in WordPress with Sarah Pressler (@sarahpressler)

  • Team Leadership
  • “If you can handle being yelled at, you’ll probably make a good project manager.”

Second Lightning Talk – The Techie Continuum – Kathryn Presner

  • Do I know enough? A question many of us ask ourselves.
  • “I’m not a techie” but I share tech knowledge and people come to me for tech advices.
  • Nightmare – fired before hired.
  • Dwell on your praise – at Automattic, they get hugs from customers and send compliments to each other internally.
  • Don’t be afraid to share your knowledge.

Session 2 – Developers Toolbox – Tracy Rotton (@taupecat)

  • Slides
  • Revision control is very important, Git is the way to go.
    • There are alternatives to Git, WordPress has used Subversion for a long time but is slowly switching to git.
    • Repository options: GitHub, Beanstalk, Atlassian Bitbucket, AWS CodeCommit
  • define( 'DISALLOW_FILE_EDIT', true ); – Set this up so no changes can be done outside of git revisions.
  • Vagrant
    • A computer inside your computer.
    • Can be configured with code.
    • Allows for closer match with the production environment.
    • Environments can be created or destroyed at will.
    • Good starter Vagrant for WP development – Varying Vagrant Vagrants
  • Package Managers
    • Composer – package manager for PHP
    • NPM – we’re using it to install more libraries!
    • Bower – We’re using it to install Sass libraries, FontAwesome
    • Don’t forget that a number of packages come with WordPress and you don’t need to install them.
  • Javascript task runners
    • Convert Sass
    • Check your Javascript for errors
    • Deploy to AWS
    • Gulp vs Grunt

      • Gulp has more complexity available.
      • Also Brunch and Broccoli in the third tier
  • WP-CLI

    • Anything you can do on the commandline you can script.
  • “_s”

    • Starter theme for WordPress
    • Takes care of a lot of basics.
  • [WordPress Plugin Boilerplate][plugin-boilerplate]
    • Blank scaffold of Plugin best practices.
  • What belongs in my theme and what belongs in a custom plugin?
  • Plugin tools
  • Invest the time in the beginning of a project to put good tools into place … [things] will go a lot more smoothly.
  • “I don’t commit compiled javascript”
    • Repositories are only for code that is touched by human hands.

Session 3 – The Future Stack – Zack Tollman (@tollmanz), Aaron Jorbin (@aaronjorbin)

  • PHP7 came out yesterday!
  • Facebook pushed out HHVM, cool stuff, lets you run Hack, fast.
  • PHP7 got pushed to get their shit together.
  • PHP7 overhalls the internals of PHP, everything is faster, 2-3x faster.
  • WordPress will warn you with depreciation notices.
  • Variable variables has altered
    • Expressions will always be processed left to right.
    • $$a['b'][$c]
  • List function will now go left to right, no longer accept empty variables.
  • New WordPress works great with HTTP/2
    • First major HTTP upgrade in a long time.
    • It’s a new web which needs a new HTTP
    • Much faster. It does this by trying to manage latency.
    • Handles latency better with multiplexing.
  • Your CSS – CSS4, not around yet, but the CSS working group is starting to put together the specs that will be the future of CSS
    • :read-
    • :read-only
    • :write
    • :nth-match (not yet supported anywhere)
    • :nth-last- (not yet supported anywhere)
    • color() function, native, with no pre-compile step, in the future of CSS. No browsers yet support this.
    • Custom properties for cascading variables – native setting of CSS variables.
  • HTTPS:
    • IETF – “Pervasive monitoring is an attack”
    • Some browser APIs are HTTPS only.
    • WordPress loves HTTPS.
    • Hardest is migrating HTTP to HTTPS.
    • Move to HTTPS can programmatically move people to HTTPS.
    • Let’s Encrypt – get free certificates.
    • ACME – protocol for RESTful HTTP interface for certificate management and issuance.
    • wp cert new in the works.
  • ECMAScript6 / Javascript2015
    • New update.
    • More modular.
    • new Promises
      • Pending
      • Resolved
      • Rejected
      • Append to promises!
      • Babel – Javascript compiler that lets you use tomorrow’s javascript today.
    • Arrow functions.
      • Share the same lexical this as the surrounding code.
    • Javascript gets default parameters.
      • Rest parameters – all the rest of the parameters after defined defaults go into array ...a.
    • #wpFutureStack

Session 4 – React + WordPress – Matías Ventura (@matias_ventura), Gregory Cornelius (@gcorne)

  • “The UI helps people understand and interact with the content, but never competes with it.”
  • “The illusion of speed, that everything is right there immediately.”
  • Real time-ier.
  • A declarative view layer!
  • Calypso

    • The WP Admin as a single page application.
    • Really allows you to craft all the flows in a way that is much more smooth.
    • “waiting for a doorknob to grow before you can use the door” no more!
    • Now you have all these different states that the UI can be in. How to manage it?
    • Editor UI States?
    • Viewable all on GitHub
  • React benefits
    • Small API that is easy to learn.
    • No need for a separate template language. Embrace Javascript
    • Events are bound as element properties which limits need for DOM traversal.
    • Composition of components is simple and first-class.
    • http://rauchg.com/2015/pure-ui
    • JSX
    • They compile with Webpack and Babel.
    • Components instead of Progressive enhancement
      • Create little packages of components, including encapsulating SASS
      • Sass goes with small components.
  • Components become semantics
    • You create a syntax for your site
  • Live components gallery in Calypso
  • A Boilerplate for WP plugins
  • Take a look at React Native

Session 5 – Intent in Software Design – Helen Hou-Sandí (@helenhousandi)

  • Naming is hard, but very very important.
  • .wp-core-ui Javascript from core that could be front or back end.
  • Be Intentional
  • “Backwards compatibility is not just about accommodating the past but deliberately considering the future.”
  • Think about more things as very discrete components.

Session 6 – Build a Theme with the REST API – Rachel Baker (@rachelbaker)

  • Rest API Theme Slidedeck
  • Why?
    • Because you can
    • Your content needs to update or change dynamically.
    • You want to separate your business logic from your views.
  • Using jQuery, Underscore.js and Director for routing.
  • Includes wp_head() to hook styles and scripts.
  • Uses the aria-live="assertive" to tell screen readers to pay attention to what changes in the js-data window.
  • Declares 3 routs. One of home, one for page, one for single posts. (All URL and permalink building occurs here)
  • site/wp-json will list all the routes.
  • Added an event handler to route visitors that click on our logo image in the header to send back to home page.
  • Add logic to handle posts into its own JS file, have the homepage write that script.
  • Puts the post ID on a div.
  • In the API you have to keep the resources separate. Base the &_embed object to get a lot of the extra data and get post by post name.

Session 7 – REST in Action: The Live Coverage Platform at the New York Times – Scott Taylor (@wonderboymusic)

  • NYT Wordpress now has a number of legacy blogs, First Draft, Internal Corporate sites, NYT Co. (Brand Site), Women of the World, Times Journeys, Live Coverage platform, and some forthcoming international projects.
  • At height of blogging at NYT, 80 blogs were active. A lot used live blogging, which was a totally seperate code-base.
  • NYT5
    • requires Vagrant
    • apps are git repos that require Grunt to transpile.
    • CSS compiles from SASS
    • JS compiles with Require.js
    • Used composer.
    • Had to point at NYT5 blogs app, pipe that to WordPress
    • Globals are bad.
    • Each page type is an app.
  • No day archives in the NYT system.
  • Use Heartbeat to pull latest posts into the side of the input area (so you can see as you blog).
    • nytimes.com/live/…
    • Backbone app that uses the REST API
    • React puts in live posts.
    • Updates are added from the backend, or via Slack which then pushes to a custom service that handles websockets.
  • WordPress becomes a web service.
    • Transition to a less monolithic mindset.
    • Storage mount that is front-end via Varnish and Akami, JSON response from WP is dumped into that.
  • Fire and Forget where we only post content we need.
  • Custom endpoints on save_post to push out and cache data.
  • Amazon SMS topic that they post to, as part of fire and forget. They send an event to the SMS queue and listening to that is a team that dynamically updates content and optimizes.

Session 8 – A Survey of Elasticsearch Usage – Greg Brown (@gregibrown)

  • Search engine that is distributed and scalable.
  • Analytics engine
  • Multi-lingual
  • Think about it as a funhouse mirror, a different way to store data.
  • Pagely, VIA and WP Engine are all using with WP. As are a number of agencies, alley, and 10up.
  • Six main use cases.
  • Site Search
    • Better than built in search.
    • Easier to do faceted (filtered-down) searching.
    • Missing
      • Search is not just about posts
      • How to answer questions?
      • Instant results
      • Highlighted results
      • Auto complete
  • Related Posts – very effective.
    • Increased click-through rate by about .5%, a big deal.
  • Replace WP_Query
    • ElasticPress
    • ES_WP_Query
    • Very popular way to solve scaling problems.
  • Logstash
    • Opensource
    • Imports logs and makes them searchable with ES.
    • log2logstash()
      • Dumps anything into the ES log.
    • Uses with Kibana.
  • Content Reranking
    • We know this user, show them what they want, not just the general stuff.
    • ES supports lat and long to rank based on distance.
    • Show readers articles that are local to them.
  • Break the blog boundary.
    • Through a ton of blogs into one big ES index to make searching and filtering easier.
    • Related posts and search over multiple sites.
  • GlotPress
    • Find similar strings that have been translated.
  • Additional data about images in the API.

Session 9 – Introduction to WordPress unit testing – Carl Alexander (@twigpress)

  • Unit testing – at the smallest scale.
  • Constant behavior, safety net.
  • Isolation is the most important part.
    • Need test bubbles – surrounds your code – what is your code doing?
    • Not the same as WordPress test suites – which is integration testing.
      • Not about isolation.
  • Needs
    • Unix based OS.
    • PHP5.3 for code (for namespaces), 5.4 for the tests (for traits)
    • Composer
    • WP-CLI
  • WP-CLI: wp scaffold plugin unit-tested-plugin
  • Add composer.json (package manager)
  • require-dev – we need this library only when we’re developing.
  • require the composer autoloader
  • 10up has WPMock, which is a little more limited.
  • All functions must be pre-fixed with test_.
  • Mock = test double.
    • Simulate the function or object to verify how you interact with it.
    • expect to get get called once with the param, if so, it returns X.
    • Works with get_option.
  • Sometimes you want an array from an option.
  • Write the failure case first, then make the code to not fail.
  • equalTo vs identicalTo is the diff of == to ===

    • “Constraint that asserts that one value is identical to another.”
  • Keep doing it and turn it into a habit.
  • Intro to WordPress Unit Testing
  • Unit Testing Demo
  • Unit testing makes more sense alongside biz logic.
  • What you really want to test is “am I insane?”

Session 10 – Advanced Topics in WordPress Development – Andrew Nacin (@nacin)

  • “We don’t want users to experience pain when they don’t have to … so we handle the edge case.”
  • We do break things but we figure out the most graceful, least intrusive way to do so
  • We’re not trying to break your plugins.
  • Wrote a unit test to check to make sure that there are no ampersands in a JS file.

Saturday

Session 3 – Gamify With the WordPress.com API – Timmy Crawford (@timmycrawford)

  • REST-based game board
  • Leaderboard for posting through the REST API.
  • Can be set up to track progress.
  • Can link to satisfying github issues.

Session 4 – Lightning 1 – I Wanna Go Fast: Advanced Techniques To Optimize Front-End Performance – Allen Moore (@creativeallen)

  • Speed impacts user experience heavily. (Easy and pleasing to use)
  • Better it deliver easily then attractively
  • User engagement is important. We want users to see our content and ads.
  • Keep header clean.
    • Use the async attribute on javascript.
    • Use the script loader tag to tell WP to set scripts async.
  • Prioritize the critical rendering path (page speed insights helps with this)
    • Use javascript functions to load the link to your theme CSS, or to load other items asyncronously.
    • Help use javascript to load javascript to help prioritize critical tasks.
    • Use deploy script to make the css modules run.
    • CSS for above the fold should load before under the fold.
  • Lazyloading.
  • Prefetch, preload, prerender.
    • DNS Prefetch
      • Good for avoiding multiple hits to an external server, say to get a bunch of tweets.
      • Aquire a resource that will be used in the future.
    • Preload puts a resource in the browser cache that will be used later.
    • Prerender – downloads the assets of the DOM before it is even rendered.
  • https://allenmoore.me/wordcamp-us-2015/

Session 4 – Lightning 2 – ARIA: Roles, States and Properties – Joe Dolson (@joedolson)

  • Very important to screen readers
  • But a semantic meta language that can be communicated to other technologies.
  • A group or properties that you can attach to an HTML object
  • Roles – define what function an element serves
  • States defines how you interact with an elementProperties give an element characteristics and relationships
  • Can be used with CSS and JS.
  • Roles can be implicit or explicit.
  • aria-level=

    • Can be redundant, replacement, or modifier.
    • If level 1, should be h1.
  • role=
  • “What ARIA does is it enhances semantics, so it gives more meaning to content.”
  • “If you give [an element] that’s a lie, you’re actually creating confusion”
  • You want to almost always avoid assigning roles that don’t have matched interactions actively on the object.
  • aria-expanded="true"

    • Is the menu open?
  • Use aria attributes in styles #menu-toggle[aria-expanded=true]
  • aria-controls="menu-main-menu"

    • Tells you what it is controlling.
    • Use that data to run Javascript to act on the box that the unit controls.
  • aria-label substitutes the text of a button so that it reads something else with assistive tech
  • aria-live critical to dynamic content, this is an area of the page that might change.

    • readers load in the DOM to allow someone to navigate it.
    • polite or assertive.
  • ARIA Presentation

Session 5 – Lightning 1 – The Future of WordPress is Low-Tech – Eric Mann (@ericmann)

  • By cutting down their load time, YouTube was able to reach all new audiences in lower tech countries.
  • Low bandwidth is really really slow (250kb/s)
  • In non developed markets only 20% of devices are smartphones.
  • Graceful degradation
    • turn off features and they still work.
  • Progressive enhancement
    • Start for low bandwidth
  • Web page test
  • Chrome lets you test with throttled bandwidth
  • Have a device lab.
  • Democratize web publishing for everyone.
  • No one ever tests their sites for Windows Phones.
  • “Be the change you wish to see in the world”
  • Use progressive enhancement, start ad units with internal ads to fill the space properly while the JS loads.

Session 5 – Lightning 2 – [Making use of a little known gem: The WordPress HTTP API][http-api-talk] – Ryan Duff (@ryancduff)

Session 6 – Meeting the New York Times Challenge: delivering the news over HTTPS – Paul Schreiber (@paulschreiber)

  • Advertisements from web providers (like airlines) will pop in on top of HTTP pages
  • A certificate can handle a single domain or multiple domains.
  • Wildcard certificates let you have a single certificate for *.yourdomain.com
  • Have to show organization and domain control through validation.
  • Symantec is a common certificate provider.
  • So is GoDaddy.
  • Resellers will get you a better deal like ssl.com
  • SSL Mate
  • Let’s Encrypt
  • mozilla.gihub.io/serverside-ttls/…
  • github.com/tollmanz/lets-encrypt
  • HTTPS enabled, HTTPS default, HSTS, submit your site to the HSTS preload list.
  • SNI – SHA1 vs SHA2 – all certificates should be signed with SHA2
  • Certificates are valid for a fixed amount of time. Don’t forget to renew them.
  • All resources will also need to be served via HTTPS.
  • DoubleClick and Outbrain are the only ads now with HTTPS
  • Social, font and analytics tools serve HTTPS
  • Fastly charges more for HTTPS
  • loadimpact.com – 1.8x faster just with HTTPS
  • content-security-policy: upgrade-insecure-requests
  • Content-Security-Policy-Report-Only
  • //url is an antipattern, use https://url instead. Except with iFrames.
  • HTTPS everywhere chrome extension.

Session 7 – [Playing well with others: writing solid code in large community projects][community-coding] – Dennis Snell (@dmsnell23)

  • The secret to WP’s success? Community.
  • Act consistently
  • Don’t mess with other peoples’ stuff
  • Don’t go around trying to prove how smart you are.
  • “An interesting thing happens when your customer base reaches a certain size: you cease having edge cases.” – Jason Fried of Basecamp.
  • Interesting and unexpected ways.
  • Remember that input is aggressive, it’s armed and dangerous and we need to force proper behavior and program defensively.
  • Don’t underestimate the power of lists.
    • Eliminate null checking and off by one errors
  • Check the quality and the quantity of the input.
  • Check to make sure that parameters that never happen, never happen.
  • Functions should –
    • Always return a legitimate value
    • Return a single type of value
    • Define failure values.
  • Need failure modes.
  • PHP Docs on Function structures
  • Chained functions? What happens when the inner function fails?
  • Great comments are there for what’s not there.
  • Describe how it could have been.
  • “The people who I work with are not idiots.”
  • Describe abnormalities in comments (like performance concerns.)
  • Describe risks.
  • “If you have to pause to think about it, it’s not obvious.”
  • Trivialize Trivia.
  • Describe what input we expect.
  • “Explicit is better than implicit” – Zen of Python.
  • “Avoid the features that are often useful but occasionally hazardous” – JavaScript: The Good Parts.
    • “Messy code often hides bugs”
  • Don’t get too deeply nested.
  • Communicate, test, explain.
  • Dual Algorithms for dev work.
  • Don’t be cute
  • Be consistent
  • communicate

Session 8 – WordPress Best Practices for Enterprise – Taylor Lovett (@tlovett12)

  • http://10up.com/blog/2014/engineering-best-practices/
  • WordPress Enterprise Best Practices
  • 10up uses [Redis][redis]. [WP Redis][wp-redis]
  • Page caching is used heavily.
  • Batcache plugin for page caching.
  • Fragment caching.
  • Remote calls block
  • Use non blocking
  • Prime cache asynchronously.
    • Set an AJAX request up to do this.
  • Avoid front end writing.
  • no_found_rows

    • When you don’t need to know stuff for pagination.
  • update_post_meta_cache
  • update_post_term_cache
  • fields
  • posts_per_page
  • post__not_in – very slow
  • update_option and add_option take a third param, $autoload, set it to false if you won’t need it on every page.
  • Use a CDN
  • Reduce number and size of HTTP Requests.
  • HTTP2 helps reduce number of requests.
  • Maintainability and stability – maintainable makes more sustainable. And visa versa
  • Don’t obsess over MVC
  • Twig leads to more confusing code.
  • Feature plugins
  • Document!
  • Avoid wrapping wrappers.
  • Write tests
    • [PHPUnit][phpunit]
    • [Mocha][mocha]
    • [Codeception][codeception]
      • [wp-codeception][wp-codeception]
  • Clean input
  • Esc data that is output to the screen.
    • esc_html
    • esc_attr
  • Don’t use innerHTML in JS.
  • Nonces are good for security.
  • Require strong passwords.
  • Review every single line of 3rd party code.
  • Code review!

Random Notes

  • AeroPress for good french press coffee
  • Should grind right before you make.
  • Pourover method.
    • Hario makes best pourover containers.
  • Crazy method – Vacuum siphon method

  • March coffee festival in Brooklyn.

  • Dec 2th through 4th will be WordCampUS 2016 in Philly next year.
  • Find videos at https://2015.us.wordcamp.org/live-stream/

What’s the end game in the world of Google AMP?

December 03 Comments Off on What’s the end game in the world of Google AMP? Category: Feed, Fight With Tools, Journalism

Facebook Instant Articles, Google AMP.

It’s all just one long push to the bottom until publishers are few and weak enough that either Google or Facebook get to fully dictate terms. Unless you’re BuzzFeed, where your business model is totally ad free, I don’t understand why anyone signs on for either service. Sure, if you’re large enough you get to grind your enemies into dust by taking losses to force them off the board… but the losses you have to take yourself to do so are going to be way too high to really recover from.

It’s the Uber model: drive profit below costs (into losses) long enough to eliminate competition and hope that there’s enough of your own savings left to recover once you have a monopoly. It’s crazy. Uber only pulls it off because they have endless VC pouring in. Even then there’s going to come a point where they just collapse, because at the end of the game you really can’t control the whole market forever.

This strategy only makes sense if you are too ill-informed to know what you’re getting into, lack any sense of forethought, or just greedy and think you’ll get out before the collapse comes. Where are we going from here? Have we let the technology sector push publishing to give up on running their businesses ethically? This is a mess and I don’t know how we’re going to escape from the bed we’re making.

How to make your Jekyll site show up on social

November 11 Comments Off on How to make your Jekyll site show up on social Category: Code, Feed, Fight With Tools

Congratulations, you’ve set up a Jekyll site. You may even be, like me, taking advantage of the free hosting provided by GitHub. You’ve written your first post, you’ve set up all the options. But when you go to share it on Facebook, Tumblr, LinkedIn or Twitter, that share may not look so pretty.

Here’s how to make Jekyll posts easier for others to see and share on social networks.

To fix ugly shares and be the envy of all your GitHub followers you’ll have to add some metadata to the HTML HEAD tag. Following is a walk-through of what tags and Liquid code is needed to generate those tags. Unless otherwise indicated, this markup goes in the head.html file in your _includes folder. If you’re not already familiar with social and open graph tags, this post should be a useful illustration of how they work.

First, there are standard tags that should be applied on every page.

<!-- The Author meta propagates the byline in a number of social networks -->
<meta name="author" content="Aram Zucker-Scharff" />

The og:title tag sets the title for sharing. I’ve duplicated the logic of the title tag to show either the site title or the post title based on what location the user has loaded. You could set a post-level variable for custom title as well or change the number of allowed characters.

We’ll do the same with duplicating the logic of the description to og:description and canonical to og:url tags.

I’ve made the below Liquid statements multi-line for easier reading, but I wouldn’t recommend that in production.

<meta property="og:title"
    content="{% if page.title %}
      {{ page.title | strip_html | strip_newlines | truncate: 160 }}
    {% else %}
      {{ site.title }}
    {% endif %}">

<meta property="og:description"
    content="{% if page.excerpt %}
        {{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}
      {% else %}
        {{ site.description }}
      {% endif %}">


<meta property="og:url"
    content="{{ page.url | replace:'index.html','' | prepend: site.baseurl | prepend: site.url }}" />

Populating the Open Graph site name and locale tags is fairly straightforward.

<meta property="og:site_name" content="{{ site.title }}" />

<meta property="og:locale" content="en_US" />

These are the site-wide Twitter tags. My twitter:site property is set to my personal name, but you might want to set it to your site’s account, if you have one. Description is set to the same data as the other description tags.

<meta name="twitter:site" content="@chronotope" />
<meta name="twitter:description" content="{% if page.excerpt %}{{ page.excerpt | strip_html | strip_newlines | truncate: 160 }}{% else %}{{ site.description }}{% endif %}" />

To populate all the fields social networks expect, you’ll need some extra properties on your posts. Here’s what the head of this post’s markdown file looks like.

---
layout: post
title:  "How to make your Jekyll site more shareable"
date:   2015-10-29 01:34:51 -0400
categories: jekyll social-media
image: http://41.media.tumblr.com/173cb5c51a1c308ab022a786f69353f3/tumblr_nwncf1T2ht1rl195mo1_1280.jpg
vertical: Code
excerpt: "Jekyll is pretty cool, here's how to make writing with it easier for others to share on social networks."
---

There are a number of meta tags that are either site or article only. In order to figure out if we’re on an article or not Liquid can switch in an if/else statement on the page.title.

{% if page.title %}
  <!-- Article specific OG data -->
  <!-- The OG:Type dictates a number of other tags on posts. -->
  <meta property="og:type" content="article" />
  <meta property="article:published_time" content="{{page.date}}" />

  <!-- page.modified isn't a natural Jekyll property, but it can be added. -->
  {% if page.modified %}
    <meta property="article:modified_time" content="{{page.modified}}" />
  {% endif %}

  <!-- Here my author and publisher tags are the same (yay self-publishing) -->
  <meta property="article:author" content="http://facebook.com/aramzs" />
  <!-- But if your site has its own page, this is where to put it. -->
  <meta property="article:publisher" content="https://www.facebook.com/aramzs" />

  <!-- Article section isn't a required property, but it can be good to have -->
  <meta property="article:section" content="{{page.vertical}}" />

  <!-- I use the page.categories property for OG tags. -->
  {% for tag in page.categories %}
    <meta property="article:tag" content="{{tag}}" />
  {% endfor %}

  <!-- I prefer the summary_large_image Twitter card for posts. -->
  <meta name="twitter:card" content="summary_large_image" />
  <!-- You, you're the creator. -->
  <meta name="twitter:creator" content="@chronotope" />
  <!-- This property is for the article title, not site title. -->
  <meta name="twitter:title" content="{{page.title}}" />

Sharing works better with pictures. You can upload them to your repository, or link them from other locations. Not every page may have an image, so I’ve built a check to assure that an image has been supplied. If one hasn’t, it returns to the default image I have for the whole site.

This takes care of both the Open Graph and Twitter Image tags. With more page properties you could have custom images for each if you wanted.

{% if page.image %}
    <meta property="og:image" content="{{page.image}}" />
    <meta name="twitter:image" content="{{page.image}}" />
  {% else %}
    <meta property="og:image" content="https://41.media.tumblr.com/709bb3c371b9924add351bfe3386e946/tumblr_nxdq8uFdx81qzocgko1_1280.jpg" />
    <meta name="twitter:image" content="https://41.media.tumblr.com/709bb3c371b9924add351bfe3386e946/tumblr_nxdq8uFdx81qzocgko1_1280.jpg" />
  {% endif %}

What if you’re not on a post page? There are some default values we can fill in to indicate that we’re on the basic website.

{% else %}
  <!-- OG data for homepage -->
  <meta property="og:image" content="https://41.media.tumblr.com/709bb3c371b9924add351bfe3386e946/tumblr_nxdq8uFdx81qzocgko1_1280.jpg" />
  <meta property="og:type" content="website" />
  <meta name="twitter:card" content="summary" />
  <meta name="twitter:title" content="{{site.title}}" />
  <meta name="twitter:image" content="https://41.media.tumblr.com/709bb3c371b9924add351bfe3386e946/tumblr_nxdq8uFdx81qzocgko1_1280.jpg" />

{% endif %}

That’s all of them! If you’re interested, you can see the whole set of tags, the Liquid script, and the rest of head.html that I use for this very site by checking the repo.